for...of und for...in in JavaScript richtig nutzen

Zwei Schleifen, zwei völlig verschiedene Aufgaben

In JavaScript gibt es zwei Schleifenformen, die fast identisch aussehen, aber ganz unterschiedliche Dinge tun. for...of läuft über die Werte eines iterierbaren Objekts. for...in läuft über die Schlüssel eines Objekts. Ein einziger Buchstabe Unterschied – und das Verhalten ist komplett anders.

Hier ist die ganze Geschichte in einem einzigen Beispiel:

Die erste Schleife gibt apple, banana, cherry aus – also die Werte. Die zweite liefert 0, 1, 2 – die Keys, und zwar als Strings. Greifst du zur falschen Variante, wunderst du dich zehn Minuten lang, warum dein Array plötzlich nur aus Zahlen besteht.

for...of: Werte aus jedem iterierbaren Objekt

for...of ist die Schleife, die du in der Praxis am häufigsten brauchst. Sie funktioniert mit allem, was JavaScript als iterierbar betrachtet: Arrays, Strings, Map, Set, NodeList, Generatoren und vieles mehr.

Kein Gefummel mit Indizes, kein scores[i]. Du fragst nach den Werten – und bekommst die Werte. Strings sind übrigens auch iterierbar, for...of läuft sie Zeichen für Zeichen durch:

Das funktioniert auch mit den meisten Unicode-Codepoints zuverlässig – ein kleiner, aber echter Vorteil gegenüber dem Zugriff auf einen String per numerischem Index.

Index in einer for...of-Schleife bekommen

Was for...of dir nicht direkt liefert, ist die Position. Wenn du sie brauchst, kombiniere die Schleife einfach mit entries():

names.entries() liefert [index, value]-Paare, die per Destructuring sauber in zwei Variablen landen. Das liest sich in der Regel deutlich eleganter, als nur wegen des Index auf eine klassische for (let i = 0; ...)-Schleife zurückzufallen.

for...in: Schlüssel eines Objekts iterieren

for...in ist für klassische Objekte gemacht. Die Schleife läuft über die aufzählbaren String-Schlüssel:

Beachte: Du bekommst den Schlüssel, nicht den Wert. Um an den Wert zu kommen, greifst du per user[key] wieder auf das Objekt zu. Jeder Schlüssel ist dabei ein String – auch wenn er wie eine Zahl aussieht.

for...in läuft außerdem die Prototype-Kette hoch und fördert damit auch geerbte Eigenschaften zutage. Bei eigenen Objektliteralen spielt das selten eine Rolle, aber sobald du über Instanzen einer Klasse oder über Objekte aus einer Library iterierst, solltest du lieber auf Nummer sicher gehen:

Object.hasOwn(user, key) überspringt alles Geerbte. In modernem Code verzichten die meisten komplett auf for...in und greifen stattdessen zu Object.keys, Object.values oder Object.entries – womit wir direkt beim nächsten Abschnitt wären.

Objekte iterieren in modernem JavaScript

Statt for...in kombinierst du besser for...of mit einem der Object.*-Helfer. Welchen der drei du nimmst, hängt davon ab, was du tatsächlich brauchst:

Object.entries ist dabei besonders angenehm – das Destructuring des [key, value]-Paars liest sich fast wie ein Satz. Und weil diese Methoden nur die eigenen enumerierbaren Eigenschaften des Objekts zurückgeben, musst du dir um geerbten Ballast keine Gedanken machen.

for...in gehört nicht auf Arrays

Technisch ist es erlaubt, aber es sorgt regelmäßig für Stolperfallen:

Du bekommst 0, 1, 2 – und tag. Jede Property, die irgendjemand an das Array drangehängt hat (oder via Polyfill an Array.prototype), taucht ebenfalls auf. Die Keys sind Strings, also macht key + 1 eine Konkatenation statt einer Addition. Und die Reihenfolge der Iteration ist nicht in allen Grenzfällen garantiert dieselbe wie die Array-Reihenfolge.

Faustregel:

• Nur die Array-Werte? for...of arr.
• Index und Wert aus einem Array? for...of arr.entries().
• Nur den Index, klassisch hochzählen? for (let i = 0; i < arr.length; i++).
• Keys oder Einträge eines Objekts? Object.keys(obj) bzw. Object.entries(obj) zusammen mit for...of.

Kurz gesagt: for...in ist ein Nischenwerkzeug. Mit for...of plus den Object-Helfern deckst du alles ab, was du im Alltag brauchst.

break und continue funktionieren in beiden

Beide Schleifen unterstützen die üblichen Abbruch- und Sprungbefehle:

continue springt zur nächsten Iteration, break verlässt die Schleife komplett. Genau das ist auch der Hauptgrund, warum man for...of oft gegenüber .forEach() bevorzugt: Aus einem forEach-Callback kannst du nicht per break aussteigen, bei for...of dagegen schon.

for of vs for in – der direkte Vergleich

Vier Schleifen, vier Aufgaben, ein gemeinsames Denkmodell: Wenn du Werte aus etwas Iterierbarem herausholen willst, nimm for...of. Wenn du mit den Eigenschaften eines Objekts arbeiten möchtest, gehst du über Object.keys / Object.values / Object.entries – ebenfalls in Kombination mit for...of. for...in bleibt für den seltenen Fall reserviert, in dem du wirklich alle aufzählbaren String-Keys eines Objekts brauchst, inklusive geerbter.

Als Nächstes: Truthy und Falsy

Jede Schleife und jedes if in JavaScript stellt am Ende dieselbe Frage: Gilt dieser Wert als wahr? Und die Antwort ist nicht immer offensichtlich – leere Strings, die Null, null und undefined verhalten sich oft anders, als man denkt. Im nächsten Kapitel schauen wir uns Truthy- und Falsy-Werte genauer an.