Loops

Use this article as a reference sheet for JavaScript loops.

• For loops — for loops execute a block of code for a set number of iterations.
• While loops — while loops execute a block of code and continue as long as a certain condition is met.

For Loops

Loops are used to execute a block of code repeatedly, given a set of conditions. A for loop will run the same block of code given a set number of iterations. Also, because JavaScript is a zero-indexed language the iteration usually starts at 0. The syntax looks like this:

for (let i = 0; i < 3; i++) {
  console.log(`This is iteration ${i}`);
}

The for loop in the example above will output the following to the console:

This is iteration 0
This is iteration 1
This is iteration 2

Let’s break the example above into four parts:

1. Within the for loop’s parentheses, the start condition is let i = 0, which means the loop starts counting at 0.
2. The stop condition is i < 3, which means the loop runs as long as i is less than 3. When i is equal to 3, the loop will stop.
3. The iterator is i++. This means that i increases by one after each loop — i++ is equivalent to writing i = i + 1;.
4. Finally, the code block inside the curly braces executes until the loop stops.

The iterator variable (in this case i) is always set to a numerical starting condition (let i = 0). The first loop i will equal 0, the second loop i will equal 1, and the third loop i will equal 2. The variable i is incremented by 1 after each loop is executed. It’s helpful to think that loops iterate by counting.

One application of for loops is to iteratively access items in an array. We can do this by writing a for loop and replacing the hard-coded number with the variable i, like this: myArray[i].

const condiments = ['Ketchup', 'Mustard', 'Sauerkraut'];
for (let i = 0; i < condiments.length; i++) {
  console.log(`Condiment: ${condiments[i]}`);
}

In the example above, the length of the condiments array (condiments.length) is used to set the stop condition — length can be used to access the number of items in any array. The loop executes for i values of 0, 1, and 2. Each iteration, the condiment at the current index is logged to the console:

Condiment: Ketchup
Condiment: Mustard
Condiment: Sauerkraut

While Loops

for loops are great, but they have a limitation: you must know the number of times you want the loop to run. What if you want a loop to run an unknown or variable number of times?

For example, what if we had a deck of cards and wanted to flip cards until we drew a Spade? We aren’t able to predict the number of cards that will need to be flipped before encountering a spade. However, we do know the condition that necessitates continuing to draw cards: if the current card is not a spade, draw another card.

That’s the purpose of the while loop. A code block will continue to execute until a condition is no longer true.

let count = 5;
while (count < 10){
  console.log(`The count is:  ${count}`);
  count++;
}

Let’s break down the example above:

1. The count variable is set to 5.
2. The loop begins with the keyword while.
3. The condition inside the parentheses is count < 10. This means the code inside the while loop will continue to execute as long as count is less than 10.
4. Inside the code block, the value of count is logged to the console. The value of count is then incremented by 1, using the increment operator (++). The increment operator increases the value of a numeric variable by one.
5. When the value of count reaches 10, the condition inside the parentheses will no longer be true, and the while loop will stop executing.

Output:

The count is: 5
The count is: 6
The count is: 7
The count is: 8
The count is: 9

What would happen if count were not incremented by one within each loop? The value of count would remain equal to five, and the while loop would continue to run forever. This is called an infinite loop. Infinite loops are a common cause of programs crashing.

Always review your while loops to ensure that each iteration is getting closer to meeting the condition.