A for loop is used when a loop is to be executed a known number of times.

The following applet is here to illustrate you the basic differences between the 3 loop statements. With this you can, e.g , see the difference of execution begin and stop between while and repeat-until.

In the first box, you can enter a for loop code pice and when you click onto the 'Start For' button, you see the output in the 4. box. The same applies for the while-loop and the 2.box and the repeat-until loop and the 3.box.

For example, outputting goods from a list one after another or just running the same code for each number from 1 to 10.

Loops are a way to repeat the same code multiple times.

The for…of and for…in loops

A small announcement for advanced readers.

This article covers only basic loops:

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

If you came to this article searching for other types of loops, here are the pointers:

• See to loop over object properties.
• See and iterables for looping over arrays and iterable objects.

Otherwise, please read on.

The

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

while (condition) {
  // code
  // so-called "loop body"
}

While the

let i = 3;
while (i) alert(i--);

let i = 3;
while (i) alert(i--);

For instance, the loop below outputs

let i = 3;
while (i) alert(i--);

let i = 3;
while (i) alert(i--);

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

A single execution of the loop body is called an iteration. The loop in the example above makes three iterations.

If

let i = 3;
while (i) alert(i--);

Any expression or variable can be a loop condition, not just comparisons: the condition is evaluated and converted to a boolean by

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

For instance, a shorter way to write

let i = 3;
while (i) alert(i--);

let i = 3;
while (i) alert(i--);

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

Curly braces are not required for a single-line body

If the loop body has a single statement, we can omit the curly braces

let i = 3;
while (i) alert(i--);

let i = 3;
while (i) alert(i--);

The condition check can be moved below the loop body using the

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

do {
  // loop body
} while (condition);

The loop will first execute the body, then check the condition, and, while it’s truthy, execute it again and again.

For example:

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

This form of syntax should only be used when you want the body of the loop to execute at least once regardless of the condition being truthy. Usually, the other form is preferred:

do {
  // loop body
} while (condition);

The

do {
  // loop body
} while (condition);

It looks like this:

for (begin; condition; step) {
  // ... loop body ...
}

Let’s learn the meaning of these parts by example. The loop below runs

do {
  // loop body
} while (condition);

let i = 3;
while (i) alert(i--);

do {
  // loop body
} while (condition);

do {
  // loop body
} while (condition);

for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2
  alert(i);
}

Let’s examine the

do {
  // loop body
} while (condition);

do {
  // loop body
} while (condition);

let i = 3;
while (i) alert(i--);

do {
  // loop body
} while (condition);

let i = 3;
while (i) alert(i--);

The general loop algorithm works like this:

Run begin
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ ...

That is,

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

let i = 3;
while (i) alert(i--);

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

If you are new to loops, it could help to go back to the example and reproduce how it runs step-by-step on a piece of paper.

Here’s exactly what happens in our case:

// for (let i = 0; i < 3; i++) alert(i)

// run begin
let i = 0
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// ...finish, because now i == 3

Inline variable declaration

Here, the “counter” variable

let i = 3;
while (i) alert(i--);

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

Instead of defining a variable, we could use an existing one:

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

Any part of

do {
  // loop body
} while (condition);

For example, we can omit

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

Like here:

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

We can also remove the

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

This makes the loop identical to

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

We can actually remove everything, creating an infinite loop:

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

Please note that the two

do {
  // loop body
} while (condition);

for (begin; condition; step) {
  // ... loop body ...
}

Normally, a loop exits when its condition becomes falsy.

But we can force the exit at any time using the special

for (begin; condition; step) {
  // ... loop body ...
}

For example, the loop below asks the user for a series of numbers, “breaking” when no number is entered:

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

The

for (begin; condition; step) {
  // ... loop body ...
}

for (begin; condition; step) {
  // ... loop body ...
}

for (begin; condition; step) {
  // ... loop body ...
}

The combination “infinite loop +

for (begin; condition; step) {
  // ... loop body ...
}

The

for (begin; condition; step) {
  // ... loop body ...
}

for (begin; condition; step) {
  // ... loop body ...
}

We can use it if we’re done with the current iteration and would like to move on to the next one.

The loop below uses

for (begin; condition; step) {
  // ... loop body ...
}

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

For even values of

let i = 3;
while (i) alert(i--);

for (begin; condition; step) {
  // ... loop body ...
}

do {
  // loop body
} while (condition);

for (begin; condition; step) {
  // ... loop body ...
}

The

for (begin; condition; step) {
  // ... loop body ...
}

A loop that shows odd values could look like this:

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

From a technical point of view, this is identical to the example above. Surely, we can just wrap the code in an

for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2
  alert(i);
}

for (begin; condition; step) {
  // ... loop body ...
}

But as a side effect, this created one more level of nesting (the

for (begin; condition; step) {
  // ... loop body ...
}

for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2
  alert(i);
}

No

for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2
  alert(i);
}

Please note that syntax constructs that are not expressions cannot be used with the ternary operator

Run begin
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ ...

for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2
  alert(i);
}

For example, if we take this code:

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

…and rewrite it using a question mark:

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

…it stops working: there’s a syntax error.

This is just another reason not to use the question mark operator

Run begin
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ ...

for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2
  alert(i);
}

Sometimes we need to break out from multiple nested loops at once.

For example, in the code below we loop over

let i = 3;
while (i) alert(i--);

Run begin
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ ...

Run begin
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ ...

Run begin
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ ...

Run begin
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ ...

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

We need a way to stop the process if the user cancels the input.

The ordinary

for (begin; condition; step) {
  // ... loop body ...
}

// for (let i = 0; i < 3; i++) alert(i)

// run begin
let i = 0
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// ...finish, because now i == 3

A label is an identifier with a colon before a loop:

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

The

// for (let i = 0; i < 3; i++) alert(i)

// run begin
let i = 0
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// ...finish, because now i == 3

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

In the code above,

// for (let i = 0; i < 3; i++) alert(i)

// run begin
let i = 0
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// ...finish, because now i == 3

// for (let i = 0; i < 3; i++) alert(i)

// run begin
let i = 0
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// ...finish, because now i == 3

So the control goes straight from

for (begin; condition; step) {
  // ... loop body ...
}

// for (let i = 0; i < 3; i++) alert(i)

// run begin
let i = 0
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// if condition → run body and run step
if (i < 3) { alert(i); i++ }
// ...finish, because now i == 3

We can also move the label onto a separate line:

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

The

for (begin; condition; step) {
  // ... loop body ...
}

Labels do not allow to “jump” anywhere

Labels do not allow us to jump into an arbitrary place in the code.

For example, it is impossible to do this:

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

A

for (begin; condition; step) {
  // ... loop body ...
}

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

…Although, 99.9% of the time

for (begin; condition; step) {
  // ... loop body ...
}

A

for (begin; condition; step) {
  // ... loop body ...
}

We covered 3 types of loops:

• let i = 3;
  while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
    alert( i );
    i--;
  }

  6 – The condition is checked before each iteration.

• let i = 3;
  while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
    alert( i );
    i--;
  }

  7 – The condition is checked after each iteration.

• let i = 0;
  while (i < 3) { // shows 0, then 1, then 2
    alert( i );
    i++;
  }

  02 – The condition is checked before each iteration, additional settings available.

To make an “infinite” loop, usually the

let i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

for (begin; condition; step) {
  // ... loop body ...
}

If we don’t want to do anything in the current iteration and would like to forward to the next one, we can use the

for (begin; condition; step) {
  // ... loop body ...
}

for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2
  alert(i);
}

for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2
  alert(i);
}

What loop should be used when the number of loops is known?

Is for loop used when the number of iterations is unknown?

What is for loop also known as?

Why is it called a for loop?