Loops

Resources

• Loops and Iteration
• Loops: while and for
• Looping Code

1. while loop

while(condition){
  // code
  // loop body
}

While the condition is truthy, the code from the loop body is executed.

// while i < 3, the loop will continue to output the value of i
let i = 0; 
while(i < 3){
  console.log(i); 
  i++; 
}

// Output: 0, 1, 2

If i++ was missing from the example above, the loop would repeat (in theory) forever → infinite loop.

2. do...while loop

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.

let i = 0; 
do {
  console.log(i); 
  i++
} while (i < 3); 

// 0, 1, 2

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: while(…) {…}.

3. for loop

The for loop is more complex, but it’s also the most commonly used loop. It allows us to specify the number of time we want the loop to run.

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

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++){
  console.log(i); 
}

// Output: 0, 1, 2

begin	let i = 0	Executes once upon entering the loop.
condition	i < 3	Checked before every loop iteration. If false, the loop stops.
body	console.log(i)	Runs again and again while the condition is truthy.
step	i++	Executes after the body on each iteration.
That is, begin executes once, and then it iterates: after each condition test, body , and step are executed.

4. break the Loop

Normally, a loop exits when its condition becomes falsy. But we can force the exit at any time using the special break directive.

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

let sum = 0; 
while(true){
  let value = prompt("Enter a number", ''); 
  
  if(!value) {
    break; // (*)
  }
  sum += value; 
}

console.log("Sum: " + sum); // (**)

→ The break directive is activated at the line (*) 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, (**).

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

5. continue to the next iteration

The continue directive is a “lighter version” of break. 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).

// uses `continue` to output only odd values
for (let i = 0; i < 10; i++){
  // if true, skip the remaining part of the body
  if (i % 2 == 0){
    continue; 
  }
  console.log(i); // 1, 3, 5, 7, 9
}

→ For even values of i, the continue directive stops executing the body and passes control to the next iteration of for (with the next number). So the console.log is only called for odd values.

6. Labels for break/continue

Sometimes we need to break out from multiple nested loops at once. The ordinary break would only break the inner loop because that’s not sufficient, we can use labels to help.

// syntax for label of a loop
labelName: for(...){
  // loop code
}

// label can be on a separate line
labelName: 
for (...){
  // loop code
}

// outer loop
outerLoop: 
for (let i = 0; i < 3; i++) {
  // inner loop
  for(let j = 0; j < 3; j++){
    let input = prompt("Enter a value: ");

    // if an input is falsy, break out of both loops
    if (!input){
      break outerLoop; 
    }

    // code to do something with the input value
  }
}

console.log("Done!"); 

→ In the code above, break outer looks upwards for the label named outer and breaks out of that loop.