Was ist ein Objekt?
Bisher enthielt jede Variable einen einzigen Wert: eine Zahl, einen Text oder ein Array aus gleichartigen Werten. In dieser Lektion lernst du Objekte kennen. Ein Objekt fasst mehrere Werte zusammen, die ein Ding beschreiben.
Stell dir eine Zoohandlung vor, die über ihre Tiere Buch führt. Jedes Tier hat einen Namen, eine Art und ein Alter. Du könntest sie in einzelnen Variablen speichern:
const tierName = "Rex";
const tierArt = "Hund";
const tierAlter = 3;Für ein Tier funktioniert das, aber für zehn Tiere bräuchtest du dreißig Variablen, und nichts im Code würde sagen, welche davon zusammengehören. Du könntest die Werte stattdessen in ein Array packen:
const tier = ["Rex", "Hund", 3];Jetzt sind sie zusammen, aber du musst dir merken, dass der Index 0 der Name ist und der Index 1 die Art. Und was bedeutet tier[2]? Der Code verrät es dir nicht.
Ein Objekt löst beide Probleme. Es hält die Werte zusammen und gibt jedem von ihnen einen Namen:
const tier = {
name: "Rex",
art: "Hund",
alter: 3
};Ein Objekt wird in geschweiften Klammern { } geschrieben. Darin stehen seine Eigenschaften, durch Kommas getrennt. Jede Eigenschaft hat einen Schlüssel (ihren Namen: name, art, alter), dann einen Doppelpunkt und einen Wert. Schreibe Schlüssel wie Variablennamen, ohne Anführungszeichen. Ein Wert kann alles sein, was du kennst: ein Text, eine Zahl, ein Boolean, sogar ein Array.
Ein kurzes Objekt passt in eine Zeile; ein längeres liest sich leichter, wenn jede Eigenschaft in einer eigenen Zeile steht, wie oben. Beides bedeutet dasselbe. Wenn du ein Objekt ausgibst, zeigt die Konsole es in einer Zeile an, so wie es im Code geschrieben wird:
const tier = { name: "Rex", art: "Hund", alter: 3 };
console.log(tier);{ name: "Rex", art: "Hund", alter: 3 }Wie bei Arrays solltest du ein Objekt nicht mit + an einen Text hängen: "Tier: " + tier macht aus dem Objekt den Text [object Object], der nicht viel verrät. Setze stattdessen ein Komma dazwischen: console.log("Tier:", tier).
Beim Schreiben von Objekten passieren zwei typische Fehler. Wenn du das Komma zwischen zwei Eigenschaften vergisst:
const tier = { name: "Rex" art: "Hund" };endet das Programm mit SyntaxError: Unexpected identifier 'art': JavaScript hat keinen weiteren Schlüssel ohne ein Komma davor erwartet. Und in den geschweiften Klammern schreibst du einen Doppelpunkt, kein =:
const tier = { name = "Rex" };Das endet mit SyntaxError: Invalid shorthand property initializer. Die Meldung hilft nicht viel, also merke sie dir: Wenn du sie siehst, suche nach einem = in geschweiften Klammern.
So schreibst du es:
Anweisungen
- 1
Lösche die drei Variablen und das
console.log. Erstelle stattdessen eine Konstantetier, die ein Objekt mit diesen Eigenschaften enthält, in dieser Reihenfolge:namemit dem Wert"Rex",artmit"Hund",altermit3undgeimpftmittrue. Gib es mitconsole.log(tier);aus. Die Konsole sollte{ name: "Rex", art: "Hund", alter: 3, geimpft: true }anzeigen. - 2
Gib das Objekt darunter noch einmal aus, diesmal mit der Beschriftung
Tier:davor. Trenne die Beschriftung und das Objekt durch ein Komma. Die neue Zeile sollteTier: { name: "Rex", art: "Hund", alter: 3, geimpft: true }lauten.