🔁 Day 13 — Iterators, for...of & for...in in JavaScript

Hi Guys Welcome to Day 13 🚀 Progress and consistency is important By now, you’ve mastered loops like for, while, and do...while. But JavaScript also gives us **modern ways** to iterate over data efficiently and elegantly. These include iterators, for...of, and for...in — powerful tools to make your code more readable and expressive. Let’s dive deep and learn how to loop the smart way.

🧩 1️⃣ What is Iteration?

Iteration means “repeating a process.” In programming, it means going through each item in a collection like an array or object. In older JavaScript, you’d do this using a for loop, but modern JS gives simpler and safer alternatives.

🔹 2️⃣ for...of Loop

The for...of loop is used to iterate over **iterable objects** like arrays, strings, Maps, and Sets. It returns **values** directly (not indexes), making it ideal for reading data.

let languages = ["HTML", "CSS", "JavaScript", "React"];

for (let lang of languages) {
  console.log("Learning:", lang);
}

This prints each language one by one. Notice how clean it looks compared to traditional for loops — no counters, no indexing.

🧮 3️⃣ for...in Loop

The for...in loop is used for **objects** — it iterates over property names (keys).

let student = { name: "Rahul", age: 23, city: "Hyderabad" };

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

Use for...in for objects and for...of for arrays or lists. Mixing them can lead to confusion — this distinction keeps your code predictable and clean.

🧠 4️⃣ Iterating Strings with for...of

Strings are also iterable — so you can loop through each character.

let word = "JAVASCRIPT";
for (let char of word) {
  console.log(char);
}

⚙️ 5️⃣ Iterating Arrays with index

If you need both index and value while looping through an array:

let fruits = ["Apple", "Banana", "Cherry"];
for (let [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

🧩 6️⃣ Iterators & The Symbol.iterator

An **iterator** is a special object that defines how to access elements one by one. Every iterable object in JavaScript (like arrays and strings) has a built-in Symbol.iterator method.

let arr = ["A", "B", "C"];
let iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // {value: 'A', done: false}
console.log(iterator.next()); // {value: 'B', done: false}
console.log(iterator.next()); // {value: 'C', done: false}
console.log(iterator.next()); // {value: undefined, done: true}

This shows how JavaScript internally manages your loops. You can even create **custom iterators** if needed — useful for advanced patterns like generators.

🧠 7️⃣ Practice Task

1. Use for...of to print all elements in an array of city names.
2. Use for...in to print all keys in an object of your favorite book details.
3. Write a loop that prints each letter in a string using for...of.

🎯 Summary

Today, you explored modern iteration techniques: ✅ for...of for values, ✅ for...in for object keys, ✅ and Symbol.iterator for internal iteration logic. Tomorrow, we’ll dive into **Higher-Order Functions & Callbacks**, taking functional programming to the next level!

← Prev Next →