DEV Community

Pritam Kumar
Pritam Kumar

Posted on

PollyFill for map(), filter(), forEach().

Hello Everyone! Hope you all are doing great.

Table of contents

  • Function?
    • Ways to writing a function in JavaScript?
  • Higher order function?
  • First order function?
  • What is pollyfill?
  • Pollyfill for map, filter, forEach

Before Writing about pollyfill, I'll explain about function, Higher order function, and First order function.

Image description

Let's dive into it...

What are function in JavaScript?

Function in JavaScript are Building block of code (Statement).
Which is responsible of a particular operations, that can be re-use in your JavaScript program without repetition. (You have to just invoke it, where you want to use this function)

It takes some value as input(argument),and return some value after invocation.

Image description

There are Three ways to write function in JavaScript?

Function Declaration

It is a Traditional ways to declare a function in JavaScript. It start with function keyword, after that function name with parenthesis and then curly braces.

// Function declaration

function add(x, y) {        
    console.log(x + y);
}

// Function invocation 
add(2, 3);
Enter fullscreen mode Exit fullscreen mode

Function Expression

Function are first class citizen in JavaScript.
In JavaScript function are treated as like any other variable.

// Single line of code
let add = (x, y) => x + y;

console.log(add(3, 2));
Enter fullscreen mode Exit fullscreen mode

In Function Expression, If there are more than one parameter in function should use parentheses with parameter. And when there are multiple lines on code we should use return keyword in the expression.

// Multiple line of code

const great = (x, y) => {
  if (x > y) {
    return 'a is greater';
  } else {
    return 'b is greater';
  }
};

console.log(great(3, 5));

Enter fullscreen mode Exit fullscreen mode

Now Let's Know about Higher order Function and First order function

In JavaScript Higher order function either it take function as argument or return a function are know as Higher order function.
On the other hand, If a function that takes only primitives or object as arguments and returns only primitive or object are know as First order function.

//returning a function
function nums(x, y) {
  return function sum() {
    return `The sum is ${x + y}`;
  };
}

const getSum = nums(3, 5);

console.log(getSum());

//function as a parameter
function message (name) {
  console.log(`Hello ${name}`)
}

function greet (name, cb) {
  cb(name)
}

greet("Pritam", message)

Enter fullscreen mode Exit fullscreen mode

Functions such as filter(),map(),reduce(), forEach etc, these all are example of Higher-Order Functions in JavaScript. which is use with a array.

Now Let's move to pollyfill.

Pollyfill

A Pollyfill is a piece of code used to provide modern functionality to older browser that do not natively .

Suppose a older browser does not support modern functionality, A developer code that functionality from scratch.

It is Browser fallback that it does not support.

Let's write first pollyfill for map() function.
Before that, knows about what it does with an Array.

map()

The map() function/method call a callback function once for each element in the array.

OR

The map() method to iterate over an array and modifies the array element using a callback function. and return a new array. does not mutate the original array.

The callback function in map has three arguments current Element, index and original array.

Example

const array = [3, 6, 9, 1, 2];
const newArray = array.map((num) => num * 3);
console.log(newArray);

Enter fullscreen mode Exit fullscreen mode

Pollyfill for map()

Array.prototype.myMap = function (callback) {
  let newArray = [];

  for (let i = 0; i < this.length; i++) {
    newArray.push(callback(this[i], i, this));
  }

  return newArray

};

const result = array.map((num) => num * 3);
console.log(result);

// Here, this keyword reference to parent array.

Enter fullscreen mode Exit fullscreen mode

forEach()

The forEach method call a callback function once for each element in the array. It does not return new array. Mostly is uses over for loop, just to iterate an array element.

const array = [3, 6, 9, 1, 2];

array.forEach((num) => {
  console.log(num); // 3, 6, 9, 1, 2

});

Enter fullscreen mode Exit fullscreen mode

Pollyfill for forEach()

Array.prototype.myForEach = function (callback) {
//Since forEach does not return array
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this); 
  }
};

array.myForEach((num) => console.log(num));

Enter fullscreen mode Exit fullscreen mode

filter()

The filter method return a new array with all elements that pass the test implemented by provider function. It does not mutate the
original array.

const array = [3, 6, 9, 1, 2];
const result = array.filter((num) => num> 3)
console.log(result) // [6, 9]

Enter fullscreen mode Exit fullscreen mode

Pollyfill for filter

Array.prototype.myFilter = function (callback) {
  let newArray = [];

  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      newArray.push(this[i]);
    }
  }

  return newArray;
};

const result = array.myFilter((num) => num > 3);
console.log(result); // [6, 9]

Enter fullscreen mode Exit fullscreen mode

What is Array.prototype?

The JavaScript array prototype constructor is used to allow to add new methods and properties to the Array() object.

Thank you for reading...

Discussion (1)

Collapse
lukeshiru profile image
Luke Shiru

If you have users in browser that don't support filter, forEach or map, you have users in unsupported browsers, so you shouldn't waste your time writing pollyfills for that. Even if you actually need a polyfill, is better to use something like core-js. Don't get me wrong, is ok to do this as an experiment, my point is that you should avoid doing it yourself in real world apps.