Objekte in JavaScript

Endlich bündeln wir unsere losen Transaktions-Variablen aus Kapitel 4 in ein echtes Objekt – die Datenstruktur, mit der unser Haushaltsbuch ab jetzt durchgehend arbeitet.

Objektliterale erstellen

const transaktion = {
  beschreibung: 'Gehalt Januar',
  betrag: 2400,
  kategorie: 'Gehalt',
  datum: '2026-01-31',
};

console.log(transaktion.betrag);       // 2400 - Punkt-Notation
console.log(transaktion['betrag']);    // 2400 - Klammer-Notation, identisch

Klammer-Notation ist nötig, wenn der Eigenschaftsname aus einer VARIABLE kommt oder Zeichen enthält, die als Bezeichner ungültig sind:

const feld = 'betrag';
console.log(transaktion[feld]); // 2400 - Punkt-Notation ginge hier NICHT (transaktion.feld wäre falsch)

Eigenschaften ändern, hinzufügen, entfernen

const transaktion = { beschreibung: 'Gehalt Januar', betrag: 2400 };

transaktion.betrag = 2500;       // ändern
transaktion.notiz = 'Bonus enthalten'; // neue Eigenschaft hinzufügen
delete transaktion.notiz;        // Eigenschaft entfernen

console.log(transaktion); // { beschreibung: 'Gehalt Januar', betrag: 2500 }

Shorthand-Notation für Eigenschaften und Methoden

const beschreibung = 'Miete Februar';
const betrag = -850;

// Ausführlich:
const transaktionA = { beschreibung: beschreibung, betrag: betrag };

// Shorthand, wenn Variablenname === Eigenschaftsname:
const transaktionB = { beschreibung, betrag };

console.log(transaktionA);
console.log(transaktionB); // identisches Ergebnis

const bibliothek = {
  transaktionen: [],

  // Methoden-Shorthand statt 'fuegeHinzu: function (t) { ... }'
  fuegeHinzu(transaktion) {
    this.transaktionen.push(transaktion);
  },
};

Verschachtelte Objekte

const transaktion = {
  beschreibung: 'Miete Februar',
  betrag: -850,
  kategorie: {
    name: 'Wohnen',
    icon: '????',
  },
};

console.log(transaktion.kategorie.name); // 'Wohnen'

Nützliche Object.-Methoden

const transaktion = { beschreibung: 'Gehalt', betrag: 2400 };

console.log(Object.keys(transaktion));   // ['beschreibung', 'betrag']
console.log(Object.values(transaktion)); // ['Gehalt', 2400]
console.log(Object.entries(transaktion)); // [['beschreibung', 'Gehalt'], ['betrag', 2400]]

for (const [schluessel, wert] of Object.entries(transaktion)) {
  console.log(`${schluessel}: ${wert}`);
}

Tipp: Object.entries() kombiniert mit for...of ist der übliche, saubere Weg, ein Objekt zu iterieren – deutlich vorzuziehen gegenüber for...in aus Kapitel 7, das (bei Objekten allerdings unproblematischer als bei Arrays) auch geerbte Eigenschaften mit einschließt.

Objekte werden per Referenz verglichen

const a = { betrag: 100 };
const b = { betrag: 100 };
const c = a;

console.log(a === b); // false - ZWEI unterschiedliche Objekte im Speicher, trotz gleichen Inhalts
console.log(a === c); // true  - c zeigt auf DASSELBE Objekt wie a

Achtung: Das ist eine der häufigsten JavaScript-Überraschungen für Einsteiger: === vergleicht bei Objekten (und Arrays) die REFERENZ im Speicher, nicht den Inhalt. Zwei inhaltlich identische Objekte sind NIEMALS ===-gleich, es sei denn, es handelt sich um dieselbe Referenz.

Die erste echte Transaktionsliste des Haushaltsbuchs

Jetzt ersetzen wir die einfachen Zahlen-Arrays aus Kapitel 10/11 durch echte Objekte – ab hier ist das die zentrale Datenstruktur, mit der das gesamte restliche Tutorial arbeitet:

src/index.js

const transaktionen = [
  { beschreibung: 'Gehalt Januar', betrag: 2400, kategorie: 'Gehalt', datum: '2026-01-31' },
  { beschreibung: 'Miete Januar', betrag: -850, kategorie: 'Miete', datum: '2026-01-01' },
  { beschreibung: 'Wocheneinkauf', betrag: -60, kategorie: 'Lebensmittel', datum: '2026-01-05' },
  { beschreibung: 'Kino', betrag: -18, kategorie: 'Freizeit', datum: '2026-01-12' },
];

const saldo = transaktionen.reduce((summe, t) => summe + t.betrag, 0);
console.log(`Saldo: ${saldo} EUR`); // Saldo: 1472 EUR

for (const t of transaktionen) {
  console.log(`${t.datum} | ${t.kategorie.padEnd(12)} | ${t.betrag} EUR | ${t.beschreibung}`);
}