PollyFill for map(), filter(), forEach().

Howdy Everybody! Hope you all are doing nice.



Desk of contents

  • Perform?
    • Methods to writing a perform in JavaScript?
  • Larger order perform?
  • First order perform?
  • What’s pollyfill?
  • Pollyfill for map, filter, forEach

Earlier than Writing about pollyfill, I will clarify about perform, Larger order perform, and First order perform.

Let’s dive into it…



What are perform in JavaScript?

Perform in JavaScript are Constructing block of code (Assertion).
Which is accountable of a specific operations, that may be re-use in your JavaScript program with out repetition. (You need to simply invoke it, the place you wish to use this perform)

It takes some worth as enter(argument),and return some worth after invocation.

Image description



There are 3 ways to put in writing perform in JavaScript?



Perform Declaration

It’s a Conventional methods to declare a perform in JavaScript. It begin with perform key phrase, after that perform title with parenthesis after which curly braces.

// Perform declaration

perform add(x, y) {        
    console.log(x + y);
}

// Perform invocation 
add(2, 3);
Enter fullscreen mode

Exit fullscreen mode



Perform Expression

Perform are top quality citizen in JavaScript.
In JavaScript perform are handled as like every other variable.

// Single line of code
let add = (x, y) => x + y;

console.log(add(3, 2));
Enter fullscreen mode

Exit fullscreen mode

In Perform Expression, If there are a couple of parameter in perform ought to use parentheses with parameter. And when there are a number of traces on code we should always use return key phrase within the expression.

// A number of line of code

const nice = (x, y) => {
  if (x > y) {
    return 'a is bigger';
  } else {
    return 'b is bigger';
  }
};

console.log(nice(3, 5));

Enter fullscreen mode

Exit fullscreen mode

Now Let’s Find out about Larger order Perform and First order perform

In JavaScript Larger order perform both it take perform as argument or return a perform are know as Larger order perform.
Then again, If a perform that takes solely primitives or object as arguments and returns solely primitive or object are know as First order perform.

//returning a perform
perform nums(x, y) {
  return perform sum() {
    return `The sum is ${x + y}`;
  };
}

const getSum = nums(3, 5);

console.log(getSum());

//perform as a parameter
perform message (title) {
  console.log(`Howdy ${title}`)
}

perform greet (title, cb) {
  cb(title)
}

greet("Pritam", message)

Enter fullscreen mode

Exit fullscreen mode

Capabilities comparable to filter(),map(),scale back(), forEach and so on, these all are instance of Larger-Order Capabilities in JavaScript. which is use with a array.

Now Let’s transfer to pollyfill.



Pollyfill

A Pollyfill is a bit of code used to supply trendy performance to older browser that don’t natively .

Suppose a older browser doesn’t assist trendy performance, A developer code that performance from scratch.

It’s Browser fallback that it doesn’t assist.

Let’s write first pollyfill for map() perform.
Earlier than that, is aware of about what it does with an Array.



map()

The map() perform/methodology name a callback perform as soon as for every ingredient within the array.

OR

The map() methodology to iterate over an array and modifies the array ingredient utilizing a callback perform. and return a brand new array. doesn’t mutate the unique array.

The callback perform in map has three arguments present Component, index and unique array.



Instance

const array = [3, 6, 9, 1, 2];
const newArray = array.map((num) => num * 3);
console.log(newArray);

Enter fullscreen mode

Exit fullscreen mode



Pollyfill for map()

Array.prototype.myMap = perform (callback) {
  let newArray = [];

  for (let i = 0; i < this.size; i++) {
    newArray.push(callback(this[i], i, this));
  }

  return newArray

};

const consequence = array.map((num) => num * 3);
console.log(consequence);

// Right here, this key phrase reference to guardian array.

Enter fullscreen mode

Exit fullscreen mode



forEach()

The forEach methodology name a callback perform as soon as for every ingredient within the array. It doesn’t return new array. Largely is makes use of over for loop, simply to iterate an array ingredient.

const array = [3, 6, 9, 1, 2];

array.forEach((num) => {
  console.log(num); // 3, 6, 9, 1, 2

});

Enter fullscreen mode

Exit fullscreen mode



Pollyfill for forEach()

Array.prototype.myForEach = perform (callback) {
//Since forEach doesn't return array
  for (let i = 0; i < this.size; i++) {
    callback(this[i], i, this); 
  }
};

array.myForEach((num) => console.log(num));

Enter fullscreen mode

Exit fullscreen mode



filter()

The filter methodology return a brand new array with all parts that move the take a look at applied by supplier perform. It doesn’t mutate the
unique array.

const array = [3, 6, 9, 1, 2];
const consequence = array.filter((num) => num> 3)
console.log(consequence) // [6, 9]

Enter fullscreen mode

Exit fullscreen mode



Pollyfill for filter

Array.prototype.myFilter = perform (callback) {
  let newArray = [];

  for (let i = 0; i < this.size; i++) {
    if (callback(this[i], i, this)) {
      newArray.push(this[i]);
    }
  }

  return newArray;
};

const consequence = array.myFilter((num) => num > 3);
console.log(consequence); // [6, 9]

Enter fullscreen mode

Exit fullscreen mode

What’s Array.prototype?

The JavaScript array prototype constructor is used to permit so as to add new strategies and properties to the Array() object.

Thanks for studying…

Add a Comment

Your email address will not be published. Required fields are marked *