With the while loop we can execute a set of statements as long as a condition is

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--;
}

6,

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

7 and

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

8.

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

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

Otherwise, please read on.

The “while” loop

The

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

6 loop has the following syntax:

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

While the

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

0 is truthy, the

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

1 from the loop body is executed.

For instance, the loop below outputs

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

2 while

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

3:

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--);

4 was missing from the example above, the loop would repeat (in theory) forever. In practice, the browser provides ways to stop such loops, and in server-side JavaScript, we can kill the process.

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--;
}

6.

For instance, a shorter way to write

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

6 is

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

7:

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--);

8:

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

The “do…while” loop

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--;
}

7 syntax:

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);

0.

The “for” loop

The

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

1 loop is more complex, but it’s also the most commonly used loop.

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);

2 for

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

2 from

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

4 up to (but not including)

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

5:

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

Let’s examine the

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

1 statement part-by-part:

partbegin

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

7Executes once upon entering the loop.condition

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

3Checked before every loop iteration. If false, the loop stops.body

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

2Runs again and again while the condition is truthy.step

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

4Executes after the body on each iteration.

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);

1 executes once, and then it iterates: after each

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

0 test,

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

3 and

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

4 are executed.

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--);

2 is declared right in the loop. This is called an “inline” variable declaration. Such variables are visible only inside the loop.

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

0

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++;
}

1

Skipping parts

Any part of

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

1 can be skipped.

For example, we can omit

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

1 if we don’t need to do anything at the loop start.

Like here:

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

2

We can also remove the

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

4 part:

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

3

This makes the loop identical to

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

9.

We can actually remove everything, creating an infinite loop:

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

4

Please note that the two

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

1 semicolons

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

1 must be present. Otherwise, there would be a syntax error.

Breaking the loop

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 ...
}

2 directive.

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++;
}

5

The

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

2 directive is activated at the line

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

4 if the user enters an empty line or cancels the input. It stops the loop immediately, passing control to the first line after the loop. Namely,

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

5.

The combination “infinite loop +

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

2 as needed” is great for situations when a loop’s condition must be checked not in the beginning or end of the loop, but in the middle or even in several places of its body.

Continue to the next iteration

The

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

7 directive is a “lighter version” of

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

2. It doesn’t stop the whole loop. Instead, it stops the current iteration and forces the loop to start a new one (if the condition allows).

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 ...
}

7 to output only odd values:

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

6

For even values of

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

2, the

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

7 directive stops executing the body and passes control to the next iteration of

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

1 (with the next number). So the

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

5 is only called for odd values.

The

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

7 directive helps decrease nesting

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++;
}

7

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);
}

5 block instead of using

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

7.

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

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

5 call inside the curly braces). If the code inside of

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

5 is longer than a few lines, that may decrease the overall readability.

No

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

9 to the right side of ‘?’

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)
→ ...

0. In particular, directives such as

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

9 aren’t allowed there.

For example, if we take this code:

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

8

…and rewrite it using a question mark:

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

9

…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)
→ ...

0 instead of

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

5.

Labels for break/continue

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--);

2 and

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

5, prompting for the coordinates

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

6 from

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

7 to

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

8:

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

0

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

The ordinary

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

2 after

// 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

0 would only break the inner loop. That’s not sufficient – labels, come to the rescue!

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--;
}

1

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

1 statement in the loop below breaks out to the label:

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

2

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

2 looks upwards for the label named

// 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

3 and breaks out of that loop.

So the control goes straight from

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

4 to

// 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

5.

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--;
}

3

The

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

7 directive can also be used with a label. In this case, code execution jumps to the next iteration of the labeled loop.

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--;
}

4

A

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

2 directive must be inside a code block. Technically, any labelled code block will do, e.g.:

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

5

…Although, 99.9% of the time

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

2 is used inside loops, as we’ve seen in the examples above.

A

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

7 is only possible from inside a loop.

Summary

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++;
}

03 construct is used. Such a loop, just like any other, can be stopped with the

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

2 directive.

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 ...
}

7 directive.

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

9 support labels before the loop. A label is the only way for

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

9 to escape a nested loop to go to an outer one.

Is a while loop a conditional statement?

Can we use or condition in while loop?

What is the condition used in while loop?

Do