Objekte

Was ist ein Objekt?

Objekte sind einer der wichtigsten Datentypen in JavaScript. Sie dienen dazu, zusammengehörige Daten und Funktionen in einer einzigen Struktur zu speichern.

Ein Objekt besteht aus Schlüssel-Wert-Paaren (Key-Value-Pairs). Der Schlüssel (auch Eigenschaft oder Property genannt) ist der Name, der Wert ist die gespeicherte Information. Du legst ein Objekt mit geschweiften Klammern { } an:

1const person = {
2    name: "Max",
3    alter: 25,
4    stadt: "Berlin"
5};
6
7console.log(person);

Im Beispiel hat person drei Eigenschaften: name, alter und stadt. Jede Eigenschaft speichert einen Wert – hier Text (String) und Zahlen (Number).

Warum benutzt du Objekte?

Stell dir vor, du speicherst Daten zu einer Person. Ohne Objekte müsstest du für jede Information eine eigene Variable anlegen – das wird schnell unübersichtlich:

Mit einem Objekt fasst du alle zusammengehörigen Daten an einem Ort zusammen. Das macht den Code lesbarer und spiegelt die Realität besser wider: Eine Person hat einen Namen, ein Alter und eine Stadt – das sind Eigenschaften eines Ganzen.

1// Ohne Objekt – viele einzelne Variablen
2let name = "Anna";
3let alter = 30;
4let stadt = "Hamburg";
5
6// Mit Objekt – alles an einem Ort
7const person = {
8    name: "Anna",
9    alter: 30,
10    stadt: "Hamburg"
11};
12
13console.log(name, alter, stadt);
14console.log(person);

Typische Anwendungsfälle für Objekte:

• Benutzerprofile (Name, E-Mail, Passwort)
• Produkte in einem Online-Shop (Name, Preis, Bild)
• Einstellungen einer Webseite (Farbe, Schriftart, Logo)
• API-Antworten vom Server (JSON-Daten sind Objekte)

Eigenschaften lesen

Auf die Werte eines Objekts greifst du mit dem Eigenschaftsnamen zu. Dafür gibt es zwei Schreibweisen:

1const auto = {
2    marke: "VW",
3    modell: "Golf",
4    baujahr: 2020
5};
6
7// Punkt-Notation
8console.log(auto.marke);
9console.log(auto.modell);
10
11// Klammer-Notation
12console.log(auto["baujahr"]);
13
14let eigenschaft = "modell";
15console.log(auto[eigenschaft]);

Die Klammer-Notation ist besonders nützlich, wenn der Eigenschaftsname erst zur Laufzeit bekannt ist – zum Beispiel aus einer Benutzereingabe oder einer Schleife.

Eigenschaften ändern

Du kannst den Wert einer bestehenden Eigenschaft jederzeit überschreiben. Dafür verwendest du dieselbe Schreibweise wie beim Lesen – nur mit einem = und dem neuen Wert:

1const buch = {
2    titel: "JavaScript lernen",
3    seiten: 200,
4    gelesen: false
5};
6
7console.log(buch.titel);
8
9buch.titel = "JavaScript meistern";
10buch.gelesen = true;
11
12console.log(buch.titel);
13console.log(buch.gelesen);

Wichtig: Das Objekt selbst bleibt bestehen – nur der Wert der Eigenschaft wird geändert. Bei Objekten, die mit const angelegt wurden, dürfen die Eigenschaften trotzdem verändert werden. Nur die Zuweisung eines komplett neuen Objekts wäre nicht erlaubt.

Eigenschaft hinzufügen

Objekte in JavaScript sind dynamisch – du kannst jederzeit neue Eigenschaften hinzufügen, auch wenn das Objekt schon existiert. Einfach einen neuen Namen zuweisen:

1const user = {
2    name: "Lisa"
3};
4
5console.log(user);
6
7user.email = "lisa@example.com";
8user["alter"] = 28;
9
10console.log(user);

Sowohl die Punkt-Notation (user.email = ...) als auch die Klammer-Notation (user["alter"] = ...) funktionieren beim Hinzufügen.

Eigenschaften löschen

Mit dem delete-Operator entfernst du eine Eigenschaft aus einem Objekt. Danach existiert der Schlüssel nicht mehr:

1const produkt = {
2    name: "Laptop",
3    preis: 999,
4    rabatt: 50
5};
6
7console.log(produkt);
8
9delete produkt.rabatt;
10
11console.log(produkt);

delete entfernt nur die Eigenschaft – das Objekt selbst bleibt erhalten.

Verschachtelte Objekte

Objekte können andere Objekte als Werte enthalten. So baust du komplexe Datenstrukturen auf – zum Beispiel eine Firma mit Adresse und Kontaktdaten:

1const firma = {
2    name: "WebDesign GmbH",
3    adresse: {
4        strasse: "Musterweg 5",
5        stadt: "München",
6        land: "Deutschland"
7    },
8    kontakt: {
9        email: "info@webdesign.de",
10        telefon: "089-123456"
11    }
12};
13
14console.log(firma.adresse.stadt);
15console.log(firma["kontakt"]["email"]);

Bei tief verschachtelten Objekten verkettst du die Zugriffe: objekt.ebene1.ebene2.eigenschaft. Jede Ebene ist ein eigenes Objekt mit eigenen Eigenschaften.

Objekte mit Arrays

Objekte und Arrays lassen sich beliebig kombinieren – das ist im Alltag sehr häufig. Zwei typische Muster:

• Objekt mit Array: Eine Eigenschaft speichert eine Liste (z. B. Noten eines Schülers)
• Array mit Objekten: Jedes Element des Arrays ist ein Objekt (z. B. eine Produktliste im Shop)

1// Objekt mit Array
2const schueler = {
3    name: "Paul",
4    noten: [2, 3, 1, 4]
5};
6
7console.log(schueler.noten);
8console.log(schueler.noten[2]);
9
10// Array mit Objekten
11const produkte = [
12    { name: "Apfel", preis: 1.2 },
13    { name: "Banane", preis: 0.8 },
14    { name: "Kirsche", preis: 3.5 }
15];
16
17console.log(produkte[0].name);
18console.log(produkte[1].preis);

Im Kapitel Arrays hast du bereits gesehen, wie Methoden wie find() oder filter() auf Arrays von Objekten arbeiten – ein sehr häufiges Muster in modernem JavaScript.