Der Unterschied zwischen for...of und for...in in JavaScript ist sehr wichtig, weil sie für völlig unterschiedliche Zwecke gedacht sind:

🔁 for...in – über Objekteigenschaften (Keys) iterieren

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log(key);        // a, b, c
  console.log(obj[key]);   // 1, 2, 3
}

✅ Verwendet man für:

• Objekte {} – um Eigenschaftsnamen (Schlüssel) zu durchlaufen
• Auch bei Arrays möglich, aber nicht empfohlen

⚠️ Problematisch bei Arrays:

const arr = [10, 20, 30];
for (const i in arr) {
  console.log(i);       // "0", "1", "2" (als String!)
  console.log(arr[i]);  // 10, 20, 30
}

→ Schlechte Praxis, weil:

• i ist ein String, kein Zahlindex
• Auch vererbte Eigenschaften werden iteriert

🔁 for...of – über Iterable-Werte iterieren

const arr = [10, 20, 30];

for (const value of arr) {
  console.log(value); // 10, 20, 30
}

✅ Verwendet man für:

• Arrays []
• Strings (for (const char of "abc"))
• Sets, Maps, Typed Arrays, Generatoren, u. a.
• Alles, was ein [Symbol.iterator]() hat

🧪 Vergleich in einem Satz:

🧠 Merksatz:

in ist für Index/Key,
of ist für Wert/Element