Polyfills in JS

📄 Table of Contents

▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Introduction

In simple word, A polyfill is a piece of javascript code which provide native support to the older browsers who does NOT have the support of modern functionalities of javascript.

In ECMAScript 2015, there are many new Array methods has been added to manipulate an arrays in a simple and easy way. Here we are trying to create polyfills for .forEach(), .map() and .filter() methods.

Prior to writting polyfills, let’ s understand how to write callback functions?

How to write callback functions

A callback function is a function that is passed as an argument to another function, to be “called back” at a later time. A function that accepts other functions as arguments is called a higher-order function, which contains the logic for when the callback function gets executed. It’s the combination of these two that allow us to extend our functionality.

To illustrate callbacks, let’s start with a simple example:

function createQuote(quote, callback) {
var myQuote = "A cb is run post first is , " + quote;
callback(myQuote); // 2
}
function this_is_callback_defintion(quote) {
console.log(quote);
}
createQuote("completed!", this_is_callback_defintion); // 1// A cb is run post first is completed

Polyfills for .forEach(), .map() and .filter() methods of javascript

Lets take an example to understand the difference between the array methods and polyfill code:

.forEach()
.forEach() function is required when you want to iterate an elements of an array instead of using for loop for same output.

The .forEach() syntax in ECMAScript 2015
Array.forEach(callback [, contextObject]);
Let's create a common fruits array for all methods:

let fruits = ['Mango', 'Apple', 'Banana', 'Grapes']

Using ES6 .forEach() here

fruits.forEach(function (element) {
console.log(element);
});
**Output:**
Mango
Apple
Banana
Grapes

Polyfills for .forEach()

Array.prototype.customForEach = function(callback){
for(i=0; i < this.length; i++){
callback(this[i])
}
}
fruits.customForEach(function(element){
console.log(element)
})

**Output:**
Mango
Apple
Banana
Grapes

.map()
.map() is also used to iterate elements of an array like .forEach() method, the difference is that instead of returning items out of the array, it return the array itself.

The .map() syntax in ECMAScript 2015
arrayObject.map(callback[,contextObject]);

const fruitsOutput = fruits.map(function(element) {
return element
})
console.log(fruitsOutput)

**Output:**
["Mango", "Apple", "Banana", "Grapes"]

Polyfill for .map()

Array.prototype.customMap = function(callback){
let arr = [];
for(i=0; i < this.length; i++){
arr.push(callback(this[i]))
// this = ["Mango", "Apple", "Banana", "Grapes"]
// this.length = 4;
}
return arr;
};
let fruitsOutput = fruits.customMap(function(element){
return element;
});
console.log(fruitsOutput)
**Output:**
["Mango", "Apple", "Banana", "Grapes"]

.filter()
JavaScript Array provides the filter() method that allows us to create a new array that contains a subset of elements of the original array.

lets create an array object of fruits with two properties names and price and then filter fruits by its price:

let fruits = [
{ name: 'Mango', price: 200},
{ name: 'Apple', price: 300},
{ name: 'Banana', price: 100},
{ name: 'Grapes', price: 150}
]

The .filter() syntax in ECMAScript 2015
arrayObject.filter(callback, contextObject);

let fruitsFilter = fruits.filter(function (element) {
return element.price > 100;
});
console.log(fruitsFilter);

**Output:**
{name: "Mango", price: 200}
{name: "Apple", price: 300}
{name: "Grapes", price: 150}

Polyfills for .filter()

Array.prototype.customFilter = function(callback, context){
var arr = [];
for(i=0; i < this.length; i++){
if(callback.call(context, this[i], i, this)){ // it runs with out this line as well //
arr.push(this[i])
}
}
return arr
}
let fruitsOutput = fruits.customFilter(function(element){
if(element.price > 100){
return element;
}
})
console.log(fruitsOutput)**Output:**{name: "Mango", price: 200}
{name: "Apple", price: 300}
{name: "Grapes", price: 150}

How to write polyfill for bind

In our original (first one) code snippet, if we replace bindwith mybind, you will get the same results.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anil Kumar

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.