What's The Difference Between .forEach(), .map(), and .filter()?

In JavaScript, there are many built in methods that help us interact with the data we are working with. Here, we are going to take a look at three different methods that interact with arrays: .forEach(), .map(), and .filter(). First of all, we need to make sure we understand what an array in JavaScript is. An array is basically a list of data that is usually stored inside of a single variable. Below you can see an example of an array.

let states = ["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

console.log(states)
["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

How do These Methods Actually Interact with an Array?

All 3 of these methods are used to iterate over an array. By this I mean that all of these methods all go through the entire array and interact with each individual item/element in some way. The way in which they interact depends on the function that is called along with the method that is used. This is the main thing they all have in common.

How does .forEach() Work?

Let's start by looking at how this method looks in a line of code below.

states.forEach(state => {console.log(state.toUpperCase())})
ILLINOIS
NEW YORK
CALIFORNIA
MINNESOTA
WASHINGTON
MAINE

console.log(states)
["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

So above you can see that we start with the array we want to iterate over (states), followed by the method we are using (.forEach()), then we have the temporary variable name we are using that each element of the list will briefly be called (state), and we end it with the function that we are applying to each item in the list (console.log(state.toUpperCase())). In this example we are simply just making each element of the list all uppercase and console logging it so we can see what that looks like. As you can see, every element of the list was made uppercase, but only for that brief moment. The interesting thing about .forEach() is that it does not return anything nor does it destructively modify our original list. So if we wanted to make any permanent changes, we would have had to make an empty array and then use something like .push() to add those new elements to the new list. So we can make it work, but we can also use something like .map() to do this more efficiently.

What About .map()?

.map() works very similarly to .forEach(). With .map() it will still leave the original array the same, but it will actually create a new array with the modified data specified by the function that is put in.

let statesUpper = states.map(state => {return state.toUpperCase()})
["ILLINOIS", "NEW YORK", "CALIFORNIA", "MINNESOTA", "WASHINGTON", "MAINE"]

console.log(states)
["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

console.log(statesUpper)
["ILLINOIS", "NEW YORK", "CALIFORNIA", "MINNESOTA", "WASHINGTON", "MAINE"]

As you can see above, with .map() we were actually able to create a new variable with all of the states being uppercase and the original list still remains the same. This is because with .map() it is actually returning something so we are able to just say we have a new variable that we would like to equal the entire process (statesUpper).

Finally, How does .filter() Work?

.filter() works more so like .map() than .forEach(). When using .filter(), you will also get a new array back without destroying the original one. The change here is that, as the name implies, depending on what function you put into the argument, this method will filter through the array and make a new one with the elements/items that satisfy the function.

let statesM = states.filter(state => {return state.includes("M")})
["Minnesota", "Maine"]

console.log(states)
["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

console.log(statesM)
["Minnesota", "Maine"]

In the example above, we used the .filter() method to iterate through our states array and looked for items that included an uppercase M. That is why we only received back an array that included Minnesota and Maine. We then used console.log to show that our original states array was not changed at all and also we now have a new variable (statesM) that is an array that contains those 2 states.

Brief Summary

Hopefully after looking at these brief examples that showed how these methods are similar, but also unique will help you in determining when to use one over the other. Sometimes when I don't fully understand the differences between things like this, the next time I would go to use one, I would purposefully use all the different ways that confuse me and compare to see what the differences are in that moment. Seeing things in a more practical setting can help!