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.

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.

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);

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));

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));

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)

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);

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.

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

});

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));

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]

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]

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...