JavaScript For loops

For years, JavaScript was seen by so many developers as the programming language for learners and amateurs. JavaScript’s architecture, total structure, and total simple look and feel made professional developers write it off. But then AJAX was introduced and used by google for their gmail and google maps applications, it suddenly became clear that JavaScript still had some potential.

The age of JavaScript is now upon us. From its humble beginnings as a client-side scripting language, not only has it become completely ubiquitous on the client side, but its use as a server-side language has finally taken off too thanks to Nodejs. Then its powerful impacts on other fields like robotics and artificial intelligence. It has had many frameworks that have been built on it.

These frameworks are being used for various things across the tech space, But using these frameworks effectively and efficiently depends on a simple rule. “Understand JavaScript!!”. There is this school of thought that I believe in which states that

“If you can not understand the source code of your favorite frameworks, then you don’t know js(pun intended)”.

This article intends to shed a bit more light on using For loops and the various types of for loops. Maybe it could help bring us further to understanding how these basic tricks work in the language.

image explanation

The for loop lets you step through, or traverse, a number of items quickly and easily. They come in pretty handy when you want to run a code over and over again expecting different results after each iteration. so instead of having

data += car[0] + “<hr>”;
 
data += car[1] + “<hr>”;
 
data += car[2] + “<hr>”;
data += car[3] + “<hr>”;

you can just write

for(i=0; i<car.lenght; i++){
 data += cars[i]+ “<hr>”;
 }

which is much simpler, compact and precise.

There are different types of for loops. The example shown above is the classical for loop. As time went by, and as JavaScript grew, it came to have other ways to effectively use the for loop.

Classical for loop.

This is pretty much the most popular for loop and is made up of four statements and has the following structure:

for ([ initialize ]; [ condition ]; [ iteration ]){
 [ Body ]
 };

The initialization statement is executed only before the loop starts. It enables you declare variables.
The conditional statement is executed before each iteration, and its return value decides whether or not the loop is to continue. If the conditional statement evaluates to a falsey value then the loop stops.
The iteration statement is executed at the end of each iteration and enables you change the state of variables. Typically, this will involve to increase or decrease a counter and thus bringing the loop closer to its end.

The Body statement is what runs on every iteration. It can contain any form of code you want.

Here’s an example:

for ( var i = 0; i < 100 ; i ++) {
//This block executes 100 times.
console.log( ‘current number is’ + i );
};

for/in

The for-in loop is designed for iterating over an objects properties, like so:

var obj = {a:1,b:2};
for (let prop in obj) {
console.log(prop);
}
// a
// b

It also somewhat works with arrays but whenever we need to print out typeOf, the variable always gives out a string. Using for-in with arrays converts the index to a string.

for/each

This is used to loop over arrays like so:

let arr = [1,2,3];
arr.forEach(function (value) {
console.log(value);
});
// 1
// 2
// 3

Its shorter and more compact than using the classical for loop but has some downsides to it. For one, You can’t break out of this loop using a break statement or move to the next iteration with continue. You can’t also return from the enclosing function using a return statement.

for/of

Es6 brought about this kind of loop to address some issues of the for-in loop rather than change the way the for-in loops work and in the process create a breaking change. it is used as so;

let arr = [10,20,30];
for (var value of arr) {
console.log(value);
}
// 10
// 20
// 30

This is the most concise way of looping through array elements. It avoids all the pitfalls of for–in. It works with break, continue, and return. It also works on most array-like objects including the new Set and Map types.

Thank You. Comments, corrections and contributions are greatly appreciated.