4.7 Loops

Loops allow us to execute a block of code repeatedly without writing the same code multiple times.

Instead of writing:

console.log("Hello");
console.log("Hello");
console.log("Hello");
console.log("Hello");
console.log("Hello");

We can use a loop:

for (let i = 1; i <= 5; i++) {

    console.log("Hello");

}

Output

Hello
Hello
Hello
Hello
Hello

Loops make code shorter, cleaner, and easier to maintain.

---

What is a Loop?

A loop repeatedly executes a block of code until a condition becomes false.

Start
  ↓
Initialize
  ↓
Check Condition
  ↓
Execute Code
  ↓
Update Value
  ↓
Repeat

---

Why Use Loops?

Loops are commonly used when working with:

• Arrays
• Objects
• Lists
• API Responses
• Database Records
• Repeated Tasks

Without loops, we would have to write the same code many times.

---

Types of Loops

JavaScript provides several types of loops:

1. for
2. while
3. do...while
4. for...in
5. for...of
6. break
7. continue

---

for Loop

The for loop is the most commonly used loop.

It is best when the number of iterations is already known.

Syntax

for (
    initialization;
    condition;
    update
) {

    // code

}

---

Example

for (
    let i = 1;
    i <= 5;
    i++
) {

    console.log(i);

}

Output

1
2
3
4
5

---

How the for Loop Works

for (
    let i = 1;
    i <= 3;
    i++
)

Execution

i = 1 → Print
i = 2 → Print
i = 3 → Print
i = 4 → Stop

---

Countdown Example

for (
    let i = 5;
    i >= 1;
    i--
) {

    console.log(i);

}

Output

5
4
3
2
1

---

Print Even Numbers

for (
    let i = 2;
    i <= 10;
    i += 2
) {

    console.log(i);

}

Output

2
4
6
8
10

---

while Loop

The while loop is used when the number of iterations is unknown.

The condition is checked before executing the loop.

Syntax

while (condition) {

    // code

}

---

Example

let count = 1;

while (count <= 5) {

    console.log(count);

    count++;

}

Output

1
2
3
4
5

---

Flow

Check Condition
      ↓
Execute Code
      ↓
Update Variable
      ↓
Repeat

---

Countdown Example

let i = 10;

while (i > 0) {

    console.log(i);

    i--;

}

Output

10
9
8
7
6
5
4
3
2
1

---

Infinite Loop

let i = 1;

while (i <= 5) {

    console.log(i);

}

Problem

i never changes

Result

Infinite Loop

Always make sure the loop condition eventually becomes false.

---

do...while Loop

The do...while loop is similar to while, but it executes the code at least once.

The condition is checked after execution.

Syntax

do {

    // code

}
while (condition);

---

Example

let i = 1;

do {

    console.log(i);

    i++;

}
while (i <= 5);

Output

1
2
3
4
5

---

while vs do...while

while

let i = 10;

while (i < 5) {

    console.log(i);

}

Output

Nothing

---

do...while

let i = 10;

do {

    console.log(i);

}
while (i < 5);

Output

10

The code runs once before checking the condition.

---

for...in Loop

The for...in loop is used to iterate over the properties (keys) of an object.

Example

const user = {

    name: "Samir",

    age: 21,

    city: "Jhapa"

};

for (const key in user) {

    console.log(key);

}

Output

name
age
city

---

Access Object Values

for (const key in user) {

    console.log(user[key]);

}

Output

Samir
21
Jhapa

---

Key-Value Example

for (const key in user) {

    console.log(
        key,
        user[key]
    );

}

Output

name Samir
age 21
city Jhapa

---

for...of Loop

The for...of loop is used to iterate over iterable values such as:

• Arrays
• Strings
• Maps
• Sets

---

Array Example

const fruits = [

    "Apple",

    "Mango",

    "Banana"

];

for (const fruit of fruits) {

    console.log(fruit);

}

Output

Apple
Mango
Banana

---

String Example

const name = "Samir";

for (const char of name) {

    console.log(char);

}

Output

S
a
m
i
r

---

Traditional for vs for...of

Traditional for

const fruits = [

    "Apple",

    "Mango"

];

for (
    let i = 0;
    i < fruits.length;
    i++
) {

    console.log(fruits[i]);

}

---

for...of

for (const fruit of fruits) {

    console.log(fruit);

}

for...of is cleaner and easier to read when working with arrays.

---

for...in vs for...of

for...in	for...of
Returns Keys	Returns Values
Used for Objects	Used for Arrays, Strings, Maps, Sets
Returns Property Names	Returns Actual Values

---

Example

const fruits = [

    "Apple",

    "Mango"

];

Using for...in

for (const key in fruits) {

    console.log(key);

}

Output

0
1

Using for...of

for (const fruit of fruits) {

    console.log(fruit);

}

Output

Apple
Mango

---

break Statement

The break statement immediately exits a loop.

Example

for (
    let i = 1;
    i <= 10;
    i++
) {

    if (i === 5) {

        break;

    }

    console.log(i);

}

Output

1
2
3
4

The loop stops when i becomes 5.

---

Real-World Example

const users = [

    "Samir",

    "John",

    "Alex"

];

for (const user of users) {

    if (user === "John") {

        break;

    }

    console.log(user);

}

Output

Samir

---

continue Statement

The continue statement skips the current iteration and continues with the next one.

Example

for (
    let i = 1;
    i <= 5;
    i++
) {

    if (i === 3) {

        continue;

    }

    console.log(i);

}

Output

1
2
4
5

---

Skip Even Numbers

for (
    let i = 1;
    i <= 10;
    i++
) {

    if (i % 2 === 0) {

        continue;

    }

    console.log(i);

}

Output

1
3
5
7
9

---

Nested Loops

A nested loop is a loop inside another loop.

for (
    let i = 1;
    i <= 3;
    i++
) {

    for (
        let j = 1;
        j <= 2;
        j++
    ) {

        console.log(i, j);

    }

}

Output

1 1
1 2
2 1
2 2
3 1
3 2

Nested loops are useful for working with tables, matrices, and grids.

---

Real-World Examples

Loop Through an Array

const students = [

    "Samir",

    "Ram",

    "Hari"

];

for (const student of students) {

    console.log(student);

}

Output

Samir
Ram
Hari

---

Finding an Item

const users = [

    "Samir",

    "John",

    "Alex"

];

for (const user of users) {

    if (user === "John") {

        console.log("Found");

        break;

    }

}

Output

Found

---

Loop Comparison

Loop	Best Use
for	Known number of iterations
while	Unknown number of iterations
do...while	Must execute at least once
for...in	Iterate object keys
for...of	Iterate array or string values

---

Best Practices

Use for...of for Arrays

Good

for (const item of items) {

}

---

Use for...in for Objects

Good

for (const key in user) {

}

---

Avoid Infinite Loops

Bad

while (true) {

}

Unless intentionally creating an infinite process.

---

Use break Carefully

if (found) {

    break;

}

---

Use continue for Filtering

if (!user.active) {

    continue;

}

---

Summary

Concept	Purpose
for	Fixed number of iterations
while	Condition-controlled loop
do...while	Executes at least once
for...in	Iterate object keys
for...of	Iterate values
break	Stop a loop
continue	Skip current iteration
Nested Loop	Loop inside another loop

---

Key Takeaway

Loops allow JavaScript to execute code repeatedly without duplication.

for
  ↓
Known Iterations

while
  ↓
Unknown Iterations

do...while
  ↓
Execute At Least Once

for...in
  ↓
Object Keys

for...of
  ↓
Array & String Values

break
  ↓
Stop Loop

continue
  ↓
Skip Iteration

Modern JavaScript developers most commonly use:

For arrays:

for (const item of items) {

}

For objects:

for (const key in object) {

}

Mastering loops is essential because they are used throughout JavaScript for processing arrays, handling API responses, working with user data, rendering UI components, and building application logic.