EMZETT.
Login

Emzett Wiki

JavaScript: Objekte

Properties1
tagsprogrammiersprachen, javascript

4 Min. Lesezeit

Kurz: Ein Objekt speichert zusammengehörige Werte unter Namen (Schlüssel → Wert). Es ist die wichtigste Datenstruktur in JavaScript.

Teil des Kurses JavaScript

Kapitel 15 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Ein Objekt speichert zusammengehörige Werte unter Namen (Schlüssel → Wert). Es ist die wichtigste Datenstruktur in JavaScript.

const person = {
  name: "Mia",
  alter: 17,
  hobbys: ["Lesen", "Rad"],
  adresse: { stadt: "Köln", plz: "50667" },
  vorstellen() { return `Ich bin ${this.name}`; },
};
console.log(person.name, person["alter"]);
console.log(person.adresse.stadt, person.hobbys[1]);
console.log(person.vorstellen());

Ausgabe:

Mia 17
Köln Rad
Ich bin Mia

Lesen, ändern, hinzufügen, löschen

const auto = { marke: "VW" };
auto.farbe = "blau";            // hinzufügen
auto.marke = "Audi";            // ändern
delete auto.farbe;              // löschen
auto["baujahr"] = 2020;
const schluessel = "typ";
auto[schluessel] = "Kombi";     // dynamischer Schlüssel
console.log(auto);
console.log("marke" in auto, auto.hatNicht, "hatNicht" in auto);
console.log(auto.hasOwnProperty("typ"), Object.hasOwn(auto, "baujahr"));

Ausgabe:

{ marke: 'Audi', baujahr: 2020, typ: 'Kombi' }
true undefined false
true true

Kurzschreibweisen

const x = 1, y = 2;
const punkt = { x, y };                       // Kurzform für { x: x, y: y }
const feld = "farbe";
const o = { [feld]: "rot", [`${feld}Code`]: "#f00" };   // berechnete Schlüssel
console.log(punkt, o);

Ausgabe:

{ x: 1, y: 2 } { farbe: 'rot', farbeCode: '#f00' }

Schlüssel, Werte, Einträge

const preise = { apfel: 1.2, birne: 1.5, kiwi: 0.8 };
console.log(Object.keys(preise));
console.log(Object.values(preise));
console.log(Object.entries(preise));
for (const [name, preis] of Object.entries(preise)) console.log(name, preis);
console.log(Object.fromEntries(Object.entries(preise).map(([k, v]) => [k, v * 2])));

Ausgabe:

[ 'apfel', 'birne', 'kiwi' ]
[ 1.2, 1.5, 0.8 ]
[ [ 'apfel', 1.2 ], [ 'birne', 1.5 ], [ 'kiwi', 0.8 ] ]
apfel 1.2
birne 1.5
kiwi 0.8
{ apfel: 2.4, birne: 3, kiwi: 1.6 }

Kopieren und Zusammenführen

const a = { x: 1, y: { z: 2 } };
const flach = { ...a, x: 99 };           // flache Kopie mit Änderung
const tief = structuredClone(a);
a.y.z = 5;
console.log(flach.y.z, tief.y.z);
console.log({ ...{ a: 1, b: 2 }, ...{ b: 3, c: 4 } });
console.log(Object.assign({}, { a: 1 }, { b: 2 }));

Ausgabe:

5 2
{ a: 1, b: 3, c: 4 }
{ a: 1, b: 2 }

Spread kopiert nur die erste Ebene. Verschachtelte Objekte werden geteilt (flach.y ist dasselbe Objekt wie a.y).

Einfrieren

"use strict";
const konfig = Object.freeze({ port: 8080 });
try { konfig.port = 1; } catch (e) { console.log(e.name); }
console.log(konfig.port, Object.isFrozen(konfig));

Ausgabe:

TypeError
8080 true

Methoden und this

In Methoden verweist this auf das Objekt, auf dem sie aufgerufen werden:

const zaehler = {
  stand: 0,
  erhoehe() { this.stand++; return this; },    // return this: Verkettung
};
console.log(zaehler.erhoehe().erhoehe().stand);
const lose = zaehler.erhoehe;
try { lose(); } catch (e) { console.log("this verloren:", e.name); }
const gebunden = zaehler.erhoehe.bind(zaehler);
gebunden();
console.log(zaehler.stand);

Ausgabe:

2
3

Getter und Setter

const kreis = {
  radius: 2,
  get flaeche() { return Math.PI * this.radius ** 2; },
  set durchmesser(d) { this.radius = d / 2; },
};
console.log(kreis.flaeche.toFixed(2));
kreis.durchmesser = 10;
console.log(kreis.radius);

Ausgabe:

12.57
5

Merke

  • Objekte speichern Schlüssel-Wert-Paare; Zugriff mit .name oder ["name"]
  • Object.keys/values/entries/fromEntries wandeln zwischen Objekt und Array
  • Spread { ...a } kopiert flach, structuredClone tief
  • Object.freeze macht ein Objekt unveränderlich
  • In Methoden zeigt this auf das Objekt; bind fixiert es

Übungsaufgabe

Lege ein Objekt für ein Buch (Titel, Autor, Jahr) an, füge eine Methode beschreibung() hinzu und gib alle Schlüssel und Werte aus.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: map, filter, reduce und Co.

Weiter: Destructuring, Spread und Rest

Alle Kapitel: JavaScript im Überblick

Graphansicht

Backlinks