Building JavaScript Array methods from Scratch

Javascript Array has several methods to manipulate its elements. These are in-built methods which when called, directly outputs the result. But to understand the concept thoroughly, we must know how these methods work internally. Therefore we will be building a few of these methods from scratch in JavaScript.

The methods that we will be focusing on are

  • map()
  • filter()
  • sort()

 

Array.prototype.map()

The map() is used to create a new array by performing some functions on each element of the old array. In the below example, we create a new array by adding the value 10 to each of the elements in array arr.

arr = [1, 5, 10, 20]
new_arr = arr.map(x => x + 10)
console.log(new_arr)

Output

[ 11, 15, 20, 30 ]

 

Overriding Prototype methods

In the below example, we have overridden map() method. We initialized it with another function that returns a string saying ‘Hello World’. Therefore the method always returns the string whenever it gets invoke.

arr = [1, 5, 10, 20]
Array.prototype.map = function(callback) {
    return 'Hello World'
}
new_arr = arr.map()
console.log(new_arr)

Output

Hello World

 

Building map() from scratch

In the below example, we have assigned a function to the map() method. It takes a callback function as an argument. We iterate through every element of the array, inside the function. We use this keyword to access the element. In the loop, we call the callback function, passing the element and index position as an argument.

arr = [1, 5, 10, 20]
Array.prototype.map = function(callback) {
    const return_array = []
    for (let i = 0; i < this.length; i++) {
        return_array[i] = callback(this[i], i);
    }
    return return_array;
}

console.log(arr.map(x => x * 10))

Output

[ 10, 50, 100, 200 ]

 

Array.prototype.filter()

The method filter() is used to create a new array by performing some conditions on the old array. In the below example, we create a new array by performing a condition to each of the elements in array arr.

arr = [1, 5, 10, 20]
new_array = arr.filter(x => x > 5)
console.log(new_array)

Output

[ 10, 20 ]

 

Building filter() from scratch

In the below example, we have assigned a function to the filter() method. It takes a callback function as an argument. We iterate through every element of the array, inside the function. We use this keyword to access the element. In the loop, we put the callback function in an if condition. If the condition is true, we push the corresponding elements into the new array. Finally, we return the array.

arr = [1, 5, 10, 20]
Array.prototype.filter = function(callback) {
    const return_array = []
    for (let i = 0; i < this.length; i++) {
        if (callback(this[i], i))
            return_array.push(this[i])
    }
    return return_array
}

console.log(arr.filter(x => x > 5))

Output

[ 10, 20 ]

 

Array.prototype.sort()

The method sort() is used to sort the elements of the array either in ascending or descending order. It takes a compare function as an argument. In the below example, we create a new array by sorting the elements of the old array.

arr = [1, 50, 20, 10]
new_array = arr.sort((curr, next) => curr - next)
console.log(new_array)

Output

[ 1, 10, 20, 50 ]

 

Building sort() from scratch

In the below example, we are redefining the sort method. The method is initialized with a function that takes a callback as an argument. Inside the function, we copy the elements of the current array to a new array called return_array. Then we perform have to perform a sorting algorithm on this array. In the end, we return the sorted array.

arr = [1, 50, 20, 10]
Array.prototype.sort = function(callback) {
    const return_array = [...this]
    for (let i = 0; i < return_array.length - 1; i++) {
        for (let j = 0; j < return_array.length - i - 1; j++) {
            if (callback(return_array[j], return_array[j + 1]) > 0) {
                const temp = return_array[j]
                return_array[j] = return_array[j + 1]
                return_array[j + 1] = temp
            }
        }
    }
    return return_array
}

console.log(arr.sort((curr, next) => curr - next))

Output

[ 1, 10, 20, 50 ]

Please post your comments, doubts, queries in the comment box. Happy Learning 🙂

Also, read

Leave a Reply

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