Objekte

Ein Objekt fasst zusammengehörige Werte unter Namen zusammen. In { name: "Coco", age: 3 } ergibt pet.name "Coco" und pet.age 3.

Werte mit Beschriftung

Ein Array eignet sich für eine geordnete Liste gleichartiger Dinge. Viele Dinge der Welt beschreibt man besser mit einer Reihe beschrifteter Fakten: Ein Haustier hat einen Namen, eine Art und ein Alter. Ein Produkt hat einen Titel, einen Preis und einen Lagerbestand. Genau das speichert ein Objekt. Es ist eine Sammlung von Eigenschaften, und jede Eigenschaft ist ein Schlüssel (die Beschriftung) zusammen mit einem Wert.

const pet = {
  name: "Coco",
  kind: "cat",
  age: 3,
};
console.log(pet.name);        // Coco
console.log(pet["kind"]);     // cat
console.log(pet.age + 1);     // 4

Ein Objekt schreibt man in geschweiften Klammern, jede Eigenschaft als key: value, mit Kommas dazwischen. Ein Komma nach der letzten Eigenschaft ist erlaubt. Um eine Eigenschaft zu lesen, schreibst du das Objekt, einen Punkt und den Schlüssel: pet.name. Die andere Form verwendet eckige Klammern und einen String, pet["kind"]. Eckige Klammern braucht man, wenn der Schlüssel in einer Variablen steht, wie in pet[field], oder wenn er ein Leerzeichen enthält. Einen Schlüssel zu lesen, den es nicht gibt, ergibt undefined.

Eigenschaften ändern und hinzufügen

Weise einer Eigenschaft etwas zu, um sie zu ändern, und einem neuen Schlüssel, um eine hinzuzufügen. Wie bei Arrays klappt das auch, wenn das Objekt mit const deklariert wurde, weil die Variable weiterhin auf dasselbe Objekt zeigt.

const player = { name: "Sam", score: 0 };
player.score += 10;
player.level = 2;
console.log(`${player.name} ${player.score} ${player.level}`);   // Sam 10 2
delete player.level;
console.log(player.level);   // undefined

Listen von Objekten

Arrays und Objekte lassen sich ganz natürlich kombinieren. Ein Array von Objekten ist die Art, wie die meisten Programme Datensätze halten: einen Warenkorb, eine Klassenliste, eine Reihe von Suchergebnissen. Du durchläufst das Array und liest aus jedem Objekt die Eigenschaften, die du brauchst.

const basket = [
  { item: "pen", price: 2 },
  { item: "book", price: 12 },
  { item: "bag", price: 25 },
];
let total = 0;
for (const line of basket) {
  total += line.price;
}
console.log("Total:", total);   // Total: 39

Werte in einem Objekt können alles sein, auch Arrays und andere Objekte. Mit const user = { name: "Ana", tags: ["admin", "editor"] }; erreichst du über user.tags[0] den Wert "admin". Lies solche Ketten von links nach rechts: bei user anfangen, zur Eigenschaft tags gehen, dann Index 0 nehmen.

Methoden und die Schlüssel eines Objekts

Eine Eigenschaft, deren Wert eine Funktion ist, heißt Methode. Du rufst die ganze Zeit schon Methoden auf: console.log ist die Methode log des Objekts console, und Math.round ist die Methode round von Math. Innerhalb einer Methode verweist das Schlüsselwort this auf das Objekt, an dem die Methode aufgerufen wurde, so kann eine Methode die Eigenschaften ihres eigenen Objekts lesen. Und schließlich ergibt Object.keys(pet) ein Array der Schlüssel, hier ["name", "kind", "age"]. Das ist praktisch, um jede Eigenschaft zu durchlaufen.

const counter = {
  count: 0,
  add() {
    this.count++;
  },
};
counter.add();
counter.add();
console.log(counter.count);   // 2

Durchgerechnetes Beispiel. Ein Bücher-Datensatz { title: "Notes", pages: 120, read: 45 } kann mit Math.round(book.read / book.pages * 100) den Fortschritt melden, das ergibt 38, also 38 Prozent. Weil die Werte pages und read heißen, ist die Formel so lesbar, wie es b[1] / b[0] nie wäre.

Array oder Objekt?

Ein schneller Test entscheidet, was du nimmst. Sind die Werte gleichartig und ist ihre Reihenfolge wichtig, etwa die Punktzahlen einer Klasse oder die Schritte eines Rezepts, nimm ein Array und greif über die Position zu. Sind die Werte verschiedene Fakten über eine Sache, etwa Name, Preis und Bestand eines Produkts, nimm ein Objekt und greif über den Namen zu. Die meisten echten Daten mischen beides: ein Array von Produkten, in dem jedes Produkt ein Objekt ist. Gibst du in der Übungsbox ein Objekt aus, siehst du es in kompakter Form wie {"name":"Coco","age":3}. Einzelne Eigenschaften zu lesen, ergibt eine sauberere Ausgabe.