for…of Loop in JavaScript

Easy, Effective, and the Kind of Iteration That Makes You Say

“Why Didn’t I Use This Earlier?” 🔁✨

At some point in JavaScript, you reach that moment…
You’re writing code, everything’s going fine.
Then someone says:

“Loop through the items in this array one by one.”

And you instinctively do this:

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

Then, quietly, inside your head:

“Isn’t this a bit… long?” 😐

That’s when for…of looks at you and says:

“Come on… don’t overcomplicate it.”

What Is for…of? (In Human Language)

for…of lets you iterate over values inside iterable structures.

What does “iterable” mean?

If you can answer “yes” to this question, it’s iterable:

“Can I go through its contents one by one?”

✔ Array
✔ String
✔ Set
✔ Map
✔ NodeList (from the DOM)

❌ Plain objects {} (we’ll get to that)

The Basic Structure of for…of (Anatomy 🧠)

for (const item of iterable) {
  // do something
}

You can read this as:

“For each item inside this iterable, do this…”

Why is this so nice?

• No i
• No length
• No array[i]
• No brain overheating 🔥❌

The Simplest Example: for…of with an Array

const colors = ["red", "blue", "green"];

for (const color of colors) {
  console.log(color);
}

Step by Step — What’s Happening?

1️⃣ The loop starts
2️⃣ The first item of colors is taken → "red"
3️⃣ It’s assigned to the variable color
4️⃣ console.log(color) runs
5️⃣ Move on to the next item

📌 Important:
Here, color is not an index, it’s the actual value.

Classic for vs for…of (A Little Gossip 😄)

Classic for (Disciplined but cold)

for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

• You manage the index yourself
• One accidental i <= length and it’s game over
• More code, more chances to mess up

for…of (Relaxed, chill 😎)

for (const color of colors) {
  console.log(color);
}

• “Here’s the value, just use it”
• More readable
• Fewer mistakes

🧠 Readability rule:
Code is written for humans, not just computers.

for…of with Strings (A Little Bit of Magic 🪄)

const word = "JavaScript";

for (const char of word) {
  console.log(char);
}

📤 Output:

J
a
v
a
S
c
r
i
p
t

Why Is This Cool?

• Iterates character by character
• Handles emojis correctly (huge detail!)

for (const emoji of "🔥🚀") {
  console.log(emoji);
}

Older techniques didn’t always handle this properly.

for…of with Set (Hello, Duplicate Haters 👋)

const uniqueNumbers = new Set([1, 2, 2, 3, 4]);

for (const num of uniqueNumbers) {
  console.log(num);
}

📌 About Set:

• Stores each value only once
• Iterates in order

for…of feels right at home here.

for…of with Map (Professional Level 🎩)

const user = new Map([
  ["name", "Cansu"],
  ["age", 26],
  ["role", "Frontend Developer"]
]);

for (const entry of user) {
  console.log(entry);
}

📤 Output:

["name", "Cansu"]
["age", 26]
["role", "Frontend Developer"]

But we can do better 😌

Using Destructuring

for (const [key, value] of user) {
  console.log(`${key}: ${value}`);
}

🎯 Clean
🎯 Readable
🎯 Strong “I know what I’m doing” energy

for…of vs for…in (The Most Confusing Topic ⚠️)

What does for…in do?

• Returns keys / indexes

const arr = ["a", "b", "c"];

for (const i in arr) {
  console.log(i);
}

📤 Output:

0
1
2

What does for…of do?

• Returns values

for (const val of arr) {
  console.log(val);
}

📤 Output:

a
b
c

📌 Golden rule:

• Arrays → 90% of the time, use for…of
• Objects → for…in or Object.entries

Why Doesn’t for…of Work on Plain Objects?

const person = { name: "Cansu", age: 26 };

for (const item of person) {
  console.log(item); // ❌ TypeError
}

Because plain objects are not iterable.

The Solution: Object.entries

for (const [key, value] of Object.entries(person)) {
  console.log(key, value);
}

🧠 for…of + entries = 💖

break and continue with for…of (We’re in Control 🕹️)

break

for (const num of [1, 2, 3, 4, 5]) {
  if (num === 3) break;
  console.log(num);
}

📤 Output:

1
2

continue

for (const num of [1, 2, 3, 4, 5]) {
  if (num === 3) continue;
  console.log(num);
}

📤 Output:

1
2
4
5

📌 You don’t get this flexibility so easily with map or forEach.

When Is for…of a Perfect Choice?

✔ When only values matter
✔ When you want readable code
✔ When you want to stop the loop if needed
✔ When working with Array / String / Map / Set

When Should You Avoid It?

❌ When you need the index
❌ When looping directly over plain objects
❌ When you need support for fossil browsers like IE 🦖

Mini Tips Corner 💡

🔹 Use const → the value doesn’t change
🔹 Performance is more than good enough
🔹 A favorite of clean-code lovers
🔹 Makes reviewers say “nice” 😄

Short but Effective Summary

• for…of = simple + powerful
• Value-focused
• Boosts readability 🚀
• Feels modern in JavaScript

And if one day you think:

“This loop looks kind of ugly…”

You already know the answer:

Write for…of and move on. 😎