Objekte
Objekte modellieren Dinge mit Eigenschaften und Methoden: ein Nutzer, eine Lektion, ein Quiz-Ergebnis.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Eigenschaften
Objektliterale bündeln Schlüssel-Wert-Paare in geschweiften Klammern.
Zugriff mit Punkt (user.name) oder Klammern (user["name"]), wenn der Schlüssel dynamisch ist.
const user = {
name: 'Ada',
xp: 120,
aktiv: true
};
user.name; // 'Ada'
user.xp += 10;Methoden und this
Funktionen als Eigenschaften heißen Methoden.
this verweist in einer Methode auf das Objekt selbst.
const user = {
name: 'Ada',
begrüßen() {
return `Hallo, ich bin ${this.name}`;
}
};
user.begrüßen();Objekte durchlaufen
Object.keys liefert die Schlüssel, Object.values die Werte, Object.entries beides als Paare.
Damit lassen sich Objekte wie Listen verarbeiten.
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}Vertiefung
Objekte sind Referenzen
Ein Objekt ist eine Sammlung von Schlüssel-Wert-Paaren. Variablen speichern eine Referenz: Zwei Variablen können auf dasselbe Objekt zeigen.
Spread { ...obj } kopiert nur die oberste Ebene. Verschachtelte Objekte bleiben geteilt — für eine tiefe Kopie brauchst du strukturierte Kopien oder gezieltes Klonen.
const basis = { name: "Ada", werte: { xp: 10 } };
const kopie = { ...basis };
kopie.name = "Grace";
kopie.werte.xp = 99;
console.log(basis.werte.xp); // 99Merksatz: Objekte werden über Referenz geteilt. Spread kopiert flach, nicht tief.
Übungsaufgabe
Bibliothek
Modelliere eine kleine Bibliothek als Objekt mit Name, Büchern und einer Methode, die alle Titel ausgibt. Nutze this und Object.entries.
Das soll dein Programm können
- Objektliteral mit mindestens drei Eigenschaften
- Eine Methode mit this
- Object.entries für die Ausgabe
- Ein Buch als verschachteltes Objekt
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
In einer Methode zeigt this auf das Objekt. Für die Titel kannst du this.buecher.map(b => b.titel) verwenden.
Lösung anzeigen
const bibliothek = {
name: "Stadtbibliothek",
buecher: [
{ titel: "Effektives Java", autor: "Bloch" },
{ titel: "Clean Code", autor: "Martin" }
],
ausgeben() {
for (const [index, buch] of this.buecher.entries()) {
console.log(`${index + 1}. ${buch.titel} – ${buch.autor}`);
}
}
};
bibliothek.ausgeben();
console.log(Object.keys(bibliothek));Warum funktioniert das?
this.buecher greift auf die eigene Liste zu. Object.keys und Object.entries machen die Struktur des Objekts sichtbar.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.