Understanding JavaScript For Loops: How to Read and Write Them

Copy Link LinkedIn Message Facebook Email X

Iteration is often synonymous with the 'for loop'.

You will come across this syntax many, many times over. Learn it well. To get a grip on what it means, you can think of a for loop as saying something like: "For each loop, do this". Though beware, because for is not the same as forEach!

How To Write a JS For Loop

A for loop requires three things:

1. let i = 1 The starting value for the iterator
2. i <= 10 How long the loop should iterate
3. i++ The amount the iterator increases after each iteration

This code block will print the numbers 1 - 10 to the console, each on a new line. Try it out!

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

How to Read a JS For Loop

Here is how to understand what the elements inside of a for loop mean:

1. The variable i is declared and assigned the value of 1.
2. The loop will run until the condition i <= 10 evaluates to false which happens when i is 11.
3. The loop will increment by one after each iteration.

Understanding It Step-By-Step

If new to for-loops, it is useful to walk through the operation of this step-by-step in words:

The loop starts with the value of i as 1. 1 is less than 10, so the condition passes and the code inside the curly braces runs, printing i, which evaluates to 1, to the console. Then, i will be increased to 2, and the loop starts over. 2 is less than 10, so the condition again passes and the code in the curly braces runs, printing 2 to the console. i is then increased again, and the loop continues until i is increased to 11. Then, the condition will evaluate to false, as 11 is not less-than or equal to 10, and the loop terminates.

Some For Loop Variations

Multi-Line

for(
    let i = 50;
    i < 100000;
    i = (i * 2) + 50;
) {
    console.log(i);
}

In this example our starting number is 50, and while i is less than one-hundred-thousand, it logs i. Every iteration it multiplies i by 2 and adds 50.

The syntax for this example is quite unconventional. Usually the three statements go on one line like the previous example, but this spacing is possible, and if the arguments are complicated and you think its more readable like that, then it is desirable.

Variable Name

for (let x = 87000; x > 1; x -= x / 2) {
  console.log(x);
}

In this example, the condition is "while x is greater than 1". Each iteration, x is halved, and the result is subtracted from x. This will effectively halve x but it's written this way to show the operation explicitly, which may be clearer in the wider context of the code.

Instead of declaring the variable as i it declares it as x. The name doesn't matter, it can be anything you like.

Nested

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

This uses two identical loops, except the inner loop defines its variable as j instead of i, just to not get the variables mixed up. What do you think the output will be? Try it out on the console!

Summary: Learn About the JS For Loop

• for is not the same as forEach
• You can nest loops within each other

How to Write a JS For Loop

A for loop requires three things:

1. let i = 0 The starting value for the iterator
2. i <= 10 How long the loop should iterate
3. i++ The amount the iterator increases after each iteration

How to Read a JS For Loop

Here is how to understand what the elements inside of a for loop mean:

1. The variable i is declared and assigned the value of 1.
2. The loop will run until the condition i <= 10 evaluates to false which happens when i is 11.
3. The loop will increment by one after each iteration.