Let's Polyfill - map(), filter() and reduce()

Map

map is an Array method that takes in a callback and returns an array of items that were returned from the callback

Example:

1
2
3
4
const arr = [1, 2, 3, 4];
const res = arr.map((el) => el * 2);

console.log(res); // returns [2,4,6,8]

Let’s create our own map method called myMap

myMap() takes in a parameter which a callback/function.
It has a results array that gets returned by the myMap function.
The returned values from our cb are pushed in the results array.
The this here would be the array that we will use this myMap function on.
The traditional map() callback can take 3 args. element, index and the source arr. We have done the same.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function myMap(cb, thisArg) {
  const arr = [];

  for (let i = 0; i < this.length; i++) {
    if (!Object.hasOwn(this, i)) {
      arr.push(this[i]);
    } else {
      arr.push(callbackFn.call(thisArg, this[i], i, this));
    }
  }

  return arr;
}

// Doing this will allow us to use arr.myMap() syntax
Array.prototype.myMap = myMap;

const arr = [1, 2, 3, 4, 5, 6];
const myMapResult = arr.myMap((el, _idx, _arr) => {
  return el * 2;
});

console.log(myMapResult); //[2, 4, 6, 8, 10, 12];

Filter

filter() is an Array method that takes in a callback and returns an array of items that satisfy the condition provided in our callback

Example:

1
2
3
4
const arr = [1, 2, 3, 4];
const res = arr.filter((el) => el % 2); // only return even numbers

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

Let’s create our own filter method called myFilter

myFilter() takes in a parameter which a callback/function.
It has a results array that gets returned at the end.
The returned values from our cb are pushed in the results array.
The this here would be the array that we will use this myFilter function on.
The traditional filter() callback can take 3 args. element, index and the source arr. We have done the same.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function myFilter(cb, thisArgs) {
  if (!Array.isArray(this)) {
    throw new TypeError('FIlter must be run on array');
  }

  const arr = [];

  for (let i = 0; i < this.length; i++) {
    if (callbackFn.call(thisArg, this[i], i, this)) {
      arr.push(this[i]);
    }
  }

  return arr;
}

// Doing this will allow us to use arr.myFilter() syntax
Array.prototype.myFilter = myFilter;

const arr = [1, 2, 3, 4, 5, 6];

const foo = [
  { name: 'S', age: 2 },
  { name: 'V', age: 3 },
];

const myFilterResult = foo.myFilter((el, _idx, _arr) => {
  return el.name !== 'S';
});

console.log(myFilterResult); // [{ name: "V", age: 3 }]

Reduce

Here the MDN definition of it.

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

It takes in two important parameters. accumulater and currentValue

Example:

1
2
3
4
5
6
7
const arr = [1, 2, 3, 4];
const res = arr.reduce((acc, curr) => {
  acc += curr;
  return acc;
}); // 10

console.log(res); // 10

Lets create our own reduce() method called myReduce()

myReduce() takes in a parameter which a callback/function.
It returns a single reduced value.
The returned values from our cb is assigned to the acc.
The this here would be the array that we will use this myReduced function on.
The traditional reduced() callback can take 4 args. accumulator, currentValue, index and the source arr. We have done the same.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function myReduce(cb, initialValue) {
  let prev = typeof initialValue !== 'undefined' ? initialValue : this?.[0];
  if (!this.length && typeof prev === 'undefined')
    throw new Error('emoty lenfth');

  let i = typeof initialValue !== 'undefined' ? 0 : 1;

  for (; i < this.length; i++) {
    if (Object.hasOwn(this, i)) {
      prev = cb.call(this, prev, this[i], i, this);
    }
  }

  return prev;
}

// Doing this will allow us to use arr.myReduce() syntax
Array.prototype.myReduce = myReduce;

const myReduceResult = arr.myReduce((acc, curr, _idx, _arr) => {
  acc += curr;
  return acc;
});

console.log(myReduceResult); // 21

If you find any errors or edge cases in the above code then please let me know. I am happy to learn about them and add them here.

In the next blog in this series, I’ll try and write our own debounce function from the loadash library

Also, if you guys want to see polyfills of your libs then let me know in the comments.

Hope this blog was helpful to you.