Article

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

Find the course that's right for you! Explore our catalog or get a recommendation.
Career Path

### Data Scientist

Beginner friendly

85 Lessons
Career Path

### Full-Stack Engineer

Beginner friendly

137 Lessons