JavaScript-Objekte
Du kennst schon Funktionen und Closures — Logik lässt sich bündeln. Echte Seiten brauchen auch strukturierte Daten: Titel, Preis und Bestand eines Produkts gehören zusammen. Ein Objekt ist ein Wert, der mehrere benannte Teile hält.
Was ein Objekt bedeutet
Ein Objekt speichert zusammengehörige Daten als Eigenschaften (properties). Jede Eigenschaft hat einen Schlüssel (key) — den Namen — und einen Wert (value). Einsteiger starten meist mit einem Objektliteral: geschweifte Klammern { } mit Paaren Schlüssel: Wert. Für diesen ersten Schritt brauchst du keine Klasse.
Vier Teile im Blick
📊 Literal, Schlüssel, Wert und Zugriff
| Teil | Rolle | Einsteiger-Tipp |
|---|---|---|
| Objektliteral | der { … }-Wert an einer Variablen |
eine Tasche verwandter Daten |
| Schlüssel | der Eigenschaftsname links von : |
wie du das Stück benennst |
| Wert | die Daten rechts von : |
String, Zahl, Boolean, … |
| Zugriff | lesen oder schreiben mit . oder [ ] |
wie du später ein Stück erreichst |
Wenn du diese vier zeigen kannst, erklärst du fast jedes erste Objektbeispiel. Die Überraschung sind oft nicht die Klammern — sondern dass eine Variable jetzt mehrere benannte Felder mitnimmt.
let book = {
title: "Maps",
pages: 120
};
console.log(book);
Geschweifte Klammern bauen das Objekt
book ist ein Wert. Darin sind title und pages Eigenschaften. Kommas trennen die Paare. Nach } ist das Objekt einsatzbereit. console.log(book) zeigt die ganze Tasche in der Konsole.
let book = {
title: "Maps",
pages: 120
};
console.log(book.title);
console.log(book.pages);
Der Punkt erreicht ein Feld
Objektname, Punkt, dann Schlüssel: book.title. Das ergibt den String "Maps". Punktschreibweise ist der Alltagsweg für bekannte Eigenschaftsnamen. Der Schlüssel muss dabei wie ein gültiger Bezeichner aussehen.
let book = {
title: "Maps",
pages: 120
};
console.log(book["title"]);
console.log(book["pages"]);
Klammern erreichen dasselbe Feld
Hier ist book["title"] derselbe Wert wie book.title. Klammern nehmen einen String (oder einen Ausdruck, der zum Schlüssel wird). Nutze sie, wenn der Schlüssel in einer Variablen steckt oder kein einfacher Bezeichner ist. Bei festen Namen ist der Punkt meist klarer.
let book = {
title: "Maps",
pages: 120
};
book.pages = 140;
console.log(book.pages);
Später kannst du eine Eigenschaft aktualisieren
Zuweisung an book.pages ändert dieses Feld. Das Objekt bleibt dieselbe Tasche; ein Wert darin ist neu. Erneutes Lesen zeigt 140. Spätere Lektionen vertiefen das Hinzufügen und Auflisten von Eigenschaften — hier geht es um ein klares erstes Update.
let item = {
name: "Mug",
price: 8
};
console.log(item.name);
console.log(item.price);
Zusammengehörige Felder reisen gemeinsam
name und price beschreiben einen Shop-Artikel. Auf einem Objekt sind sie besser aufgehoben als in zwei losen Globals, die auseinanderlaufen. Übergibst du item einer Funktion oder setzt es auf die Seite, bewegen sich beide Felder als Einheit.
Ein Objektfeld auf der Seite zeigen
Baue ein kleines Produkt-Objekt, lies eine Eigenschaft und setze den Text in einen Absatz.
<!DOCTYPE html>
<html>
<head>
<title>objects — page</title>
</head>
<body>
<p id="label">…</p>
<script>
let item = {
name: "Lamp",
price: 25
};
let box = document.getElementById("label");
box.textContent = item.name + " — " + item.price;
</script>
</body>
</html>
Der Absatz zeigt Lamp — 25. Ändere nur name oder price im Objekt, lade neu und lies die neue Zeile. Als Nächstes folgen Objekteigenschaften genauer — wie Schlüssel sich verhalten und wie du täglich damit arbeitest.
Übungsschritte
- Erzeuge ein Objekt mit zwei Eigenschaften per Literal.
- Gib eine Eigenschaft mit Punkt in der Konsole aus.
- Gib dieselbe Eigenschaft mit Klammern und String-Schlüssel aus.
- Ändere eine Eigenschaft und lies den neuen Wert.
- Baue ein
itemmitnameundprice; logge beide Felder. - Ändere in der HTML-Demo nur die Objektwerte, lade neu, lies den Absatz.
Häufige Stolperfallen
- Ein Objekt wie eine nummerierte Liste behandeln (das ist eher ein Array, später im Kurs)
- Anführungszeichen um String-Werte vergessen —
title: Mapsohne Quotes ist falsch - Schlüssel und Wert beim Erklären des Literals verwechseln
- Methoden,
thisoder tiefe Eigenschaftswerkzeuge schon auf dieser ersten Seite erwarten — die kommen später - Für jedes Feld ein eigenes Global statt eines Objekts anlegen
Kurzfassung
- Ein Objekt bündelt verwandte Werte als benannte Eigenschaften
- Ein Literal hat die Form
{ Schlüssel: Wert, … } - Punktschreibweise (
obj.key) liest eine bekannte Eigenschaft - Klammerschreibweise (
obj["key"]) liest mit String-Schlüssel - Per Zuweisung an eine Eigenschaft aktualisierst du sie später
- Zusammengehörige Felder bleiben zusammen, wenn das Objekt wandert
- Seitenupdates können Strings aus Objektfeldern bauen
- Als Nächstes: Objekteigenschaften — tiefer mit Schlüsseln arbeiten
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt