Custom ES6 Array Methods in JavaScript

Perfection is achieved not when there is nothing more to add, but rather when there is nothing more to take away.

JavaScript is now the most popular and most interesting language in 21st century with lots of amazing libraries and frameworks. Majority of JavaScript engineers are familiar with standards like ES5 , ES6 etc. We daily encounter various problems in which we use various ES6 Array methods like map, filter, reduce etc.

These are really awesome smart methods to perform operations on the arrays in JavaScript. But as an engineer we should always have the knowledge and understanding how things work under the hood when we use these array methods.

Therefor, best way to understand them is to build these methods from scratch. In this article, we will build our own custom ES6 Array methods. After that, you will have a clear understanding how these methods work behind the curtain.

Lets understand everything step by step.

Step 01: Create Handler function

Handler function will act as the main function where all our business logic will go. Let's create a very simple function that just print some message and assign its reference to a variable

const es6Magic = function doES6Magic(){
        console.log('Hurrah ! ES6 Custom Array Method')
}

Step 2: Add Handler to Array Prototype

Everything in JavaScript is inherited from the Prototype. What we target and access is basically driven through the prototypes. Think of Prototype as a the top layer and everything comes under that layer that basically access the properties from that layer. So in order to access our own custom ES6 Array Method, we must have to add it to the Array Prototype.

Array.prototype.magic = es6magic

Step 3: Test & Run it

Now we are done with everything. Let's just test it.

const numbers = [1,2,3,4, 5];
numbers.magic();   // log 'Hurrah ! ES6 Custom Array Method'`

Now, we are done with the basic overview of how ES6 Array methods works under the hood. Now, Lets jump to another real time example.

Factorial Array Method

Lets build a ES6 Array method that will help us to calculate & return the factorial of each element in array.

Step 1: Create a Handler function

const es6Factorial = function doES6Factorial(callback){

    /* Business logic behind factorial */
    function factorial(number){
        if (number > 0) return number * factorial(number - 1);
        return number < 0 ? -1 : 1;
    }
    return this.map((item) => callback(factorial(item)));
}

• this here refers to the target array

Step 2: Assign custom ES6 to Array.prototype

Array.prototype.factorial = es6Factorial;

Step 03:

Step 3: Test custom ES6 Array Method

const numbers = [1,2,3,4, 5];
numbers.factorial(element => console.log(element)); 
// 1, 4, 6, 24 , 120

I hope you enjoyed this article. Please share & thumbs up if it is really helpful for JavaScript Engineers.

Cheers :)