What is and how to use the FOR loop in JavaScript

A for loop is a control structure that repeats a block of code a specified number of times. The for loop is a very common control structure in JavaScript.

The syntax of the for loop in JavaScript is as follows:

for (initialization; condition; update)
{
    // Instructions to execute in each iteration
}

• initialization is executed at the start of the loop, usually used to initialize a variable.
• condition is evaluated at the start of each iteration; if true, the code inside the loop is executed; if false, the loop is exited.
• update is executed at the end of each iteration, usually used to update the value of a variable.

Basic example

Let’s look at a simple example where a for loop is used to print the numbers from 1 to 10:

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

In this example:

• The initialization let i = 1 sets the initial value of i to 1.
• The condition i <= 10 ensures that the loop runs while i is less than or equal to 10.
• The update i++ increments i by 1 after each iteration.
• Inside the loop, we use console.log() to print the current value of i to the console.

The result is that the numbers from 1 to 10 will be displayed on the screen.

Modifying the flow of the loop

Skipping iterations with continue

The continue statement is used to skip the current iteration and proceed directly to the next iteration of the loop.

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue; // Skip even numbers
    }
    console.log(i);
}

In the example, the conditional would cause all even numbers to be skipped, so only odd numbers would be printed on the screen.

Exiting the loop with break

Using the break statement allows you to exit the loop before the condition is met. This is useful in situations where a specific value is found and further iteration is not necessary.

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;  // interrupt upon reaching 5
    }
    console.log(i);
}

In this case, the loop would execute from 0, but the conditional would interrupt it upon reaching 5. Therefore, the screen would display 0, 1, 2, 3, and 4.

Special cases

It is possible to create more “original” cases of the for loop. In general, it is not a good idea to do so. But I mention it just so that if you ever see it, you can scold someone. 😉

Using external variables

It is possible to use a variable declared outside the for loop as the control variable. However, this can lead to confusion and errors if not managed properly:

let i = 0;
for (i = 0; i < 5; i++) {
    console.log(i);
}
console.log(`Value of i after the loop: ${i}`);

In this case, i retains its value after the loop has finished, which will be 5.

Multiple declarations

In the initialization and update sections, you can include multiple declarations separated by commas. This is useful when multiple control variables are needed:

for (let i = 0, j = 10; i < j; i++, j--) {
    console.log(`i: ${i}, j: ${j}`);
}

Practical examples

Generating a multiplication table

In this example, a multiplication table for a specific number is generated using a for loop.

let number = 5; // Number for which the multiplication table is generated

for (let i = 1; i <= 10; i++) { // Iterate from 1 to 10
    console.log(`${number} x ${i} = ${number * i}`); // Prints the multiplication of the number by 'i'
}

Iterating over Arrays

One of the most common applications of the for loop is to iterate over the elements of an array. Here is an example that sums all the elements of an array:

let numbers = [1, 2, 3, 4, 5]; // Declare the array
let sum = 0; // Variable to store the sum

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i]; // Add each element of the array to 'sum'
}

console.log(`The sum of the elements is: ${sum}`);

Iterating with a different step

The value of the update does not always have to be an increment of one. It can be any expression that modifies the control variable. For example, iterating in steps of two:

for (let i = 0; i < 10; i += 2) { // Increments 'i' by 2 in each iteration
    console.log(i); // Prints the current value of 'i'
}

Decreasing for loop

The for loop can also be used to iterate in decreasing order:

for (let i = 10; i > 0; i--) { // Decrements 'i' by 1 in each iteration
    console.log(i); // Prints the current value of 'i'
}

Searching for an element in an Array

let numbers = [1, 2, 3, 4, 5]; // Declare the array
let search = 3; // Number to search for
let found = false; // Variable to indicate whether the number was found

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] === search) { // Compare each element with the searched number
        found = true; // Mark that the number was found
        break; // Exit the loop
    }
}

if (found) {
    console.log(`The number ${search} is in the array.`);
} else {
    console.log(`The number ${search} is not in the array.`);
}