In programming, loops are used to repeat a block of code again and again until a condition becomes false.

Think of it like a muazzin calling people for prayer every day at fixed times. The action repeats based on a system. In programming too, loops automate repetition instead of writing the same code many times.

Without loops:

console.log("Welcome");
console.log("Welcome");
console.log("Welcome");
console.log("Welcome");

With loops:

for(let i = 1; i <= 4; i++) {
    console.log("Welcome");
}

Clean. Efficient. Professional.

Why Loops Are Important

Loops help in:

  • Repeating tasks
  • Working with arrays
  • Processing data
  • Building games
  • Automation
  • Calculations
  • Backend operations
  • Data Science workflows

In real-world software engineering, loops are everywhere.

Types of Loops in JavaScript

JavaScript mainly has:

  1. for loop
  2. while loop
  3. do...while loop
  4. for...of loop
  5. for...in loop
  6. forEach() method

1. for Loop

The most commonly used loop.

Syntax

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

Understanding the Logic

A for loop has 3 important parts:

Part Purpose
Initialization Starting point
Condition Checks whether loop should continue
Update Changes variable after every iteration

Flow of Execution

Start
  ↓
Initialization
  ↓
Condition Check
  ↓
True → Execute Code
  ↓
Update Variable
  ↓
Condition Check Again

Example 1 — Print Numbers 1 to 5

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

Step-by-Step Execution

First Iteration

let i = 1

Condition:

1 <= 5 → true

Print:

1

Update:

i++

Now:

i = 2

Again condition checked.

This continues until:

i = 6

Condition becomes false:

6 <= 5 → false

Loop stops.

Output

1
2
3
4
5

Example 2 — Even Numbers

for(let i = 2; i <= 10; i += 2) {
    console.log(i);
}

Logic

i += 2

Means:

i = i + 2

So numbers jump like:

2 → 4 → 6 → 8 → 10

Output

2
4
6
8
10

Example 3 — Reverse Counting

for(let i = 10; i >= 1; i--) {
    console.log(i);
}

Output

10
9
8
7
6
5
4
3
2
1

Infinite Loop Danger

If condition never becomes false:

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

This never stops.

Because:

i >= 1

Will always remain true.

This is called an Infinite Loop.

2. while Loop

Used when number of iterations is unknown.

Syntax

while(condition) {
    // code
}

Logic

  • Condition checked first
  • If true → code runs
  • If false → loop stops

Example

let i = 1;

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

Output

1
2
3
4
5

Flow

Condition Check
   ↓
True → Run Code
   ↓
Update Variable
   ↓
Condition Again

Real-Life Analogy

While battery exists:
    Phone keeps running

Example — Sum of Numbers

let i = 1;
let sum = 0;

while(i <= 5) {
    sum = sum + i;
    i++;
}

console.log(sum);

Step-by-Step

sum = 0 + 1 = 1
sum = 1 + 2 = 3
sum = 3 + 3 = 6
sum = 6 + 4 = 10
sum = 10 + 5 = 15

Output

15

3. do...while Loop

This loop executes code at least once.

Syntax

do {
    // code
} while(condition);

Important Difference

Loop Condition Checked
while Before execution
do...while After execution

Example

let i = 1;

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

Output

1
2
3
4
5

Special Case

let i = 10;

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

Even though condition is false:

10 < 5 → false

Still output comes once.

Output

Hello

Because do block runs before checking condition.

4. for...of Loop

Used for iterating over iterable objects like:

  • Arrays
  • Strings
  • Maps
  • Sets

Syntax

for(variable of iterable) {
    // code
}

Example with Array

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

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

Output

Apple
Mango
Banana

Logic

Loop automatically picks each value one by one.

fruit = Apple
fruit = Mango
fruit = Banana

Example with String

let name = "ANAS";

for(let letter of name) {
    console.log(letter);
}

Output

A
N
A
S

5. for...in Loop

Used for iterating over object properties.

Syntax

for(key in object) {
    // code
}

Example

let student = {
    name: "Anas",
    age: 20,
    city: "Mumbai"
};

for(let key in student) {
    console.log(key);
}

Output

name
age
city

Accessing Values

for(let key in student) {
    console.log(student[key]);
}

Output

Anas
20
Mumbai

Key Difference

Loop Used For
for...of Values
for...in Keys/Properties

Example Comparison

Array

let arr = ["A", "B", "C"];

for...of

for(let value of arr) {
    console.log(value);
}

Output:

A
B
C

for...in

for(let index in arr) {
    console.log(index);
}

Output:

0
1
2

6. forEach() Method

Used with arrays.

Syntax

array.forEach(function(value, index) {
    // code
});

Example

let numbers = [10, 20, 30];

numbers.forEach(function(num) {
    console.log(num);
});

Output

10
20
30

Arrow Function Version

numbers.forEach((num) => {
    console.log(num);
});

Accessing Index

numbers.forEach((num, index) => {
    console.log(index, num);
});

Output

0 10
1 20
2 30

break Statement

Used to stop loop immediately.

Example

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

    if(i === 5) {
        break;
    }

    console.log(i);
}

Output

1
2
3
4

Loop stops at 5.

continue Statement

Skips current iteration.

Example

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

    if(i === 3) {
        continue;
    }

    console.log(i);
}

Output

1
2
4
5

3 is skipped.

Nested Loops

Loop inside another loop.

Example

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

Pattern Example

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

    let stars = "";

    for(let j = 1; j <= i; j++) {
        stars += "*";
    }

    console.log(stars);
}

Output

*
**
***
****
*****

Which Loop Should You Use?

Situation Best Loop
Known repetitions for
Unknown repetitions while
Must run once do...while
Arrays/Strings values for...of
Object properties for...in
Array operations forEach

Performance Insight

In large applications:

  • for loop is usually fastest
  • forEach() is cleaner for arrays
  • for...of is modern and readable
  • while is useful for dynamic conditions

Good engineers balance:

Performance + Readability + Maintainability

Common Beginner Mistakes

Forgetting Update

let i = 1;

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

Infinite loop.

Wrong Condition

for(let i = 1; i >= 5; i++)

Loop never runs.

Using for...in with Arrays

Avoid:

for(let x in arr)

Prefer:

for(let x of arr)

Real-World Example

Multiplication Table

let number = 5;

for(let i = 1; i <= 10; i++) {
    console.log(`${number} x ${i} = ${number * i}`);
}

Output

5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
...

Final Concept

A loop is fundamentally:

Repeat →
Check →
Update →
Repeat →
Stop

Master loops deeply, and programming starts feeling alive.
Arrays, algorithms, data structures, APIs, games, automation, AI pipelines — all dance around loops like planets around the sun.

JavaScript rewards those who understand repetition with discipline and clarity.

[Mid-Post Ad Placeholder]