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

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.

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]))
    }
    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)){
            arr.push(this[i])
        }
    }
    return arr
}

fruits.customFilter(function(element){
    if(element.price > 100){
        console.log(element)
    }
})

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

#javascript #methods #arrays #function #callbacks