How do you create polyfills for map, filter and reduce methods?

The polyfills for array methods such as map, filter and reduce methods can be created using array prototype.

1. map:

The built-in Array.map method syntax will be helpful to write polyfill. The map method takes the callback function as an argument and that callback function can have below three arguments passed into it.

i. Current value

ii. Index of current value(optional)

iii. array(optional)

The syntax would like below,

1let newArray = arr.map(callback(currentValue[, index, arr) {
2  // return new array after executing the code
3  })

Let's build our map polyfill based on the above syntax,

1Array.prototype.myMap = function (cb) {
2
3let newArr = [];
4
5for (let i = 0; i < this.length; i++) {
6  newArr.push(cb(this[i], i, this));
7}
8
9return newArr;
10};
11
12const nums = [1, 2, 3, 4, 5];
13
14const multiplyByTwo = nums.myMap((x) => x * 2);
15
16console.log(multiplyByTwo); // [2, 4, 6, 8, 10]

In the above code, custom method name 'myMap' has been used to avoid conflicts with built-in method.

2. filter:

Similar to map method, Array.filter method takes callback function as an argument and the callback function can have three agurguments passed into it.

i. Current value

ii. Index of current value(optional)

iii. array(optional)

The syntax looks like below,

1let newArray = arr.filter(callback(currentValue[, index, arr) {
2  // return new array whose elements satisfy the callback conditions
3  })

Let's build our filter polyfill based on the above syntax,

1Array.prototype.myFilter = function (cb) {
2
3let newArr = [];
4
5for (let i = 0; i < this.length; i++) {
6  if (cb(this[i], i, this)) {
7  newArr.push(this[i]);
8  }
9}
10
11return newArr;
12};
13
14const nums = [1, 2, 3, 4, 5, 6];
15
16const evenNums = nums.myFilter((x) => x % 2);
17
18console.log(evenNums); // [2, 4, 6]

3. reduce:

The built-in Array.reduce method syntax will be helpful to write our own polyfill. The reduce method takes the callback function as first argument and the initial value as second argument.

The callback function can have four arguments passed into it.

i. Accumulator

ii. Current value

iii. Index of current value(optional)

iv. array(optional)

The syntax would like below,

1arr.reduce(callback((acc, curr, i, arr) => {}), initValue);

Let's build our reduce polyfill based on the above syntax,

1Array.prototype.myReduce = function(cb, initialValue) {
2  let accumulator = initialValue;
3  for(let i=0; i< this.length; i++) {
4  accumulator = accumulator ? cb(accumulator, this[i], i, this) : this[i];
5  }
6  return accumulator;
7  }
8  const nums = [1, 2, 3, 4, 5, 6];
9  const sum = nums.myReduce((acc, curr, i, arr) => {
10  return acc += curr
11  }, 0);
12  console.log(sum); // 21

How do you create polyfills for map, filter and reduce methods?

JavaScript Coding Exercise 31