Javascript for() {} Loop - Simplified

The for loop creates a loop where executions are executed as long as the given condition remains true.

There are other methods of loops which you can find here.
I chose to explain the for-loop because it pretty much describes how a loop operation is carried out. There are complex implementations of a for-loop though.

for loop

The syntax is

for(initialization; condition; final-expression) {
   // statement
}

The arguments are separated by a semi-colon.
The initialization is an expression or variable that is evaluated before the loop begins. Usually, it is used as a counter variable.
The condition is an expression that is evaluated before each iteration. Iterations are only carried out as long as the condition remains true, i.e the expression evaluates to true.
The final-expression is the last expression to be carried out before the next iteration.
The statements are to be evaluated as long as the condition remains true.

A simple typical example of this is;

function example() {
    let a = 3;
    let sum = 0;
    for(let i = 0; i < a; i++) {
        sum += 1;
    }
    return sum;
}
example();
//expected output - 3

Let's analyze this program, shall we? 😃

I placed the for loop in a function so that the codes there are only executed when the function is called - the example function.

What our program (or rather, the function) simply does is to set the variable a to 5 and sum to 0. It also contains a for loop operation.
The for...loop operation initializes a variable i to 0, states a condition that the statements of the loop should only be executed while the i variable is less than the a variable, states a final-expression that after each operation, increase the i variable by 1 (i++) and also leaves a statement to be executed which is incrementing the sum by 1.

While i is less than a, the sum keeps increasing by 1.

First Iteration

Variable i is initialized to 0.
( Is i less than a ? )
( Yes it is 😊, 0 is less than 3, therefore, the condition returns true )
sum += 1 implies sum = sum + 1. sum is therefore = 0 + 1.
sum = 1
According to the final-expression, variable i is incremented by 1. i now becomes 0 + 1 = 1

Second Iteration

( i is 1 now )
( Yes it is 😊, 1 is less than 3, therefore, the condition returns true )
sum+=1 - sum = 2
i++ - i = 2

Third Iteration

( i is 2 now )
( Yes it is 😊, 2 is less than 3, therefore, the condition returns true )
sum+=1 - sum = 3
i++ - i = 3

Fourth Iteration

( i is 3 now )
( No it isn't ☹️, 3 is not less than 3, it is rather, equal to 3, therefore, the condition returns false )
( As a result, our loop doesn't carry out any operations again and our final-expression is never executed also )

Our function then returns the value of sum which is 3.

for...loop can be implemented in many other scenarios too.
e.g looping through an array, through objects, executing a function while a condition is true.

Let's try to loop through an array 🤗

Our aim here is to log the elements of an array to the console.

let x = ['Dillion', 45, 'Megida'];
console.log(x);
// expected output - ["Dillion", 45, "Megida"]

let currentElement;
// But we need the elements instead 🤔
for(let arrIndex = 0; arrIndex < x.length; arrIndex++) {
    currentElement = x[arrIndex];
    console.log(currentElement);
}

// At console, we have
// Dillion
// 45
// Megida

Analysis 🙂

We have our array attached to the variable x.
And we can see the results of logging x to the console.
But, our aim was to get the individual elements.
So we decided to loop through the array and further carry out some statements.

A currentElement variable was declared which would determine the current element of the array we are on.

Every element of an array possesses an index as we all know, and the index starts from 0 which is possessed by the first element.

An arrIndex was declared and initialized to 0.
The condition given is that arrIndex should always be lesser than the length of our array since the index of the last element is length of array - 1.
And a final-expression is given to at the end of every iteration, increment the arrIndex variable by 1.

First Iteration

arrIndex initialized to 0.
( is arrIndex < x.length ? )
( yes it is, 0 is < 3, condition returns true)
currentElement is evaluated to the element at the current index of the array, which is Dillion.
Dillion is logged to console.
arrIndex is incremented by 1. arrIndex is now 1.

Second Iteration
arrIndex is now 1.
( is arrIndex < x.length ? )
( yes it is, 1 is < 3, condition returns true)
currentElement is now 45
45 is logged to console.
arrIndex is now 2.

Third Iteration
arrIndex is now 2.
( is arrIndex < x.length ? )
( yes it is, 2 is < 3, condition returns true)
currentElement is now Megida
Megida is logged to console.
arrIndex is now 3.

Fourth Iteration
arrIndex is now 3.
( is arrIndex < x.length ? )
( No it isn't, 3 is = 3, condition returns false)
currentElement is not evaluated.
Nothing is logged to console.
arrIndex is never evaluated.

So there you have it, all elements logged to console 🎉

As I said, there are many other implementations of for loops.

I hope you have gotten a better understanding of loops and also, for loops.

Helpful Article - for statement

Thanks for reading. 😀

Kindly comment your reviews

Comments

[Vlastimil Pospichal]

let x = ['Dillion', 45, 'Megida'];
for (currentElement of x) {
    console.log(currentElement);
}

[Dillion Megida]

This is right, for...of loop 👏