JavaScript Objects: Properties, Methoden & Zugriff

Ein Objekt ist eine Sammlung benannter Werte

Ein Array gruppiert Werte nach Position. Ein Objekt gruppiert sie nach Namen. Sobald du etwas modellierst, das benannte Bestandteile hat – ein User mit Name und Alter, ein Request mit Methode und URL – greifst du zu einem JavaScript-Objekt.

Am schnellsten legst du eines mit einem Object Literal an:

Jeder Eintrag ist ein key: value-Paar. Schlüssel sind intern immer Strings (Anführungszeichen kannst du bei gültigen Bezeichnern wie name weglassen). Als Wert geht alles, was JavaScript kennt — Zahlen, Strings, Booleans, Arrays, Funktionen und sogar weitere Objekte.

Ein nachgestelltes Komma hinter dem letzten Eintrag ist völlig okay. Die meisten Teams lassen es drin — das hält Diffs sauber, wenn später eine neue Property dazukommt.

Properties lesen und schreiben

Für den Zugriff auf eine Property gibt es zwei Wege: Dot Notation und Bracket Notation.

Dot Notation ist aufgeräumter und das, wozu du standardmäßig greifen wirst. Bracket Notation spielt ihre Stärken aus, wenn der Key in einer Variablen steckt oder wenn der Key kein gültiger Bezeichner ist:

Greift man auf eine Property zu, die es gar nicht gibt, bekommt man undefined zurück – ganz ohne Fehler:

Dadurch werden Tippfehler stillschweigend unter den Teppich gekehrt. Wenn du stattdessen einen lautstarken Fehler willst, musst du das explizit abfangen.

Properties hinzufügen und löschen

JavaScript-Objekte sind offen für Erweiterungen – du kannst jederzeit neue Keys ergänzen:

Und mit delete entfernst du sie wieder:

delete ist einer dieser Operatoren, die man nicht jeden Tag braucht – aber wenn du einen Key komplett loswerden willst (und nicht einfach auf undefined setzen), ist das genau das richtige Werkzeug. Wenn du user.email = undefined schreibst, bleibt der Key nämlich erhalten: "email" in user liefert weiterhin true.

Prüfen, ob eine Property existiert

Drei Wege, und jeder bedeutet etwas leicht anderes:

• in prüft, ob der Key überhaupt existiert – inklusive der Keys, die über die Prototype-Chain geerbt wurden.
• Object.hasOwn(obj, key) schaut nur auf die eigenen Keys des Objekts. Genau das Richtige, wenn dich geerbte Properties nicht interessieren. Diese Methode ersetzt das ältere hasOwnProperty.
• obj.key !== undefined funktioniert meistens, führt dich aber in die Irre, sobald eine Property bewusst auf undefined gesetzt wurde.

Im Zweifel: nimm Object.hasOwn. Das macht in der Regel genau das, was du erwartest.

Methoden: Funktionen als Bestandteil von Objekten

Eine Property, deren Wert eine Funktion ist, nennt man Methode. Dafür gibt es innerhalb eines Object Literals eine verkürzte Schreibweise:

this verweist innerhalb einer Methode auf das Objekt, über das die Methode aufgerufen wurde – in diesem Fall also user. Genau deshalb weiß greet, welchen Namen es verwenden soll.

Eine Sache solltest du im Hinterkopf behalten: Arrow Functions haben kein eigenes this. Für Methoden, die auf andere Properties des Objekts zugreifen müssen, sind sie deshalb die falsche Wahl:

Nutze die Kurzschreibweise für Methoden (greet() { ... }), sobald this ins Spiel kommt. Arrow Functions sind super für Callbacks – als Objektmethoden solltest du sie aber meiden.

Verschachtelte Objekte

Werte können selbst wieder Objekte sein – beliebig tief verschachtelt:

Beim Lesen verschachtelter Properties hangelst du dich einfach durch – user.address.city. Der Haken dabei: Sobald irgendein Glied in der Kette null oder undefined ist, fängst du dir einen TypeError ein:

console.log(user.profile.city);
// TypeError: Cannot read properties of undefined (reading 'city')

Optional Chaining (user.profile?.city) ist die moderne Lösung dafür — statt einen Fehler zu werfen, gibt es einfach undefined zurück, wenn ein Glied in der Kette fehlt. Dazu gibt es später in diesem Kapitel noch ein eigenes Kapitel.

Objekte in JavaScript durchlaufen

Wenn du jeden Schlüssel eines Objekts abklappern willst, sind Object.keys, Object.values und Object.entries genau das richtige Werkzeug:

Object.entries ist am nützlichsten – du bekommst Key und Value auf einen Schlag und kannst das Ganze elegant per Array-Destructuring auseinandernehmen.

Es gibt auch die for...in-Schleife, aber die läuft zusätzlich durch geerbte Properties – in den meisten Fällen willst du das nicht:

for (const key in scores) {
  console.log(key);  // funktioniert, enthält aber geerbte Schlüssel
}

Nimm lieber Object.keys / Object.entries – außer du willst ausdrücklich auch geerbte Properties mitnehmen.

Kurzschreibweisen, die du kennen solltest

Zwei syntaktische Abkürzungen, die dir ständig über den Weg laufen:

Property Shorthand greift immer dann, wenn der Variablenname mit dem Key übereinstimmt. Mit computed keys (also der [expr]-Schreibweise) kannst du Property-Namen dynamisch zusammenbauen – praktisch, wenn eine Funktion ein bestimmtes Feld anhand seines Namens aktualisieren soll.

Objekte werden per Referenz verglichen

Darüber stolpert so ziemlich jeder irgendwann:

=== prüft bei Objekten, ob beide Seiten auf dasselbe Objekt im Speicher verweisen – nicht, ob der Inhalt identisch ist. Zwei Objekte mit exakt denselben Properties sind trotzdem zwei verschiedene Objekte.

Wenn du wissen willst „haben die beiden dieselbe Struktur?", musst du die Felder manuell vergleichen oder dir einen Deep-Equal-Helper schnappen. JSON.stringify(a) === JSON.stringify(b) ist ein schneller Trick, der für reine Datenobjekte funktioniert – bei Funktionen, undefined oder Zirkelbezügen fliegt er dir aber um die Ohren.

Objekte bleiben veränderbar – auch mit const

const bindet nur die Variable an einen Wert fest. Das Objekt selbst, auf das sie zeigt, wird dadurch nicht eingefroren:

Wenn du wirklich Unveränderlichkeit brauchst, verhindert Object.freeze(user) weitere Änderungen – allerdings nur oberflächlich, verschachtelte Objekte lassen sich weiterhin mutieren. In der Praxis setzen die meisten Codebases aber eher auf Konventionen als auf Object.freeze: Betrachte const-Objekte als „diese Bindung nicht neu zuweisen" und kümmere dich um Unveränderlichkeit auf Design-Ebene.

Weiter geht's mit Arrays

Objekte und Arrays sind die beiden Grundbausteine, aus denen alles andere gemacht ist. Objekte speichern benannte Daten, Arrays hingegen geordnete Daten. Als Nächstes schauen wir uns an, wie Arrays in JavaScript funktionieren – und welche Handvoll Methoden (push, slice, map und Co.) den Großteil der Arbeit erledigt.