Polyfills for .forEach(), .map(), .filter(), .reduce() in JavaScript 
Tags: javascript
Published: 2021-07-26 23:11:20

A piece of code that provide native support to the older browsers who does not have the support of modern functionalities of javascript is known as polyfill.

## forEach
The forEach() executes the callback function on each element of array.

```javascript
const names = ["ali", "hamza", "jack"];
function consoleFunc(x) {
   console.log(x);
}
names.forEach(consoleFunc);

// console
// ali hamza jack
```
Let's make its polyfill
```javascript
Array.prototype.ourForEach = function (callBack) {
  for (let i = 0; i < this.length; i++) {
    callBack(this[i]);
  }
};
names.ourForEach(consoleFunc);

// console
// ali hamza jack
```

> **Array.prototype** let use run our function on every array
> **this** corresponds to the array

## map
.map() is very much similar to .forEach() method, except, instead of returning items out of the array, it return the array itself

```javascript
const users = [1, 2, 3, 4, 5];
function double(x) {
  return x + x;
}
const newUsers = users.map(double);
// console
// [1, 4, 9, 8, 10]
```
Let's make its polyfill
```javascript
const users = [1, 2, 3, 4, 5];
Array.prototype.ourMap = function (callBack) {
  const newArray = [];
  for (let i = 0; i < this.length; i++) {
    newArray.push(callBack(this[i]));
  }
  return newArray;
};
console.log(users.ourMap(double));

// console
// [1, 4, 9, 8, 10]
```

## filter
.filter() decide what kind of items do we want in the resulting array.
```javascript
const logicAlbums = [
  {
    name: "Bobby Tarantino",
    rating: 5,
  },
  { name: "The Incredible True Story", rating: 4.5 },
  {
    name: "Supermarket",
    rating: 4.9,
  },
  {
    name: "Neon",
    rating: 4.2,
  },
  { name: "Under Pressure", rating: 5 },
];

function greaterThan(x) {
  return x.rating > 4.5;
}

const filtered = logicAlbums.filter(greaterThan);
console.log(filtered)

// console
// [ 
// {name: "Bobby Tarantino", rating: 5},
// {name: "Supermarket", rating: 4.9},
// {name: "Under Pressure", rating: 5}
// ]
```
Let's make its polyfill
```javascript
Array.prototype.ourFilter = function (callBack) {
  let output = [];
  for (let i = 0; i < this.length; i++) {
    if (callBack(this[i])) {
      output.push(this[i]);
    }
  }
  return output;
};

console.log(logicAlbums.ourFilter(greaterThan));
// console
// [ 
// {name: "Bobby Tarantino", rating: 5},
// {name: "Supermarket", rating: 4.9},
// {name: "Under Pressure", rating: 5}
// ]
```
## reduce
reduce() function is used to reduce the array to a single value.
> not the exact definition, but we will consider this for sake of simplicity
```javascript
const numbers = [1, 2, 3, 4, 5, 6];

function additionFunction(accumulator, current) {
  accumulator = accumulator + current;
  return accumulator;
}

const sum = numbers.reduce(additionFunction, 0);

console.log(sum);

// console
// 21
```
Let's make its polyfill
```javascript
Array.prototype.ourReduce = function (callback, initialValue) {
  var accumulator = initialValue === undefined ? undefined : initialValue;

  for (var i = 0; i < this.length; i++) {
    if (accumulator !== undefined) {
      accumulator = callback.call(undefined, accumulator, this[i], i, this);
    } else {
      accumulator = this[i];
    }
  }
  return accumulator;
};

console.log(numbers.ourReduce(additionFunction));

// console
// 21
```