Naive Implementation of JS Array Methods

In this article I will show how we can implement the following Array methods
forEach, map, filter, find and reduce by extend the Array.prototype
just like polyfill

Polyfill

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

This is naive implementation so we will not check validity of given parameters

forEach

The forEach() method executes a provided function once for each array element.

Step 1:

Extend the Array prototype with a new method myForEach if it not exist yet.

Array.prototype.myForEach = Array.prototype.myForEach || 
function (callback, initialValue) {};

Step 2:

Iterate on each item in the array and execute the callback function
- this[index] = current array item
- index = the current iteration index
- this = the given array

for (let index = 0; index < this.length; index++) {
    callback(this[index], index, this)
}

map

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Step 1:

Extend the Array prototype with a new method myMap if it not exist yet.

Array.prototype.myMap = Array.prototype.myMap || 
function (callback, initialValue) {};

Step 2:

Create an empty newArray in order to populate it with the return callback value.

let newArray = [];

Step 3:

Iterate on each item in the array and execute the callback function and push the return value in the newArray
- this[index] = current array item
- index = the current iteration index
- this = the given array

for (let index = 0; i < this.length; index++) {
    newArray.push(transformCallback(this[index], index, this));
}

Step 4:

Return the newArray with the map result

return newArray;

filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Step 1:

Extend the Array prototype with a new method myFilter if it not exist yet.

Array.prototype.myFilter = Array.prototype.myFilter || 
function (callback, initialValue) {};

Step 2:

Create an empty newArray in order to populate it with the return callback value.

let newArray = [];

Step 3:

Iterate on each item in the array and execute the callback function
in case callback return true we populate the newArray with the current item.

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

Step 4:

Return the newArray with the filtered items

return newArray;

find

The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

Step 1:

Extend the Array prototype with a new method myFind if it not exist yet.

Array.prototype.myFind = Array.prototype.myFind || 
function (callback, initialValue) {};

Step 2:

declare findItem. in case item will not found it be undefined

let findItem;

Step 3:

Iterate on each item in the array and execute the callback function
in case callback return true we set the findItem with the current item and stop the iteration.

for (let index = 0; index < this.length; index++) {
    if (callback(this[index], index, this)) {
        findItem = this[index];
        break;
    }
}

Step 4:

Return the findItem

return findItem;

reduce

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

Naive implementation of the Array reduce method

Step 1:

Extend the Array prototype with a new method myReduce if it not exist yet.

Array.prototype.myReduce = Array.prototype.myReduce 
|| function (callback, initialValue) {};

Step 2:

Prepare the accumulator and firstIndex
Case 1: we get only the callback param (arguments.length === 1)
in this case we know initialValue is not pass and we set the accumulator to be with the first item of the array and set firstIndex to be 1
Case 2: we get both callback and initialValue
in this case we set the accumulator to initialValue and firstIndex to be 0

if (arguments.length === 1) {
    accumulator = this[0];
    firstIndex = 1;
} else {
    accumulator = initialValue;
    firstIndex = 0;
}

Step 3:

Iterate on each item in the array
(depend on what we set for the firstIndex 0 or 1)
and each time we keep the new accumulator

for (let index = firstIndex; index < this.length; index++) {
    accumulator = callback(accumulator, this[index], index);
}

Step 4:

Return the accumulator

Link to all examples