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

jsgeneral-conceptshard

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

Type	Works with `for...of`
`Array`	✅
`String`	✅
`Map`,`Set`	✅
`arguments`	✅ (in ES6+)
`NodeList`	✅ (browser)
`Object`	❌ (not iterable)

🔁 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`

Feature	`for...of`	`for...in`
Iterates over	Values	Keys (property names)
Works on objects	❌ (unless iterable)	✅
Use for arrays	✅ Recommended	❌ Avoid — includes inherited keys
Order	Preserved (iterators)	Not guaranteed

🧪 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 .

Quick Quiz

Test your understanding with 3 quick questions

Q1What does `for...of` iterate over?

Q2Which of the following can you iterate with `for...of`?

Q3What is the key difference between `for...of` and `for...in`?

Type

Works with for...of

Array

✅

String

✅

Map,Set

✅

arguments

✅ (in ES6+)

NodeList

✅ (browser)

Object

❌ (not iterable)

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

Feature	`for...of`	`for...in`
Iterates over	Values	Keys (property names)
Works on objects	❌ (unless iterable)	✅
Use for arrays	✅ Recommended	❌ Avoid — includes inherited keys
Order	Preserved (iterators)	Not guaranteed

🧪 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)
}

✅ Conclusion

Quick Quiz

Test your understanding with 3 quick questions

Q1What does `for...of` iterate over?

Q2Which of the following can you iterate with `for...of`?

Q3What is the key difference between `for...of` and `for...in`?

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

📌 Syntax

✅ Supported Iterables

🔁 Example: Array

🔁 Example: String

🔁 Example: Map

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

🧪 Example Difference:

🔍 Under the Hood

🛠 When to Use for...of

⚠️ Caveats

✅ Conclusion

Continue Reading

🛑 AbortController: Canceling Async Operations in JavaScript

🔒 Closures in JavaScript — The Complete Guide

📦 Understanding ES6 Modules in JavaScript

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

📌 Syntax

✅ Supported Iterables

🔁 Example: Array

🔁 Example: String

🔁 Example: Map

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

🧪 Example Difference:

🔍 Under the Hood

🛠 When to Use for...of

⚠️ Caveats

✅ Conclusion

Continue Reading

🛑 AbortController: Canceling Async Operations in JavaScript

🔒 Closures in JavaScript — The Complete Guide

📦 Understanding ES6 Modules in JavaScript

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

🛠 When to Use `for...of`

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

🛠 When to Use `for...of`