JS For Loop

JavaScript for Loops

The for loop is a very special and commonly used loop in JavaScript. The syntax might be a little bit confusing at first, but you will find yourself using them soon because they are incredibly useful and concise.

Syntax of the for Loop

Here is what the syntax looks like:

for (initialize variable; condition; statement) {
    // code to be executed
}

Between the parentheses following the for statement, there are three parts, separated by semi-colons:

1. Initialize variable: Initializes the variables that can be used in the for loop.
2. Condition: As long as this condition is true, the loop will keep on iterating. This condition gets checked after initializing the variables and before the first iteration.
3. Statement: This statement gets executed after every iteration.

The Flow of a for Loop

Here is the step-by-step flow of how JavaScript executes a for loop:

1. Initialize the variables.
2. Check the condition.
3. If the condition is true, execute the code block. If the condition is false, the loop will end here.
4. Perform the statement (the third part, for example, i++).
5. Go back to step 2.

Example 1: Basic Counting

This is a simple example that logs the numbers 0 to 9 (excluding 10) to the console:

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

It starts by creating a variable, i, and sets this to 0. Then it checks whether i is smaller than 10. If it is, it will execute the log statement. After this, it will execute i++ and increase i by one.

The condition gets checked again. This goes on until i reaches a value of 10. Since 10 is not smaller than 10, the loop is done executing, and the numbers 0 to 9 have been logged.

Example 2: Populating an Array

We can also use a for loop to create a sequence and add values to an array, like this:

let arr = [];

for (let i = 0; i < 100; i++) {
    arr.push(i);
}
console.log(arr);

Since the loop ran the block of code 100 times, starting with an initial value of 0 for i, the block of code will add the incrementing value into the array.

This results in an array that has a count of 0–99 and a length of 100 items. Since arrays start with an index value of zero, the values in the array will actually match up exactly with the index values of the items in the array!

Example 3: Stepping by Different Values

Most commonly, you will see i++ as the third part of the for loop, but please note that you can write any statement there.

For example, we could create an array containing only even values:

let arr = [];

// Instead of i++, we use i = i + 2
for (let i = 0; i < 100; i = i + 2) {
    arr.push(i);
}
console.log(arr);

In this case, we are using i = i + 2 to add 2 to the previous value every time. This creates an array filled exclusively with even numbers from 0 up to 98.