📄 Table of Contents

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

Introduction

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

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

.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)){
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}

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

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