The thing about ES6 is that it’s great changes but there is so many of them so I decided to take one day to understand them. So the first one is the for Each method.
You might be thinking why would I want to learn the forEach method when I can do the same thing with a for loop. And I couldn’t say that you are wrong, because you aren’t. You could do the same thing with a for loop but let’s see why you might want to stop using a for loop and use a for each instead.
In our example we want to console.log all the items in our array.
var colors = [‘red’, ‘blue’, ‘green’, ‘yellow’, ‘orange’, ‘violet’, ‘lavender’];
Past For Loop Way:
for (var i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
There is nothing wrong with a for loop but there are places where we could make mistakes especially as beginners.
- If we don’t start our counter at 0 we won’t get the first item.
- If we use i <=colors.length it will give us an error or undefined or some random item because our array doesn’t have an assigned value for this index.
- If we forget to increment or we increment incorrectly then some of our colors might not be displayed.
Which is why the for each method was made. The for each method will iterate through each item in our array starting at the beginning and go all the way to the end.
Present forEach():
colors.forEach(function(color) {
console.log(color);
});
We no longer need the starting counter, the length of the array or the increment/decrement portion, this is all done automatically for us.
How does it work:
forEach is the method and we are passing in a anonymous function. The function gets called once for each item in the array.
Anything can be inside the function, anything that we want to do to the data in the array.
Example:
Another use of this is if we have an array of numbers and I want to sum up all the values of the numbers in the array.
//Create an array of numbers
var numbers = [1, 2, 3, 4, 5, 6];
//Create a variable to hold the sum
var sum = 0;
//Loop over the array, incrementing the sum variable
numbers.forEach(function(num) {
sum += num;
});
//Print the sum variable
console.log(sum);
We don’t have to pass in an anonymous function into forEach, we could declare the function outside and just call it with forEach.
For example:
//Create an array of numbers
var numbers = [1, 2, 3, 4, 5, 6];
//Create a variable to hold the sum
var sum = 0;
//Declare the function
function adder(number) {
sum += number;
}
//Loop over the array, incrementing the sum variable
numbers.forEach(function(adder);
//Print the sum variable
console.log(sum);
Note we didn’t do adder() and that is because with the () it will run the function immediately and then we will have the value assigned to forEach instead of it iterating through all the elements of the array. It basically tells it that we want to run this in the future.
Conclusion
I tried to make this as easy as I could to help you understand the benefits of the forEach method. It makes it less likely to make human errors.
Claudia Maciel 