JavaScript-Objekte: erstellen, lesen, ändern und durchlaufen

Im vorigen Kapitel haben Funktionen Anweisungen gebündelt. Objekte bündeln Daten: ein Benutzer, ein Produkt, eine API-Antwort sind Objekte. Es ist die Struktur, mit der du in JavaScript am häufigsten arbeitest, und dieses Kapitel geht sie komplett durch, von der Erzeugung bis zur Kopie.

Was ist ein Objekt in JavaScript?

Ein Objekt ist eine Sammlung von Eigenschaften, jede aus einem Schlüssel (einem Namen) und einem Wert. Der Wert kann von beliebigem Typ sein: String, Zahl, Boolean, Array, ein weiteres Objekt oder eine Funktion. Wenn du die Dictionaries aus Python oder die assoziativen Arrays aus PHP kennst, ist es dieselbe Idee.

const personne = {
  nom: 'Jean',
  age: 30,
  ville: 'Lille',
  actif: true,
  langues: ['français', 'anglais'],
};

Die geschweiften Klammern begrenzen das Objekt, jede Eigenschaft schreibt sich clé: valeur, die Eigenschaften werden durch Kommas getrennt. Ein abschließendes Komma nach der letzten Eigenschaft ist erlaubt und erleichtert das Ergänzen.

Ein Objekt erstellen

Die Literal-Schreibweise

Sie steckt im Beispiel oben und ist in den allermeisten Fällen die richtige Form. Ein leeres Objekt schreibt sich {} und lässt sich anschließend füllen:

const telephone = {};
telephone.marque = 'Sony';
telephone.prix = 400;
telephone.stock = 200;

console.log(telephone); // { marque: 'Sony', prix: 400, stock: 200 }

Eine Konstruktorfunktion

Wenn mehrere Objekte derselben Form nötig sind, erzeugt sie eine Funktion, die mit new aufgerufen wird. Darin bezeichnet this das gerade entstehende Objekt.

function Telephone(marque, prix, stock) {
  this.marque = marque;
  this.prix = prix;
  this.stock = stock;
  this.enStock = function () {
    return this.stock > 0;
  };
}

const motoZ = new Telephone('Motorola', 400, 200);
const miMax = new Telephone('Xiaomi', 200, 0);

console.log(motoZ.enStock()); // true
console.log(miMax.enStock()); // false

Diese Schreibweise ist der Vorläufer der Klassen, die später folgen: class Telephone { constructor(marque, prix, stock) { … } } macht dasselbe mit klarerer Syntax. In bestehendem Code begegnen dir Konstruktorfunktionen weiterhin.

Auch new Object() erzeugt ein leeres Objekt, bringt aber nichts gegenüber {}: diese Form wird nicht mehr verwendet.

Eine Eigenschaft lesen

Zwei Schreibweisen, im einfachen Fall gleichwertig:

console.log(personne.nom);     // 'Jean'   : Punktschreibweise
console.log(personne['nom']);  // 'Jean'   : Klammerschreibweise

In zwei Situationen sind die eckigen Klammern unverzichtbar: wenn der Schlüssel in einer Variablen steckt und wenn er Zeichen enthält, die nach einem Punkt nicht möglich sind.

const cle = 'age';
console.log(personne[cle]);            // 30 : der Schlüssel kommt aus einer Variablen

const fiche = { 'prénom complet': 'Jean Dupont' };
console.log(fiche['prénom complet']);  // 'Jean Dupont' : Leerzeichen im Schlüssel

Eine Eigenschaft zu lesen, die es nicht gibt, löst keinen Fehler aus: das Ergebnis ist undefined.

console.log(personne.pays);   // undefined

Der Zugriff auf eine Eigenschaft einer fehlenden Eigenschaft bricht dagegen ab: personne.adresse.ville wirft „Cannot read properties of undefined“. Optional Chaining mit ?. verhindert den Fehler:

console.log(personne.adresse?.ville);   // undefined, ohne Fehler

Ändern und hinzufügen

Dieselbe Zuweisung ändert eine vorhandene Eigenschaft oder legt eine neue an:

personne.age = 31;            // Änderung
personne.pays = 'France';     // Hinzufügen: die Eigenschaft gab es noch nicht
personne['ville'] = 'Lyon';   // Änderung, Klammerschreibweise

console.log(personne.age, personne.pays, personne.ville);   // 31 'France' 'Lyon'

Achtung bei const: es verhindert, die Variable personne einem anderen Objekt zuzuweisen, nicht aber das Objekt selbst zu ändern. Das ist so gewollt und praktisch. Wer jede Änderung unterbinden will, friert das Objekt mit Object.freeze(personne) ein (Zuweisungen werden dann im nicht strikten Modus ignoriert, im strikten Modus abgelehnt).

Eine Eigenschaft löschen und ihr Vorhandensein prüfen

delete personne.pays;

console.log(personne.pays);                 // undefined
console.log('pays' in personne);            // false : den Schlüssel gibt es nicht mehr
console.log(Object.hasOwn(personne, 'nom')); // true  : der Schlüssel existiert, eigene Eigenschaft

delete entfernt die Eigenschaft. Um einen Schlüssel zu prüfen, nimm lieber in oder Object.hasOwn() als einen Test auf undefined: eine Eigenschaft kann mit dem Wert undefined existieren.

Methoden: Funktionen im Objekt

Eine Eigenschaft, deren Wert eine Funktion ist, heißt Methode. In einer Methode bezeichnet this das Objekt, das sie enthält.

const personne = {
  nom: 'Ana',
  naissance: 1996,
  saluer() {
    return `Salut, je suis ${this.nom}`;
  },
  age() {
    return 2026 - this.naissance;
  },
};

console.log(personne.saluer()); // 'Salut, je suis Ana'
console.log(personne.age());    // 30

Ein Objekt durchlaufen

Drei statische Methoden geben den Inhalt eines Objekts als Array zurück, sodass alles gilt, was du über Schleifen weißt:

const produit = { nom: 'Clavier', prix: 49.9, stock: 12 };

console.log(Object.keys(produit));    // ['nom', 'prix', 'stock']
console.log(Object.values(produit));  // ['Clavier', 49.9, 12]
console.log(Object.entries(produit)); // [['nom', 'Clavier'], ['prix', 49.9], ['stock', 12]]

for (const [cle, valeur] of Object.entries(produit)) {
  console.log(`${cle} : ${valeur}`);
}
// nom : Clavier
// prix : 49.9
// stock : 12

console.log(Object.keys(produit).length);   // 3 : die „Anzahl der Eigenschaften“

Es gibt auch die Schleife for…in, die direkt über die Schlüssel läuft. Sie liefert allerdings auch vom Prototyp geerbte Eigenschaften, was bei Objekten aus Bibliotheken für Überraschungen sorgt: Object.keys() mit for…of ist die Standardwahl.

for (const cle in produit) {
  console.log(cle);   // nom, prix, stock
}

Die Gegenrichtung, aus Paaren wieder ein Objekt bauen, übernimmt Object.fromEntries():

Object.fromEntries([['a', 1], ['b', 2]]);   // { a: 1, b: 2 }

Verschachtelte Objekte und Arrays von Objekten

Ein Wert kann selbst ein Objekt sein: so bildet man eine Struktur ab. Und ein Array von Objekten ist die häufigste Form für Daten aus einer API.

const commande = {
  numero: 1042,
  client: {
    nom: 'Jean',
    adresse: { ville: 'Lille', codePostal: '59000' },
  },
  lignes: [
    { produit: 'Clavier', prix: 49.9, quantite: 1 },
    { produit: 'Souris', prix: 19.5, quantite: 2 },
  ],
};

console.log(commande.client.adresse.ville);   // 'Lille'
console.log(commande.lignes[1].produit);      // 'Souris'

let total = 0;
for (const ligne of commande.lignes) {
  total += ligne.prix * ligne.quantite;
}
console.log(total);   // 88.9

Daten von einem Server kommen als JSON-Text an, dessen Syntax die der Objektliterale ist: JSON.parse(texte) macht daraus ein Objekt, JSON.stringify(objet) den umgekehrten Weg.

Ein Objekt ohne Überraschungen kopieren

Ein Objekt einer anderen Variablen zuzuweisen kopiert es nicht: beide Variablen zeigen auf dasselbe Objekt im Speicher.

const original = { nom: 'Jean', adresse: { ville: 'Paris' } };

const alias = original;
alias.nom = 'Paul';
console.log(original.nom);   // 'Paul' : das war keine Kopie

Der Spread-Operator kopiert die erste Ebene, verschachtelte Objekte bleiben aber geteilt:

const copie = { ...original };
copie.nom = 'Marie';
copie.adresse.ville = 'Lyon';

console.log(original.nom);            // 'Paul'  : die erste Ebene wurde kopiert
console.log(original.adresse.ville);  // 'Lyon'  : das verschachtelte Objekt ist geteilt

Für eine vollständige, auf allen Ebenen unabhängige Kopie ist structuredClone() die vorgesehene Funktion:

const clone = structuredClone(original);
clone.adresse.ville = 'Nice';

console.log(original.adresse.ville);  // 'Lyon' : das Original hat sich nicht verändert

structuredClone kopiert keine Methoden: nimm es nur für Datenobjekte. Und Object.assign(cible, source) führt Objekte zusammen, mit derselben flachen Kopie wie der Spread-Operator.

Überblick

Auf dem Weg zur objektorientierten Programmierung

Wenn mehrere Objekte dieselbe Form und dieselben Methoden teilen, beschreibt man sie einmal in einer Klasse und erzeugt daraus Instanzen mit new. Das ist die natürliche Fortsetzung dieses Kapitels: Klassen in JavaScript und Einführung in Klassen und Objekte (ES6). Zunächst stellt das nächste Kapitel ein von der Sprache mitgeliefertes Objekt vor, Math, und seine Methoden.