For Loop and es6 forEach() array helper

When writing I tend to make it as simple as it gets or as simple as I get things so a newbie can pick the article if it gets to be seen and understand in simple tense. For loop is a block of code that tends to execute itself repeatedly based on certain set conditions.

Advancement in scripting language brought about the need for how to reduce how code is written. For loop to me has its flaws although we must say it has served developers in times past and still doing a good job.

In passing, I must point out briefly that loops in JavaScript have gone beyond the level of for loops alone but once you grasp the concept of for loop you can easily understand how other looping methods work. Below are looping methods and a short explanation:

• for/in - loops through the properties of an object
• for/of - loops through the values of an iterable object
• while - loops through a block of code while a specified condition is true
• do/while - also loops through a block of code while a specified condition is true

Let’s take a look at the below classical for loop code in its basic form to better explain.

var colors = [‘red’, ‘purple’, ‘khaki’];
for (var i = 0; i < colors.lenght; i++) {
 console.log(colors[i]);
}

If you run the above code, you tend to get an error. Why is that? One of the major reasons I feel for loop has its shortcoming. You tend to run into syntax errors that are hard to debug. Take, for example, the above code, which first takes a colors variable. The colors variable has an array of colors. 3of them in our array. The logic we wrote for our for()loop was to iterate over each color in the array comparing its position in the array to 0 and print the result in our browser console.

Step 1: Here we are actually initializing i, this is just like creating the variable I

var i = 0;

Step 2:we compare the length of I which initially starts from 0 to the position of the elements in the array. Knowing that element in an array starts from 0

 i < colors.length; 

It then prints the result to our console immediately then moves to increase i by 1 where we wrote i++; which is the same as simply writing

i = i + 1;

If the conditions pass and by the condition, I mean i < colors.length then it console.log the result and moves until it iterates over all three colors.

The correct code in the above is here:

var colors = [‘red’, ‘purple’, ‘khaki’];
for (var i = 0; i < colors.length; i++) {
 console.log(colors[i]);
}

If we compare the two code block examples, you’d see there is a misplacement of h before t in length. Imagine trying to figure out why your code just won’t run by giving you a result. There are times when a simple semi-colon missing in your for() loop will leave you wondering why it's going all wrong when really, its just a syntax error, and as humans we can’t but not make mistakes once in a while. That is why I think forEach() is better off.

The forEach() is an array helper method built into the array object in JavaScript. Just like we have other methods such as filter(), find(), map(), every(), some(), and reduce(). These methods which I will cover in subsequent articles are useful in modern-day applications development although usage varies while some are frequently used in application development. Since most applications surely deal with data collection thus, these helpers are to the rescue.

Why should I use forEach() method instead of the good old for() loop? well, consider the below code just as the same logic for the above for loop.

var colors = [‘red’, ‘purple’, ‘khaki’];
colors.forEach(function(color) {
 console.log(color);
})

RESULTS BELOW

red
purple
khaki
red
purple
khaki

Same result as the for() loop but with fewer codes and likely to not make mistake in syntax. Writing fewer codes is a good thing for maintenance or when an app gets complex. it’s easier for the guest to the code to simply understand and wrap the head around. So, what exactly did we do in the above forEach() code?

STEPS

Step 1: We created a variable called colors who then changed status on getting married and married to “red”. With a child named “purple” and a dog named “khaki”.

Step 2: We needed a headcount in the family and the faster way was to call on the smart dude called forEach() who then called the family and addressed them in plural colors.forEach() as the name sounds. so, forEach() element in the array, let us pass an iteration function which has an internal argument to which forEach() calls in our case ‘color’ which is their family name. So, forEach calls on them one at a time and they respond with “Present sir!” and after each check forEach() checks and finds oh… 3 of you in this family and do another count again just to be sure if figures will match and yes! they do match.

So, we might think of it to say in fewer lines of code, we did a loop over elements in an array which is also less tasking understand. Behind the scene, it runs this code for us

for (var i = 0; i < colors.length; i++) {}

We don’t need to bother so far we give it the right argument. Less logic for a bounce on the array. So, when might you need a forEach() method? Well, when you want to call some method multiple times, passing it an argument different times too then, forEach() to the rescue. Well, this article is not to say for() loop is not good or does not serve its purpose but just to show my side of the argument of going for a forEach() anytime I need to iterate over an array.

THE END