Javascript's forEach, Map, and Filter Methods

In this blog, I will be talking about the forEach, map, and filter functions. We will create our own forEach, map, and filter function to see how these methods use the array and callback function we pass.

The forEach Method

According to the MDN Javascript documentation:

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

This means that given an array of elements, the forEach method will run the callback function on each element, one at a time. Let's create a forEach function to see how it works.

const array = ['Sally', 'Mark', 'Will']
function forEachMethod(array, callback) {
    for (let element of array) {
        callback(element)
    }
}

In the code above, our function takes in an array and a callback function. We iterate through the array and invoke the callback function, passing one element at a time as an argument to the callback. The forEach method doesn't return anything, it just invokes the callback function for each element. This method is good to use when you want to do something to each element without changing any of them.

The Map Method

According to the MDN Javascript documentation:

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

This means that the map method will return a new array with the changes done to each element by the callback function without mutating the original array. Let's create our map method function to see how it works.

const array = ['Sally', 'Mark', 'Will']
function mapMethod(array, callback) {
     //We make a copy of the array to avoid mutating the 
    //original array
    const copyArray = [...array]
    //We create a new array to add the changes for each element
    const newArray = []
    //Then we iterate through each element of the array,
    //pass in each element to the callback function
    //and add the returned value to the new array 
    for (let i = 0; i < newArray.length; i++) {
        newArray.push(callback(copyArray[i]))
    }
    //We then return the new array
    return newArray
}

In the code above, you can see how the map method handles the array. It uses the callback function you pass to it on each element of the array, making changes to the element without mutating the original array, and returning a new array with the changes done to each element. The map function is good to use when you want to change the elements in the array without changing the original array.

The Filter Method

According to the MDN Javascript documentation:

The filter() method of Array instances creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

This means that the filter method makes a copy of the array and returns a new array with the elements that passed a condition set in the callback function.

Let's create a filter function to see how it works.

const array = ['Sally', 'Mark', 'Will']
function filterMethod(array, callback) {
    //We first create a shallow copy of the array
    //to avoid mutating the original array
    let newArray = [...array]
    //We create an empty array
    let matchedElements = []
    //We then iterate through each element of the array
    for (let element of newArray) {
        //Then pass the element to the callback function
        if (callback(element)) {
            //if the callback returns true
            //we add the element to the matchedElements array
            matchedElements.push(element)
        }
    }
    //We then return all the elements that passed the condition
    //in a new array
    return matchedElements
}

In the code above, you can see how the filter function makes a shallow copy of the array, to avoid mutating the original array. Other than the forEach method, most array methods will return a new array to avoid mutating the original array. This approach is preferred so that other functions that depend on the original array can still have access to all the elements. There are other reasons why it's good practice to not mutate the original array but we'll save that for another blog. The filter function is a good method to use when you just want certain elements from an array.

To wrap this up, the forEach method iterates through each element and uses the callback function to do something with each one. The map method iterates through each element, makes a copy of the original array, and returns a new array with the changes that were made on each element. The filter function iterates through each element, makes a copy of the original array, and returns a new array with the elements that passed the condition. Thank you for reading!