🔁 Loops in JavaScript — Mastering Repetition with for, while & more

✍️ Written by Chaitanya Chopde
🎨 Inspired by Devsync — Teaching JavaScript with Clarity

This blog is part of my @Devsync learning journey — documenting what I learn step by step to help others along the way.

🧠 Why Loops Matter

Loops are fundamental in programming. They allow you to repeat a task multiple times without writing the same code again and again.

In JavaScript, loops are used for:

• Iterating over arrays and objects

• Running code until a condition is met

• Automating repetitive tasks

• Rendering dynamic content (like lists, tables)

Mastering loops is essential for writing scalable, readable, and efficient code.

---

🔄 Types of Loops in JavaScript

JavaScript gives us several loop types, each with its own use cases:

1. for Loop

2. while Loop

3. do...while Loop

4. for...of Loop (ES6)

5. for...in Loop

6. Array Methods like .forEach(), .map()

Let’s break them down one by one.

---

🔢 1. The for Loop — Classic & Precise

jsCopyEditfor (let i = 0; i < 5; i++) {
  console.log("Iteration:", i);
}

• Great for numeric counters

• Full control over iteration (start, end, step)

• Used when you know how many times you want to loop

---

🔁 2. The while Loop — Condition First

jsCopyEditlet i = 0;
while (i < 3) {
  console.log("i is", i);
  i++;
}

• Runs as long as the condition is true

• Ideal when the number of iterations is not fixed

---

🔂 3. The do...while Loop — Run at Least Once

jsCopyEditlet i = 0;
do {
  console.log("Runs at least once:", i);
  i++;
} while (i < 1);

• Executes first, then checks the condition

• Guaranteed to run at least one time

---

🔁 4. for...of — Modern & Clean for Arrays

jsCopyEditconst fruits = ["apple", "banana", "mango"];
for (let fruit of fruits) {
  console.log(fruit);
}

• Best for arrays, strings, maps, sets

• Doesn’t give index (use for or .forEach() if needed)

---

🧾 5. for...in — Iterate Over Object Keys

jsCopyEditconst user = { name: "Hasnide", age: 20 };

for (let key in user) {
  console.log(key + ":", user[key]);
}

• Works with objects

• Avoid using for arrays — use for...of or .forEach()

---

⚙️ 6. .forEach() — Method on Arrays

jsCopyEditconst nums = [1, 2, 3];
nums.forEach((num, index) => {
  console.log(index, num);
});

• Clean syntax

• Doesn’t return anything

• Can’t use break or continue

---

✨ Other Useful Loop Tools

✅ break — Exit a loop early

jsCopyEditfor (let i = 0; i < 5; i++) {
  if (i === 3) break;
  console.log(i);
}

✅ continue — Skip current iteration

jsCopyEditfor (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}

---

🧠 Extra Theory: How Loops Work Behind the Scenes

Every loop type creates an internal execution context and checks a condition before moving to the next iteration.

The flow is typically:

1. Initialize (start value)

2. Check condition

3. Run code block

4. Update counter

5. Repeat or stop

Some loops (like for) give you control of all steps. Others (for...of, .forEach()) handle it internally for cleaner syntax.

Understanding this flow helps debug infinite loops, skips, or logic bugs.

---

🧪 Real-World Looping Examples

✅ Print even numbers from 1 to 10

jsCopyEditfor (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

✅ Sum of array values

jsCopyEditconst arr = [10, 20, 30];
let sum = 0;
for (let num of arr) {
  sum += num;
}
console.log("Total:", sum);

✅ Display object values

jsCopyEditconst profile = { name: "Hasnide", role: "Dev" };
for (let key in profile) {
  console.log(`${key}: ${profile[key]}`);
}

---

⚠️ Common Mistakes

• Forgetting to update counter (i++) → infinite loops

• Using for...in on arrays (use for...of instead)

• Trying to use await inside .forEach() (it won’t wait!)

---

✅ Conclusion

Loops are the foundation of control and automation in JavaScript.
Whether you're building a todo list, form validator, or an API-powered dashboard — you'll use loops constantly.

For Hasnide and other new developers, mastering loops is like unlocking the muscle memory of programming.

Once you learn the right loop for the job, your code becomes faster, cleaner, and easier to understand.

---

✍️ Written by:

Chaitanya Chopde
Frontend Developer | Mentor to Hasnide
📫 chaitanyachopde14@gmail.com