Custom Implementation or Polyfills for Array Methods in JavaScript

Part 1: Custom Implementation of map(), reduce(), and filter() methods in JavaScript.

Polyfills in JavaScript

Hi guys, today I am going to show you the implementation or we call it the Polyfills (custom implementation) of the 3 widely-used and famous array methods.

This is something that an interviewer can ask you to write about the behind-the-scenes implementation of these methods (map, reduce, filter). These functions are written every time for a new copy of an array so it won't mutate your actual array.

Photo by AltumCode on Unsplash

1. map()

• map() is a method that accepts a callback function that executes for every element of the array. In simpler terms, it is used for manipulating/transforming the elements present inside that array.
• It returns a new array (which means it won't mutate or change your actual array).
• The array coming out of the map is a transformed array which may or may not be identical to the actual array.

Custom implementation

Custom map implementation

This custom implementation of map() will return the transformed array.

Why do we need to attach its prototype?

As the array is just like an object and it has some built-in methods. To override or write our custom methods and make them available to the array class, it needs to attach to the prototypal chain which will do the inheritance in JavaScript. So to make available any custom method for array or objects, you need to call your methods on its prototypal chain.

2. reduce()

• reduce() is the method that accepts a callback function called a reducer.
• It is called on every element of the array which accumulates to a single value at last.

The callbackFunc(reducer) contains the following arguments:

1. previousValue: The value which we got from the last function call. On the first call, it will return ‘ initialValue ’ if given, otherwise, it will return the value of** arr[0].**
2. currentValue : The value of the current element. On the first call, if initialValue is given, then it returns the value of arr[0], otherwise, the value of arr[1] is returned.
3. currentIndex : The current index of the element. If initialValue is given, it must be 0 otherwise it should start from index 1.
4. array : The array used for traversal.

Use cases:

1. Without initial value
2. With initial value

Custom implementation of Reduce()

3. filter()

• filter() method accepts a callback, that executes for every item of the given array.
• Same as above — it returns a new array.
• It will return the filtered truthy value.

Custom implementation of the filter() function.

This is how the custom implementation of a few array methods works and a good starting point where you can learn how JavaScript, under the hood, creates its inbuilt method implementation and how it works.

You can create your own Polyfills or custom methods like this and attach it to the prototype chain to make it available to the reference or abstract class used inside the JavaScript environment.

Hope you liked it, please clap, subscribe and share and also save it for future reference. :)

Thanks