Custom ES6 Array Methods in JavaScript
Published: 2021-12-29 07:11:27

> 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 custom functions according to your requirements. Lets say, we want to build a very simple Array method that will print only some welcome message and assign that function to a JavaScript variable.

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


## Step 2: Add in 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.

`Step 2: Assign custom ES6 to Array.prototype`
```
Array.prototype.magic = es6Magic;
```

## Step 3: Test & Run it
Now we created our custom ES6 Array method and assign that to Array Prototype. Now its time to test it. Lets take the following example to test it.

`Step 3: Test custom ES6 Array Method`

```
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 its time to create a real time example.

Lets build a ES6 Array methods that will help us to return the factorial of each element in array. Follow the same steps to develop it.

## Step 01

`Step 1: required ES6 Custom Array Method`

```
/* Step 1: required ES6 Custom Array Method */
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;
	}

	/* callback to get the factorial number for each number */
	/* Note: this is equal to the array with which we call */
	/* Therefor (this == arr) assuming arr is our array */
	return this.map((item) => callback(factorial(item)));
}
```

## Step 02

```
/* 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 :)