Objekte anlegen und lesen

Ein Array hält Dinge in einer Reihe, und die Position ist alles, was du über einen Eintrag weißt. Das reicht, solange alle Einträge dasselbe bedeuten. Sobald sie es nicht mehr tun, brauchst du Namen.

01 / 04Ein Objekt schreiben

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Ein Objekt: geschweifte Klammern, darin Paare aus Schlüssel,
// Doppelpunkt und Wert, getrennt durch Kommas.
const kurs = {
  titel: "JavaScript",
  stunden: 47,
  frei: true,
};

console.log(kurs);
console.log("Titel:", kurs.titel);
console.log("Stunden:", kurs.stunden);

// Ein Wert darf alles sein, auch eine Liste oder ein weiteres Objekt.
const kursMitListe = {
  titel: "CSS",
  themen: ["Farben", "Layout", "Animation"],
};

console.log("Erstes Thema:", kursMitListe.themen[0]);

Ein Objekt steht in geschweiften Klammern. Darin stehen Paare: ein Schlüssel, ein Doppelpunkt, ein Wert, und zwischen den Paaren ein Komma. Der Schlüssel ist der Name, unter dem der Wert später zu finden ist.

Als Wert ist alles erlaubt, was du bisher kennst. Eine Zahl, ein Text, ein Wahrheitswert, eine Liste, ein weiteres Objekt. Auch eine Funktion, aber das ist Lektion 7.3.

Das letzte Paar darf ein Komma hinter sich haben, und die meisten schreiben es hin. Der Grund ist praktisch: wenn du später eine Zeile anhängst, musst du die vorherige nicht anfassen, und das macht die Änderung im Diff kleiner.

Ein Objekt gehört fast immer in ein const. Warum das kein Widerspruch dazu ist, dass man es gleich in Lektion 7.2 verändert, klärt die nächste Lektion.

02 / 04Wann Objekt, wann Array

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Erst als Liste. Die Zahlen sagen nichts darüber, was drinsteht.
const alsListe = ["JavaScript", 47, true];
console.log("Titel:", alsListe[0]);
console.log("Stunden:", alsListe[1]);

// Dasselbe als Objekt. Jetzt steht die Bedeutung daneben.
const alsObjekt = { titel: "JavaScript", stunden: 47, frei: true };
console.log("Titel:", alsObjekt.titel);
console.log("Stunden:", alsObjekt.stunden);

// Für gleichartige Dinge bleibt die Liste richtig. Hier ist jeder
// Eintrag dasselbe, nur ein anderer Kurs.
const kurse = ["HTML", "CSS", "JavaScript"];
console.log("Wie viele Kurse:", kurse.length);

Die Entscheidung ist einfacher, als sie aussieht, und es gibt eine Faustregel dafür.

Array, wenn die Teile gleichartig sind und nur die Reihenfolge zählt. Objekt, wenn die Teile verschiedene Bedeutungen haben. Eine Liste von Kursnamen ist ein Array, denn jeder Eintrag ist dasselbe. Ein einzelner Kurs mit Titel, Stundenzahl und Preis ist ein Objekt, denn diese drei sind eben nicht dasselbe.

Das Beispiel zeigt, was passiert, wenn man sich vertut. In alsListe[1] steckt die Stundenzahl, aber das sieht man der 1 nicht an. Wer den Code drei Monate später liest, muss nachzählen. Bei alsObjekt.stunden steht es da.

In der Praxis kommt meistens beides zusammen vor: ein Array aus Objekten. Genau diese Form wertet die Synthese in Lektion 7.8 aus.

03 / 04Zwei Wege zum Wert

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const kurs = {
  titel: "JavaScript",
  stunden: 47,
  "letzte Änderung": "2026-08-04",
};

// Der Punkt ist der Normalfall.
console.log(kurs.titel);

// Eckige Klammern brauchst du, wenn der Name erst zur Laufzeit
// feststeht. In den Klammern steht ein Text.
const feld = "stunden";
console.log(kurs[feld]);

// Und wenn der Name ein Leerzeichen enthält, geht der Punkt nicht.
console.log(kurs["letzte Änderung"]);

// Achtung: kurs["stunden"] und kurs[feld] sind dasselbe,
// kurs.feld dagegen sucht nach einem Schlüssel namens "feld".
console.log("Mit Punkt gesucht:", kurs.feld);

Es gibt zwei Schreibweisen, um an eine Eigenschaft zu kommen, und sie sind nicht austauschbar.

Der Punkt ist der Normalfall. kurs.titel liest die Eigenschaft, die wörtlich titel heißt. Du schreibst den Namen direkt hin, und deshalb geht das nur, wenn du ihn beim Tippen schon kennst.

Die eckigen Klammern nehmen einen Text entgegen. kurs["titel"] ist dasselbe wie kurs.titel, aber in den Klammern darf auch eine Variable stehen: kurs[feld] liest die Eigenschaft, deren Name gerade in feld steht. Das brauchst du überall dort, wo der Name erst zur Laufzeit feststeht, etwa weil er aus einer Eingabe kommt.

Die Klammern sind außerdem der einzige Weg zu Namen, die als Bezeichner nicht durchgehen. Ein Schlüssel mit einem Leerzeichen oder einem Bindestrich ist erlaubt, aber kurs.letzte Änderung kann der Browser nicht lesen. In den Klammern ist es einfach ein Text und damit unproblematisch.

Die häufigste Verwechslung steht am Ende des Beispiels: kurs.feld sucht nach einem Schlüssel namens feld und findet nichts, während kurs[feld] erst die Variable ausliest und dann sucht.

04 / 04Wenn es die Eigenschaft nicht gibt

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const kurs = { titel: "JavaScript", stunden: 47 };

// Kein Fehler, nur undefined.
console.log("Preis:", kurs.preis);
console.log("Typ davon:", typeof kurs.preis);

// Deshalb fällt ein Tippfehler im Schlüssel nicht sofort auf.
console.log("Vertippt:", kurs.Titel);

// Die Kurzschreibweise: heißen Variable und Schlüssel gleich,
// reicht der Name einmal.
const titel = "CSS";
const stunden = 30;

const lang = { titel: titel, stunden: stunden };
const kurz = { titel, stunden };

console.log(lang);
console.log(kurz);

Ein Zugriff auf eine Eigenschaft, die es nicht gibt, ist kein Fehler. Du bekommst undefined zurück, genau wie bei einer Variablen ohne Wert aus Lektion 2.6.

Das ist bequem und gefährlich zugleich. Bequem, weil du fehlende Werte abfragen kannst, ohne dass etwas abstürzt. Gefährlich, weil ein Tippfehler im Schlüssel dadurch stumm bleibt: kurs.Titel mit großem T liefert undefined und nicht etwa eine Warnung. Erinnere dich an Lektion 1.4, Groß- und Kleinschreibung zählt überall.

Und genau dafür ist die Eingabezeile der Console da. Tipp den Namen des Objekts allein ein, also kurs, und die Antwort ist das ganze Objekt mit allen Schlüsseln, wie sie wirklich heißen. Wer einmal in der Antwort titel gelesen hat, tippt danach nicht mehr kurs.Titel. Das ist der schnellste Weg von „liefert undefined” zu „ach so heißt das”.

Auffallen tut so ein Tippfehler erst eine Zeile später, wenn jemand mit dem undefined weiterarbeitet. Deshalb steht in Abschnitt 14 ein eigener Absatz darüber, wie man ihn findet.

Am Ende des Beispiels steht noch die Kurzschreibweise. Heißen Variable und Schlüssel gleich, schreibst du den Namen nur einmal: { titel, stunden } ist dasselbe wie { titel: titel, stunden: stunden }. Das sieht nach Bequemlichkeit aus, ist aber der Grund, warum in echtem Code so viele Objekte so kurz sind. In Lektion 7.5 kommt der umgekehrte Weg dazu.