Cycles allow you to perform some action many times, depending on certain conditions. JavaScript has the following types of loops:
- for
- for..in
- for..of
- while
- do..while
for loop
The for loop has the following formal definition:
for ([counter initialization]; [condition]; [counter change]){
// actions
}
For example, let’s use a for loop to iterate over numbers from 0 to 4:
for(let i = 0; i< 5; i++){
console log(i);
}
console.log("End of work");
The first part of the loop declaration – let i = 0- creates and initializes the counter-variable i. And before the loop is executed, its value will be equal to 0. In fact, this is the same as declaring a variable.
The second part is the condition under which the loop will be executed: i< 5. In this case, the loop will run until the value of i reaches 5.
The third part is i++the increment of the counter by one.
That is, at startup, the variable I is equal to 0. This value meets the condition i< 5, so the loop block will be executed, namely the line of code
console log(i);
After the loop block is executed, the third part of the loop declaration is executed – the counter increment. That is, the variable i becomes equal to 1. This value also meets the condition, so the loop block is executed again. Thus, the loop block will run 5 times until the value of i becomes equal to 5. This value does NOT meet the condition, so the loop exits. And program control will go to the instructions that come after the loop block. Console output of the program: Each individual iteration of the loop is called an iteration. Thus, in this case, 5 iterations will work. In this case, it is not necessary to increase the counter by one, you can perform other actions with it, for example, decrease it by one:
for ( let i = 10; i > 5; i--){
console.log(i);
}
In this case, numbers from 10 to 6 are displayed on the console.
Or increment the counter by 2:
for(let i = 0; i < 10; i+=2){
console.log(i);
}
This outputs to the console all even numbers from 0 to 8
In this case, you can omit various parts of the loop declaration:
let i = 0;
for(; i < 60;){
console.log(i);
i = i + 10;
}
In this case, the variable i is defined outside the loop. There is only a condition in the loop declaration itself, the other two parts are missing. The change of the variable occurs in the loop block itself: it increases by 10. As a result, the numbers 0, 10, 20, 30, 40, 50 will be displayed on the console.
Applying Multiple Counters in a Loop
If necessary, you can use several counters:
for(let i = 1, j=1; i < 5, j < 4; i++, j++){
console.log(i + j);
}
// 1 iteration: i=1, j=1; i + j = 2
// 2 iteration: i=2, j=2; i + j = 4
// 3 iteration: i=3, j=3; i + j = 6
It now uses two counters and two conditions. Let’s take a look at what’s going on here:
First iteration. Initial values of variables i and y:
i=1, j=1;
Each variable has its own conditions. And first, the initial values of the variables meet these conditions:
i < 5, j < 4;
The loop block displays the sum of these variables. And then the values of both variables increase by one. They become equal
i=2, j=2;
These values also match the conditions, so a second iteration is performed
Second iteration. Values of variables i and y:
i=2, j=2;
After the loop block is executed, the values of both variables are incremented by one. They become equal
i=3, j=3;
These values also match the conditions, so the third iteration is performed
Third iteration. Values of variables i and y:
i=3, j=3;
After the loop block is executed, the values of both variables are incremented by one. They become equal
i=4, j=4;
The value of the variable I matches the condition i < 5, but the value of the variable j (4) does NOT match the condition j < 4. So the loop exits. His work is completed.
Nested Loops
Some cycles can contain others inside themselves:
for(let i=1; i <= 5; i++){
for(let j = 1; j <=5; j++){
console.log(i * j);
}
}
Here one cycle includes another. The variable i is defined in the outer loop. It is initially 1 and this value matches the loop condition ( i <=5), so the loop block that contains the inner loop will be executed.
The inner loop defines a counter variable j, which is initially equal to 1, and then the inner loop performs 5 iterations until the variable j becomes equal to 5.
After the block of the outer loop is completed, the variable i is incremented by 1 and becomes equal to 2, which again matches the condition. And the outer loop block is executed again. In this block, five iterations of the inner loop are again performed. And so on. As a result, the inner loop will be executed 25 times.
while loop
The while loop is executed as long as some condition is true. Its formal definition is:
while(condition){
// action
}
Again, print the numbers from 1 to 5 using while :
let i = 1;
while(i <=5){
console.log(i);
i++;
}
The while loop here will run until the value of i becomes 6.
do..while
In a do loop, the loop code is executed first, and then the condition in the while statement is checked. And while this condition is true, the cycle repeats. For example:
one
2
3
four
5
let i = 1;
do{
console.log(i);
i++;
}while(i <= 5)
Here, the loop code will run 5 times until i become 5. In this case, the do loop guarantees that the actions will be performed at least once, even if the condition in the while statement is not true.
continue and break statements
Sometimes it is necessary to exit a loop before it completes. In this case, we can use the break statement :
1
2
3
4
5
6
for(let i=1; i <= 10; i++){
if(i===6) break;
console.log(i);
}
console.log("End of work");
This loop increases the variable I c 1 up to 10 including, that is, according to the condition of the loop, the loop block must be executed 10 times, that is, 10 iterations must be performed. However, since verification occurs in the loop block if(i===6) breaks;, when the value of the variable i reaches 6, this condition will interrupt the loop execution using the break statement. And the cycle ends.
End of work
If we just want to skip the iteration but not exit the loop, we can use the continue statement :
for(let i=1; i <= 10; i++){
if(i===6) continue;
console.log(i);
}
console.log("End of work");
In this case, when the value of the variable i becomes equal to 6, then in the loop the construction if(i===6) continues will complete the current iteration, the following instructions of the loop will not be executed, and the transition to the next iteration will occur:
1
2
3
4
5
7
8
9
10
End of work
for..in
The for..in the loop is primarily for iterating over objects. Its formal definition is:
for (property in object) {
// actions
}
This loop iterates through all the properties of the object. For example:
const person = {name: "Tom", age: 37};
for(prop in person){
console.log(prop);
}
It iterates over the person object, which has two properties, name, and age. Accordingly, on the console we will see:
name
age
for…of loop
The for…of the loop is designed to iterate over data sets. For example, a string actually represents a set of characters. And we can iterate over it with this loop:
const website = "easywptutorials.com";
for(ch of website){
console.log(ch);
}
Finally, the loop iterates through all the characters in the website string and puts each current character into a variable whose value is then printed to the console.
e
a
s
y
w
p
t
u
t
o
r
i
a
l
s
.
c
o
m
Another example would be iterating over an array:
const people = ["Tom", "Sam", "Bob"];
for(const person of people) {
console.log(person);
}
In this case, the loop iterates over the elements of the people array. Each element is sequentially placed in a constant person. And then we can print its value to the console:
Tom
Sam
Bob