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