Die funktionalen Array-Methoden sind das mächtigste Werkzeug im täglichen JavaScript-Alltag – dieses Kapitel baut damit die komplette Auswertungslogik unseres Haushaltsbuchs.

map(): jedes Element transformieren

map() erzeugt ein NEUES Array derselben Länge, in dem JEDES Element durch das Ergebnis der Callback-Funktion ersetzt wurde:

const betraege = [2400, -850, -120];

const formatiert = betraege.map(betrag => `${betrag} EUR`);
console.log(formatiert); // ['2400 EUR', '-850 EUR', '-120 EUR']
console.log(betraege);   // unverändert: [2400, -850, -120] - map() mutiert NICHT

filter(): Elemente auswählen

filter() erzeugt ein NEUES Array, das nur die Elemente enthält, für die die Callback-Funktion true zurückgibt:

const betraege = [2400, -850, -120, -60, 300];

const ausgaben = betraege.filter(betrag => betrag < 0);
console.log(ausgaben); // [-850, -120, -60]

const einnahmen = betraege.filter(betrag => betrag > 0);
console.log(einnahmen); // [2400, 300]

reduce(): ein Array zu einem einzigen Wert aggregieren

reduce() ist die vielseitigste, aber auch anfangs am schwierigsten zu lesende Methode. Sie iteriert über das Array und akkumuliert dabei einen einzigen Wert – genau das, was wir für die manuelle Summierschleife aus Kapitel 10 brauchten:

const betraege = [2400, -850, -120, -60, 300, -45];

const saldo = betraege.reduce((akkumulator, betrag) => akkumulator + betrag, 0);
console.log(saldo); // 1625 - identisch zum Ergebnis der manuellen Schleife aus Kapitel 10!

Der erste Parameter der Callback-Funktion (akkumulator) trägt den bisher berechneten Zwischenwert, der zweite Parameter (betrag) das aktuelle Element. Der zweite Aufruf-Parameter von reduce() selbst (hier 0) ist der STARTWERT des Akkumulators.

// Fortgeschrittenes Beispiel: Summe PRO Kategorie mit reduce()
const transaktionen = [
  { kategorie: 'Miete', betrag: -850 },
  { kategorie: 'Lebensmittel', betrag: -60 },
  { kategorie: 'Lebensmittel', betrag: -45 },
  { kategorie: 'Gehalt', betrag: 2400 },
];

const summenProKategorie = transaktionen.reduce((akkumulator, transaktion) => {
  const bisher = akkumulator[transaktion.kategorie] ?? 0;
  akkumulator[transaktion.kategorie] = bisher + transaktion.betrag;
  return akkumulator;
}, {});

console.log(summenProKategorie);
// { Miete: -850, Lebensmittel: -105, Gehalt: 2400 }

Weitere häufig gebrauchte Methoden

• find(callback) – gibt das ERSTE passende Element zurück (nicht ein Array!), oder undefined.
• some(callback) – true, wenn MINDESTENS ein Element passt.
• every(callback) – true, wenn ALLE Elemente passen.
• sort(callback) – sortiert (ACHTUNG: mutiert das Original!), Callback gibt negativ/0/positiv zurück.
• forEach(callback) – wie eine for...of-Schleife, aber OHNE Rückgabewert – kein Ersatz für map()/filter().

const transaktionen = [
  { kategorie: 'Miete', betrag: -850 },
  { kategorie: 'Gehalt', betrag: 2400 },
];

const gehalt = transaktionen.find(t => t.kategorie === 'Gehalt');
console.log(gehalt); // { kategorie: 'Gehalt', betrag: 2400 }

const gibtGrosseAusgabe = transaktionen.some(t => t.betrag < -500);
console.log(gibtGrosseAusgabe); // true

const sortiertNachBetrag = [...transaktionen].sort((a, b) => a.betrag - b.betrag);
console.log(sortiertNachBetrag.map(t => t.betrag)); // [-850, 2400]

Methoden verketten: der wahre Vorteil

Der eigentliche Gewinn dieser Methoden zeigt sich beim VERKETTEN – eine einzige, gut lesbare Ausdruckskette statt mehrerer manueller Schleifen:

const transaktionen = [
  { kategorie: 'Miete', betrag: -850 },
  { kategorie: 'Lebensmittel', betrag: -60 },
  { kategorie: 'Gehalt', betrag: 2400 },
  { kategorie: 'Freizeit', betrag: -45 },
];

const summeGrosserAusgaben = transaktionen
  .filter(t => t.betrag < 0)
  .map(t => Math.abs(t.betrag))
  .filter(betrag => betrag > 50)
  .reduce((summe, betrag) => summe + betrag, 0);

console.log(summeGrosserAusgaben); // 910 - Miete (850) + Lebensmittel (60)