for...in and for...of Loops in JavaScript

🔄 Introduction

JavaScript provides two special looping statements:for...in and for...of. Although they look similar, they serve different purposes.

for...in iterates over an object's property names (keys), while for...of iterates over an iterable's values.

🗝️ for...in Loop

Use for...in when you want to iterate through the enumerable property names of an object.

🔤 Syntax

for...in Syntax

for (const key in object) {
  // code
}

📦 Example: Object

Loop Through Object Keys

const person = {
  name: "Alice",
  age: 25,
  city: "London"
};

for (const key in person) {
  console.log(key, person[key]);
}

Output

name Alice
age 25
city London

⚠️ Using with Arrays

Note

Although for...in works with arrays, it iterates over indexes (and other enumerable properties), so it is generally not recommended.

Not Recommended

const colors = ["Red", "Green", "Blue"];

for (const index in colors) {
  console.log(index);
}

🛡️ Ignore Inherited Properties

Using hasOwnProperty()

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key, person[key]);
  }
}

📦 for...of Loop

Use for...of to iterate over the values of an iterable such as arrays, strings, maps, sets, generators, and more.

🔤 Syntax

for...of Syntax

for (const value of iterable) {
  // code
}

📦 Example: Array

Loop Through Array Values

const colors = ["Red", "Green", "Blue"];

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

Output

Red
Green
Blue

🔤 Example: String

Loop Through Characters

const language = "JavaScript";

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

🗺️ Example: Map

Loop Through Map

const map = new Map([
  ["name", "Alice"],
  ["age", 25]
]);

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

🎯 Example: Set

Loop Through Set

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

for (const number of numbers) {
  console.log(number);
}

⚠️ Plain Objects Are Not Iterable

Note

for...of cannot iterate directly over plain objects.

Incorrect

const person = {
  name: "Alice",
  age: 25
};

for (const value of person) {
  console.log(value);
}

// TypeError: person is not iterable

✅ Iterate Over Object Values

Using Object.entries()

const person = {
  name: "Alice",
  age: 25
};

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

⚖️ for...in vs for...of

Comparison

const colors = ["Red", "Green", "Blue"];

console.log("for...in");
for (const index in colors) {
  console.log(index);
}

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

📊 Key Differences

  • for...in iterates over property keys.
  • for...of iterates over values.
  • for...in is mainly used for objects.
  • for...of works with iterable objects like arrays, strings, maps, sets, and generators.
  • Avoid using for...in with arrays.
  • Use Object.entries() when you want to use for...of with plain objects.

🧠 When to Use

  • for...in → Iterate object keys.
  • for...of → Iterate array values.
  • for...of → Iterate strings.
  • for...of → Iterate Maps and Sets.

📚 More to Explore

>>"Choose for...in for object properties and for...of for iterable values." 🚀