What is a loop in Javascript? How do for and while loops work in Javascript?

In JavaScript, a loop (loop or cycle, or as word formation says - kolobih) is a language construct that allows executing a block of code repeatedly several times. It allows automating repetitive actions or processing lists (arrays) of data. In JavaScript, there are several types of loops. The two most common are: for and while. For Loop

The for loop is used to execute a block of code a specific number of times. It has the following syntax:

for (initialization; condition; step) {
    // block of code that repeats
}

At first glance, it is unclear what initialization, condition, and step are. In the for loop in JavaScript, initialization, condition, and step are components that help control the execution of the loop.

Initialization: This is the initial value or initial setting of the variables used in the loop. It is executed only once before the loop begins. Initialization usually includes declaring a variable and assigning an initial value. Let's consider a real example of a for loop:

for (let i = 0; i < 5; i++) {
    // block of code that repeats	
}

In this example, let i = 0 is the initialization. The variable i is created and initialized with the value 0 before the loop begins. Condition: This is the condition that is checked before each iteration of the loop. If the condition is met (evaluates to true), the block of code in the loop is executed. If the condition is not met (evaluates to false), the execution of the loop ends and the next code after the loop is executed. In our example, i < 5 is the condition. As long as i is less than 5, the loop will execute. As soon as i becomes equal to or greater than 5, the loop stops. Step: This is the operation that is performed after each iteration of the loop. It changes the value of the variable used in the loop for the next iteration. After each iteration, the variable i is incremented by 1.

Thus, initialization, condition, and step together help control the repetition of the block of code in the for loop by specifying the starting point, the continuation condition, and the changes that occur after each iteration. An example of a for loop that will print the numbers from 1 to 5 in the browser console.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

An example of using for for an array. Let's loop through an array of data (an array of cat names).

const cats = ['Hummus', 'Ball', 'Korzhik', 'Chili', 'Tom'];

for (let i = 0; i < cats.length; i++) {
    console.log('Cat: ' + cats[i]);
}

In this example, an array cats is created, containing different cats. Then the for loop is used to iterate through the elements of the array and output each cat to the browser console. The variable i is used to track the current index of the array element, and it is incremented with each iteration (i++). In the console, we will see the following:

Cat: Hummus
Cat: Ball
Cat: Korzhik
Cat: Chili
Cat: Tom

While Loop

The while loop executes a block of code as long as a certain condition is true. It has the following syntax:

while (condition) {
    // block of code that repeats
}

In this case, the condition is something more understandable. For example, this loop will output numbers from 1 to 5:

let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

In the while loop, the condition is an expression that is checked before each iteration. If the condition is true (evaluates to true), the block of code is executed. If the condition is false (evaluates to false), the execution of the loop ends. In the example, the block of code console.log(i) is executed as long as i is less than 5. The variable i is incremented by 1 after each iteration. When i becomes equal to or greater than 5, the condition becomes false, and the loop ends. The condition in the while loop plays an important role in controlling the repetition of the block of code in the loop. It is important to ensure that the condition changes during the execution of the loop to avoid an infinite loop. An infinite loop in JavaScript is a loop that never ends and continues to repeat indefinitely. Such a loop can occur when the loop condition always evaluates to true, or when the condition is not updated in such a way that the loop can be terminated.

while (true) {
  // block of code that always repeats
}

In this example, the condition true always evaluates to true, so the loop will never terminate and will repeat indefinitely. This type of loop can lead to excessive resource usage and crashes in the program (the web browser will freeze if this is a web page).

To avoid infinite loops, it is necessary to ensure that the loop condition changes in such a way that it can be executed and, when necessary, terminate the loop. For example, by using variables, controlling the execution of the loop, or using the break statement to exit the loop under certain conditions.

const cats = ['Hummus', 'Ball', 'Korzhik', 'Chili', 'Tom'];

let i = 0;
while (i < cats.length) {
    console.log('Cat: ' + cats[i]);
    i++;
}

In this example, an array cats is also created, containing different cats. The variable i is initialized at the beginning outside the loop with the value 0. Then the while loop executes as long as i is less than the length of the cats array. In each iteration of the loop, the name of the cat is output to the console, after which the value of i is incremented by 1 (i++). In the console, we will see the following:

Cat: Hummus
Cat: Ball
Cat: Korzhik
Cat: Chili
Cat: Tom