ES6 for beginners - Part 5 (Array Helper Methods)
Tags: javascript, tutorial, webdev, beginners
Published: 2019-06-07 14:56:13

---
title: ES6 for beginners - Part 5 (Array Helper Methods)
published: true
description: 
tags: javascript, tutorial, webdev, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dvbio7pgoh5l6epaoryp.png
canonical_url: https://www.2n.pl/blog/es6-part-5
---
*This is the fifth part of ES6 tutorial, created by our dev Bartosz. All of the previous parts you can find [here](https://www.2n.pl/blog) :).*

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.

![](https://thepracticaldev.s3.amazonaws.com/i/eiqjmylga10if1io67v0.png)

![](https://www.2n.pl/ckeditor_assets/pictures/95/content_es6-1.png)

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**.

![](https://thepracticaldev.s3.amazonaws.com/i/ae2zt25pl06f9ykuiaky.png)

![](https://www.2n.pl/ckeditor_assets/pictures/96/content_es6-2.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/u0pe174x39vyxsfrxd80.png)

![](https://www.2n.pl/ckeditor_assets/pictures/97/content_es6-3.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/gb5tyrmeurqa2cz29ohh.png)

![](https://www.2n.pl/ckeditor_assets/pictures/98/content_es6-4.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/thijr7utramrc2ce1651.png)

![](https://www.2n.pl/ckeditor_assets/pictures/99/content_es6-5.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/s1a6axir8xr2tmjbpjxv.png)

##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).

![](https://thepracticaldev.s3.amazonaws.com/i/9d8hymk6flyqo21v21l8.png)

![](https://www.2n.pl/ckeditor_assets/pictures/100/content_es6-6.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/2uxyuai6lr4yjkvk491e.png)

![](https://www.2n.pl/ckeditor_assets/pictures/101/content_es6-7.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/k3jqh6tetab4waysdrmj.png)

![](https://www.2n.pl/ckeditor_assets/pictures/102/content_es6-8.png)

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. :)