ES6 for beginners - Part 5 (Array Helper Methods)

This is the fifth part of ES6 tutorial, created by our dev Bartosz. All of the previous parts you can find here :).

In the past, we had to have access to external libraries to use most of these methods. They were very popular and therefore it was decided to enter the ES6 standards.
Now we have 7 Array Helper Methods available.

1. forEach
2. maps
3. filter
4. find
5. every
6. some
7. reduce

By understanding what each of them does you're going to find that you can work with data collection more easily and the vast majority of web application out there is, you guessed it right working with a collection of data. But before we start, I want to mention quite an important thing. All these methods are themed around avoiding working with a manual for a loop. The entire goal of these methods is to stay away from the for loops. Ok, enough talking, it's time for the first one, forEach.

forEach

As this is the first method, I will spend the most time with it. Considering that all methods work in a very similar way, the next ones will be discussed for a shorter time.

Let's start with the fact that for the last time we will write an ordinary and simple for loop, which will console all array values.

Of course, we got all the colors that are in the array.
Then, let's do the same, only using the news from ES6, forEach.

Ok, we received the same. This is half of the success. The other half is to understand what is really happening here, and it is not complicated.
The forEach method, which is called on an array, takes the parameter, which is the Iterator Function. The function is invoked each time when the code in the function's body is executed. Then, our Iterator Function also accepts one parameter, in our case color, which will have an equal value starting from the first, up to the last value from the array. By convention, this parameter should have a singular form of the name of our array.
Additionally, to run the code, we can create the Iterator Function elsewhere lexically at the same level and simply pass it to the forEach method. It would look like this way.

As you can see, we've passed both function statement, function expression, and arrow function.

The main thing you need to remember while using forEach method is that it mutates the array we are iterating over. What if we would like to add string "color" after each of the array's item in our case? Then we would do it by simply concatenating every variable which holds value of the color with the "color" string. Since we are not returning anything but only modify already existing array there is no need for a return statement in the forEach method.

maps

How is this method different from forEach ? Mainly that after we do it we will get a new array.

In the example above, I wanted to demonstrate two things at the same time. First of all, as you can see the way we use the map method is identical to the forEach method. Secondly, and it is more important, so I repeat, using the map method, we create a completely new array. This function is used really often when we want to keep the old version of an array. For example, if the array has some numbers and in one place we would want them to be divided by 2 and in second place we would want them to be divided by 3. By using map method we keep the old version of the array. And since we are creating new array we need to include return statement in the map method.

filter

Another method for iterating over the array. However, it is used in a strictly defined case. Let us assume that we have an array full of objects. As in the example below. Thanks to this method, we will be able to filter the results of our iteration. The main thing to remember using filter method is that it needs return statement and only conditions that are fulfilled are returned.

As you can see, we quickly and efficiently obtained data on the topic that interested us. We do not need to even use the if statements when using the filter method. In addition, we do not have to limit ourselves to one condition. If we want to add a condition that the name equals "Tom" we will do it in this way.

find

The purpose of find helper method is to look through an array. As soon as that element is found with given criteria in the array, a helper will return that record. It is really useful in a situation where we have a massive database with for example unique ids. Since ids are unique and iterating over just a part of the database is faster than everything we could use find a method to force iterating to stop when conditions are met (we found an id).

We changed a bit the array from the previous example and replaced Greg with another Mark. As you can see here, the way of using the method is identical. The only thing to keep in mind when using the find method is that when the JavaScript engine hits the first value that returns true, it will stop iterating further. So the second Mark, which is at the very end, will not be included in the returned value. Also, the entire object was returned, not as in the filter method which was an array.

every / some

As you can see, the value returned by every and some methods is boolean. For every method, the value will be true if everything matches the condition. When it comes to the some method, it is enough that one value will be matched with the condition. As you probably already figured it out, we use it to check if the conditions we check will return true.

reduce

The best way to explain reduce is an example of adding values ​​to an array. The reduce method takes two parameters. The first is the Iterator Function as in the previous examples. The second is the initial value that we can set. As you can see in the above example, we set the initial value to 100 and added all elements to it.

Finally, I would like to say one more thing. It was not hard to see that the old syntax was used to create functions. Here, I encourage everyone to try and replace everything so that everything works according to ES6 standards.

In the next post, we will find out what destructuring is so stay tuned. :)