🔍 Understanding `of` in JavaScript – `for...of` Loop Deep Dive

In JavaScript, the keyword of is used in the for...of loop— not an operator , but a language construct that allows iteration over iterable objects.

📌 Syntax

for (const element of iterable) {
  // code block
}

• element: variable that holds the current value
• iterable: object with an internal iterator (e.g. Array, String, Map, etc.)

✅ Supported Iterables

🔁 Example: Array

const numbers = [10, 20, 30];

for (const num of numbers) {
  console.log(num); // 10, then 20, then 30
}

🔁 Example: String

for (const char of 'Hi') {
  console.log(char); // 'H', 'i'
}

🔁 Example: Map

const map = new Map([['a', 1], ['b', 2]]);

for (const [key, value] of map) {
  console.log(key, value); // 'a' 1, then 'b' 2
}

🚫 for...of vs for...in

🧪 Example Difference:

const arr = ['a', 'b'];

for (const i in arr) {
  console.log(i); // 0, 1 (indexes as strings)
}

for (const val of arr) {
  console.log(val); // 'a', 'b' (actual values)
}

🔍 Under the Hood

for...of uses the iterable protocol. When you do:

for (const x of iterable) {}

JS internally does:

const iterator = iterable[Symbol.iterator]();
let result;
while (!(result = iterator.next()).done) {
  const x = result.value;
  // loop body
}

🛠 When to Use for...of

• You want values, not keys.
• You’re dealing with iterable data (arrays, strings, sets, maps).
• You want cleaner syntax than .forEach() or manual for loops.
• You need break, continue, or return—which forEach doesn't support.

⚠️ Caveats

• Doesn't work on plain objects unless you make them iterable.
• Can’t use async await inside—use for await...of for that.

✅ Conclusion

The for...of construct is the canonical way to iterate over iterable values in modern JavaScript. It's readable, concise, and robust— avoid for...in for arrays or iterable data structures .