The first phase of my coding boot camp was a doozy. I learned early and fast that documentation is my best friend as a newbie developer (and I do suspect we will grow old together). I looked at my google search history and I found I was a frequent flier on all the array iterator MDN pages. They were SO helpful, but more than once I found myself building functions to do exactly what they do. On top of their functionality, I had to get better at recognizing when to use which one and more specifically, when not to use forEach().
forEach()
Like I implied, forEach() was my catch-all. It was the enabler to my "I want to take the ugly long way, and maybe not even get where I'm going" habit. Don't get me wrong, once I stopped abusing our friendship forEach() and I got on great. It is particularly useful when you want to perform an action on each element of an array, but you don't need to return a new array or you want to update the elements of the original array.
Here is an example:
You can see the original array was destructively updated.
Something to note is that the return value of forEach() is undefined. Therefore, in the example above, had we saved it to a newArray variable, the value of that new variable would be undefined.
If you find yourself returning a value in your forEach(), it can be a helpful clue to another method you can use to do some work for you and make your code a little cleaner and more expressive.
.map()
If you are returning an array in your forEach(), you may be better off using map().
The map() array iterator applies a function to each element of an array and returns a new array with the results. The original array is not modified.
A critical step I missed in the beginning (as in, two weeks ago- I've grown so much) was the necessity of saving the .map() to a variable to use later. Like this:
Applying map() returns the new array and assigning it to a variable lets you use it later on. If you didn't save it to a variable, did you even map()?
.find()
Next, if your forEach() has an if statement that returns the item try using find().
find() returns the value of the first element in the array that passes the test implemented by the provided function. If no element passes the test, it returns undefined.
You can also use find() when you want to find an element in an array based on its properties. For example, the following code uses find() to find the first user in an array of users with a certain name:
In general, you should use the find() array iterator when you want to find the first element in an array that satisfies a certain condition, and you only need to return the value of that element.
.filter()
If your forEach() contains an if statement that pushes the element to a new array, you've done a lot of work but you could have used filter() instead.
filter() creates a new array with all the elements that pass the test implemented by the provided function. If no element passes the test, it returns an empty array.
You can also use the filter() array iterator when you want to filter an array based on the properties of its elements. For example, the following code uses filter() to get all the users from an array of users who are over 30 years old:
.reduce()
The last method we'll look at (there are more), is reduce(). If your forEach is returning the sum or product of an array, this method is for you.
The reduce() array iterator executes a reducer function (that you provide) on each element of the array, resulting in a single output value. The reducer function takes four arguments. The first argument is the accumulator, which "accumulates" all the return values after the reducer function is invoked. The second argument is the current value you are working with and the last two arguments are optional (the current index and the array).
Top comments (0)