Arrays in JavaScript: map, filter und reduce

Arrays sind geordnete Listen von Werten und gehören zu den am häufigsten genutzten Datentypen in JavaScript. Statt sie mühsam mit Schleifen zu durchlaufen, bietet dir JavaScript elegante Methoden. Die drei wichtigsten sind map, filter und reduce. In diesem Beitrag lernst du, wie du sie einsetzt und dadurch sauberen, lesbaren Code schreibst.

Kurze Auffrischung: Was ist ein Array?

Ein Array speichert mehrere Werte in einer einzigen Variablen. Jeder Wert hat einen Index, der bei 0 beginnt.

const obst = ["Apfel", "Banane", "Kirsche"];
console.log(obst[0]);      // Apfel
console.log(obst.length);  // 3

Bisher hast du Arrays vielleicht mit einer for-Schleife durchlaufen. Das funktioniert, ist aber oft umständlich. Die folgenden Methoden machen es schöner.

map: jedes Element umwandeln

Die Methode map geht durch jedes Element eines Arrays, wendet eine Funktion darauf an und gibt ein neues Array mit den Ergebnissen zurück. Das ursprüngliche Array bleibt unverändert.

const zahlen = [1, 2, 3, 4];
const quadrate = zahlen.map(n => n * n);

console.log(quadrate); // [1, 4, 9, 16]
console.log(zahlen);   // [1, 2, 3, 4] (unverändert)

Du nutzt map immer dann, wenn du aus einer Liste eine gleich lange Liste mit umgewandelten Werten machen willst, etwa um Preise mit Mehrwertsteuer zu berechnen.

filter: Elemente aussortieren

Mit filter erstellst du ein neues Array, das nur die Elemente enthält, die eine Bedingung erfüllen. Die übergebene Funktion muss true oder false zurückgeben.

const zahlen = [5, 12, 8, 21, 3];
const grosse = zahlen.filter(n => n > 10);

console.log(grosse); // [12, 21]

Hier behältst du nur Zahlen, die größer als 10 sind. Alles andere wird herausgefiltert. Das ist ideal, um zum Beispiel nur aktive Nutzer aus einer Liste herauszuziehen.

reduce: alles zu einem Wert zusammenfassen

Die Methode reduce ist die mächtigste der drei. Sie fasst ein ganzes Array zu einem einzigen Wert zusammen. Das kann eine Summe, ein Maximum oder sogar ein Objekt sein. Sie nimmt eine Funktion mit zwei Hauptargumenten: dem bisherigen Ergebnis (Akkumulator) und dem aktuellen Element.

const preise = [10, 25, 5, 40];
const gesamt = preise.reduce((summe, preis) => summe + preis, 0);

console.log(gesamt); // 80

Die 0 am Ende ist der Startwert für die Summe. Bei jedem Durchlauf addierst du den aktuellen Preis dazu. So entsteht Schritt für Schritt das Endergebnis.

Methoden verketten

Das Schöne ist: Da map und filter wieder ein Array zurückgeben, kannst du die Methoden hintereinander aufrufen. Das nennt man Method Chaining.

const zahlen = [1, 2, 3, 4, 5, 6];

const ergebnis = zahlen
  .filter(n => n % 2 === 0) // nur gerade Zahlen: [2, 4, 6]
  .map(n => n * 10)         // verzehnfachen: [20, 40, 60]
  .reduce((s, n) => s + n, 0); // aufsummieren: 120

console.log(ergebnis); // 120

Dieser kompakte Code filtert, transformiert und summiert in einem lesbaren Fluss. Mit einer klassischen Schleife wäre das deutlich länger.

Fazit

Mit map, filter und reduce verarbeitest du Arrays sauber und ausdrucksstark. Merke dir: map wandelt um, filter wählt aus und reduce fasst zusammen. Alle drei verändern das Original nicht, sondern geben neue Werte zurück. Sobald du diese Methoden beherrschst, wirst du klassische Schleifen für solche Aufgaben kaum noch vermissen. Probiere sie an eigenen Datenlisten aus.