Understanding Loops in JavaScript: A Beginner-Friendly Guide

In the previous article, we learned about arrays and how they allow us to store multiple values together in a single variable.

But storing data is only one part of programming. Very often, we also need to perform the same task multiple times.

For example, imagine we want to print the numbers from 1 to 10. One way to do this would be writing:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

This works perfectly fine. But imagine if we had to print numbers from 1 to 100, or even 1 to 10,000. Writing thousands of lines like this would be inefficient, error-prone, and almost impossible to maintain.

So the natural question becomes:

Is there a way to repeat a piece of code automatically without writing it again and again?

And the answer is yes. This is exactly where Loops come in.

Loops allow us to execute a block of code multiple times, making our programs much shorter, cleaner, and more efficient.

---

In this article, we will explore:

• What loops are

• How the for loop works

• How the while and do...while loops work

• How to control loops using break and continue

• And the difference between for...of and for...in

By the end of this article, you will understand how loops help automate repetitive tasks in JavaScript.

Let’s start by understanding the most commonly used loop in JavaScript: the for loop.

---

The for Loop

The for loop is one of the most commonly used loops in JavaScript. It allows us to repeat a block of code a specific number of times instead of writing the same code again and again.

Syntax

A basic for loop looks like this:

for (initialization; condition; update) {
  // code to execute
}

Let’s briefly understand the three parts of this loop:

• Initialization → runs once at the beginning and creates the loop variable

• Condition → determines whether the loop should continue running

• Update → changes the loop variable after each iteration

Now let’s see a simple example.

for (let i = 1; i <= 5; i = i + 1) {
  console.log(i);
}

Output:

1
2
3
4
5

Note: Instead of writing i = i + 1, developers often use a shorter form:

i++

Both statements increase the value of i by 1.

How the Loop Executes

We can understand the execution of this loop step by step.

Iteration	Value of i	Condition i <= 5	Output
1	1	true	1
2	2	true	2
3	3	true	3
4	4	true	4
5	5	true	5
6	6	false	Loop stops

Here’s what happens:

• The loop starts with i = 1

• After each iteration, i increases by 1

• The loop continues as long as the condition i <= 5 remains true

• When i becomes 6, the condition becomes false, and the loop stops

Flowchart

A Practical Example with Arrays

Loops become especially useful when working with arrays. Suppose we have an array of fruits:

const fruits = ["Apple", "Banana", "Mango", "Orange"];

We can use a for loop to go through each element of the array.

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Output:

Apple
Banana
Mango
Orange

Here the loop goes through each index of the array and prints the corresponding value.

---

The while Loop

The while loop is another way to repeat a block of code. Unlike the for loop, a while loop continues running as long as a condition remains true.

Syntax

A basic while loop looks like this:

while (condition) {
  // code to execute
}

Here, JavaScript first checks the condition.

• If the condition is true, the code inside the loop runs.

• If the condition becomes false, the loop stops.

Let's see a simple example:

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

Output:

1
2
3
4
5

How the Loop Executes

Iteration	Value of i	Condition i <= 5	Output
1	1	true	1
2	2	true	2
3	3	true	3
4	4	true	4
5	5	true	5
6	6	false	Loop stops

Here’s what happens:

• The loop starts with i = 1

• The condition i <= 5 is checked

• The number is printed

• i increases by 1

• The loop repeats until the condition becomes false

Flowchart

Important Thing to Remember

If the condition never becomes false, the loop will keep running forever. This is called an infinite loop.

Example:

while (true) {
  console.log("This will run forever!");
}

Because the condition is always true, the loop never stops.

---

The do...while Loop

The do...while loop is very similar to the while loop, but there is one important difference.

In a do...while loop, the code block runs at least once before the condition is checked.

Syntax

A basic do...while loop looks like this:

do {
  // code to execute
} while (condition);

Notice the order here:

1. The code inside the do block runs first.

2. After that, the condition is checked.

3. If the condition is true, the loop runs again.

4. If the condition becomes false, the loop stops.

Let's see an example.

let i = 1;

do {
  console.log(i);
  i++;
} while (i <= 5);

Output:

1
2
3
4
5

Flowchart

The Key Difference from while

Let’s see what happens if the condition is already false.

let i = 10;

do {
  console.log(i);
} while (i < 5);

Output:

10

Even though the condition i < 5 is false, the loop still runs once.

This happens because the do...while loop executes the code first and checks the condition afterward.

---

Now that we understand the main loop types, let’s look at two useful statements that help us control loop execution:

• break

• continue

---

The break Statement

Sometimes we may want to stop a loop before it finishes all its iterations.

For example, imagine we are searching for a specific value. Once we find it, there is no need to continue running the loop. This is where the break statement becomes useful.

The break statement immediately stops the loop and exits it.

Let's look at an example.

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;
  }

  console.log(i);
}

Output:

1
2
3
4

What Happened Here?

• The loop starts printing numbers from 1

• When i becomes 5, the break statement executes

• The loop stops immediately

So even though the loop was supposed to run until 10, it stops early.

---

The continue Statement

While the break statement stops the loop completely, the continue statement works differently.

The continue statement skips the current iteration and moves to the next one.

Let's see an example.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i);
}

Output:

1
2
4
5

What Happened Here?

• The loop runs from 1 to 5

• When i becomes 3, the continue statement runs

• That iteration is skipped

• The loop moves to the next iteration

So the number 3 is skipped, but the loop continues executing.

---

Special Loops in JavaScript

So far, we have used loops like for, while, and do...while to repeat a block of code. And in most of our examples, we used a counter variable like i to control the loop.

For example:

const fruits = ["Apple", "Banana", "Mango", "Orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Here the variable i represents the index of the array, and we use it to access each element of the array. This works perfectly fine, and it is still widely used in programming.

However, JavaScript also provides two special loops that make working with arrays and objects easier:

• for...of

• for...in

These loops allow us to iterate over values or keys directly, without manually managing an index variable. Because of this, they are often shorter and easier to read.

In the next sections, we will understand how each of these loops works and when to use them.

---

The for...of Loop

In the previous sections, we used a for loop to go through the elements of an array.

For example:

const fruits = ["Apple", "Banana", "Mango", "Orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Here we used i as the index to access each element of the array.

However, JavaScript provides a cleaner way to do this using the for...of loop.

Syntax

for (variable of iterable) {
  // code to execute
}

Let's see an example.

const fruits = ["Apple", "Banana", "Mango", "Orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

Output:

Apple
Banana
Mango
Orange

What Happened Here?

Let’s break it down:

• fruits is the array we want to loop through

• fruit represents each element of the array

• On every iteration, JavaScript assigns the next element of the array to fruit.

So the loop runs like this:

Iteration	Value of fruit	Output
1	Apple	Apple
2	Banana	Banana
3	Mango	Mango
4	Orange	Orange

As you can see, we did not need an index variable like i.

The loop directly gave us the values stored in the array, which makes the code shorter and easier to read.

---

The for...in Loop

In the previous section, we saw how the for...of loop allows us to iterate directly over the values of an array.

However, JavaScript also provides another loop called the for...in loop which is used to iterate over the keys of an object or the indexes of an array.

We'll discuss about objects in our JavaScript Objects article. So, do not get confused about it for now.

Let’s see how it works with an array.

const fruits = ["Apple", "Banana", "Mango", "Orange"];

for (const index in fruits) {
  console.log(index);
}

Output:

0
1
2
3

What Happened Here?

Instead of printing the values, the loop printed the indexes of the array.

Let’s understand this step by step.

Iteration	Value of index	Meaning
1	0	index of "Apple"
2	1	index of "Banana"
3	2	index of "Mango"
4	3	index of "Orange"

So in this loop:

• fruits is the array

• index represents the index of each element

But if we want to access the actual values of an array using for...in loop, we can use the following method:

const fruits = ["Apple", "Banana", "Mango", "Orange"];

for (const index in fruits) {
  console.log(fruits[index]);
}

Output:

Apple
Banana
Mango
Orange

Here, the loop gives us the index, and we use that index to access the value inside the array.

Note: Although for...in can work with arrays, it is mainly intended for iterating over object properties.

---

Now that we have seen both for...of and for...in loops, it is important to understand how they are different and when to use each one.

---

Difference Between for...of and for...in

Both for...of and for...in are used to iterate over collections of data, but they work in slightly different ways.

But how exactly do they differ from each other? Let's see the main difference between them:

• for...of gives the values

• for...in gives the keys (or indexes)

Let's see a simple example to understand this clearly.

const fruits = ["Apple", "Banana", "Mango"];

Using for...of

for (const fruit of fruits) {
  console.log(fruit);
}

Output:

Apple
Banana
Mango

Here the loop directly gives us the values stored in the array.

Using for...in

for (const index in fruits) {
  console.log(index);
}

Output:

0
1
2

Here the loop gives us the indexes of the array, not the values.

If we want the value, we must access the element.

for (const index in fruits) {
  console.log(fruits[index]);
}

Output:

Apple
Banana
Mango

Quick Comparison

Feature	for...of	for...in
What it iterates over	Values	Keys / Indexes
Commonly used with	Arrays	Objects
Code readability	Simpler when we only need values	Useful when keys are important

---

Practice Time

Now that we understand the different types of loops in JavaScript, let’s practice a few examples to strengthen our understanding.

1. Print Numbers Using a for Loop

Write a loop that prints numbers from 1 to 5.

for (let i = 1; i <= 5; i = i + 1) {
  console.log(i);
}

2. Print Elements of an Array

Create an array of fruits and print each element using a for...of loop.

const fruits = ["Apple", "Banana", "Mango", "Orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

3. Print Array Indexes Using for...in

Now print the indexes of the same array.

const fruits = ["Apple", "Banana", "Mango", "Orange"];

for (const index in fruits) {
  console.log(index);
}

4. Skip a Value Using continue

Print numbers from 1 to 5, but skip 3.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i);
}

5. Stop a Loop Using break

Print numbers from 1 to 10, but stop when the number reaches 5.

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;
  }

  console.log(i);
}

Try running these examples yourself and experiment by changing the values to see how the loops behave.

Practicing small examples like this is one of the best ways to understand how loops work.

---

Wrapping Up

In this article, we explored loops in JavaScript, which allow us to repeat a piece of code multiple times.

We learned about:

• for loops

• while loops

• do...while loops

• for...of and for...in loops

• The break and continue statements

Loops are extremely powerful because they help us automate repetitive tasks and work efficiently with collections of data like arrays and objects.

---

What's Next?

In earlier articles, we learned about arrays, and in this article we used loops to iterate through array elements.

But JavaScript also provides built-in array methods that allow us to perform many operations on arrays with much less code.

In the next article, we will explore Array Methods in JavaScript, where we’ll learn how functions like map(), filter(), and reduce() make working with arrays even more powerful.

---

⬅ Previous Article: Arrays in JavaScript

➡ Next Article: Array Methods in JavaScript