Polyfill for map, filter and reduce in JavaScript

#javascript #webdev #frontend #programming

Hey there!!

If you are a JavaScript developer or learner then you must have come around these 3 widely used array methods : map, filter and reduce.

If you are a consistent learner or preparing for interviews, this article might help you to go little bit deep down in JS. Before we see how Polyfills are implemented lets define what a Polyfill is.

Polyfill : A piece of code to implement a specific functionality so that browsers provide them natively. Suppose a browser doesn’t support a particular String method, in that case developers could write their own implementation for the same.

Now, let’s dive into some coding!!

In JavaScript if you want add a method to an object we can do it by using the prototype. Suppose, you have an object named Person and you wish to add a method getName(), then you can do that by following piece of code.

Person.prototype.getName = function() {
  //code goes here
}

Now, using the same syntax we are going to implement our polyfills.

If you see the syntax of map(), filter() and _reduce() _functions, they take a callback as an argument. And that callback function takes 3 arguments.

currentValue
index of currentValue [Optional]
array [Optional]

Polyfill for map : customMap()

Array.prototype.customMap = function(callback) {
  const arr = this;
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    const val = callback(arr[i], i); //pass 'i' for index
    result.push(val);
  }
  return result;
};

const arr = [1,2,3,4,5];
console.log(arr.customMap((ele, index) => {
  console.log(index);
  return ele*2;
}))
//Output
//0 1 2 3 4
//[2,4,6,8,10]

Polyfill for filter : customFilter()

Polyfill for filter is same as map with the only difference that we just need to add array element into the result if the callback returns true.

Array.prototype.customFilter = function(callback) {
  const arr = this;
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if(callback(arr[i], i) === true);
      result.push(arr[i]);
  }
  return result;
};

const arr = [1,2,3,4,5];
let result = arr.customFilter((ele) => {
  return (ele%2 === 0);
})

console.log(result);
//[2,4]

Polyfill for reduce : customReduce()

Polyfill for reduce is little different than the previous ones. It takes one more argument named as initialValue.

array.reduce(callback(result, currentValue, index), initialValue = 0)

Array.prototype.customReduce = function (callback, initialValue = 0) {
  const arr = this;
  let result = initialValue;
  for (let i = 0; i < arr.length; i++) {
    result = callback(result, arr[i], i);
  }
  return result;
};

const arr = [1, 2, 3, 4, 5];
let result = arr.customReduce((res, arr) => {
  return res + arr;
}, 3);

console.log(result);
//18

Happy Coding!!

Do like and comment…Thank You for reading!!