Objekte aufzählen in JavaScript

Inhaltsverzeichnis

Arrays verfügen in JavaScript über eine forEach-Funktion, mit der man bequem über die einzelnen Elemente iterieren kann. Ein Äquivalent für Objekte fehlt leider. Die Kombination einiger moderner Sprachmerkmale schafft Abhilfe.

Will man in JavaScript über ein Array iterieren, gibt es verschiedene Optionen. Dazu zählen beispielsweise die klassische for-Schleife, aber auch die forEach-Funktion, die für jedes einzelne Element eine Funktion aufruft:

[ 2, 3, 5, 7, 11 ].forEach(prime => {
  console.log(prime);
});

Sofern der Index des jeweiligen Elements nicht relevant ist, stellt diese Funktion eine elegante Möglichkeit dar, alle Elemente zu durchlaufen.

Der Wermutstropfen: Die forEach-Funktion steht nur für Arrays zur Verfügung. Ein Äquivalent für Objekte fehlt in JavaScript leider.

Object.keys und Object.values

Seit ECMAScript 2015 steht an Objekten aber zumindest die statische keys-Funktion zur Verfügung, seit ECMAScript 2017 zusätzlich die values-Funktion. Diese beiden Funktionen geben die Liste der Schlüssel beziehungsweise der Werte eines Objekts zurück:

const person = {
  firstName: 'Jane',
  lastName: 'Doe'
};

console.log(Object.keys(person));
// => [ 'firstName', 'lastName' ]

console.log(Object.values(person));
// => [ 'Jane', 'Doe' ]

Kombiniert man das mit der forEach-Funktion von Arrays, lässt sich zumindest über die Schlüssel beziehungsweise Werte auf einfachem Weg iterieren. Trotzdem löst das die Aufgabe noch nicht, die einzelnen Schlüssel-Wert-Paare zu durchlaufen.

Object.entries + for of

Dazu steht seit ECMAScript 2017 aber zusätzlich die statische entries-Funktion zur Verfügung, die die Schlüssel-Wert-Paare als Array von Arrays zurückgibt:

console.log(Object.entries(person));
// => [[ 'firstName', 'Jane' ], [ 'lastName', 'Doe' ]]

Das äußere Array lässt sich nun selbstverständlich auch mit der forEach-Funktion durchlaufen, doch es gibt noch einen besser passenden Weg: Seit ECMAScript 2015 steht mit der for-of-Schleife nämlich eine weitere Schleife zur Verfügung, um unter anderem Arrays zu durchlaufen. Das Iterieren eines Objekts lässt sich also wie folgt umsetzen:

for (const keyValuePair of Object.entries(person)) {
  console.log(keyValuePair[0], keyValuePair[1]);
}

Array-Destructuring

Unschön daran ist allerdings der Zugriff auf den Schlüssel und den Wert per Index. Eleganter lässt sich das wiederum mit dem sogenannten Array-Destructuring lösen:

for (const keyValuePair of Object.entries(person)) {
  const [ key, value ] = keyValuePair;

  console.log(key, value);
}

Doch das Beispiel lässt sich noch weiter optimieren. Da das Destructuring direkt zu Beginn der Schleife stattfindet und keyValuePair danach nicht weiter gebraucht wird, kann das Destructuring auch direkt im Kopf der Schleife stattfinden:

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

Damit ist das Ziel erreicht, mit wenig Aufwand durch ein Objekt zu iterieren. Wer will, kann das nun in einer eigenen forEach-Schleife kapseln, mit der sich Objekte dann analog zu Arrays durchlaufen lassen:

const forEach = function (obj, fn) {
  for (const [ key, value ] of Object.entries(obj)) {
    fn(key, value);
  }
};

forEach(person, (key, value) => {
  console.log(key, value);
});

tl;dr: JavaScript kennt keine forEach-Schleife für Objekte. Der Einsatz von modernen Sprachmitteln wie der Funktion Object.entries und der for-of-Schleife ermöglicht aber das einfache und elegante Nachbauen einer solchen Schleife. ()