map, filter und reduce in JavaScript – Arrays ohne for-Schleife verarbeiten

Sobald du in JavaScript eine for-Schleife schreibst, die ein Array durchgeht und ein neues Ergebnis aufbaut, geht es fast immer kürzer und lesbarer mit map, filter oder reduce.

map und filter

const produkte = [
  { name: "Tasse", preis: 9, lager: 0 },
  { name: "Shirt", preis: 25, lager: 4 },
  { name: "Buch",  preis: 15, lager: 12 },
];

const verfuegbar = produkte
  .filter(p => p.lager > 0)      // nur lieferbare behalten
  .map(p => p.name);             // in Namen umwandeln
// ["Shirt", "Buch"]

filter behält Elemente, für die die Funktion true liefert. map gibt für jedes Element einen neuen Wert zurück – gleiche Länge, andere Inhalte.

reduce – der Alleskönner

reduce fasst ein Array zu einem Wert zusammen. Es merkt sich einen „Akkumulator" und reicht ihn von Element zu Element weiter:

const gesamt = produkte.reduce((summe, p) => summe + p.preis, 0);
// Start bei 0, dann 0+9, +25, +15  →  49

Der zweite Parameter (0) ist der Startwert – vergiss ihn nie, sonst bekommst du bei leeren Arrays einen Fehler. Mit reduce kannst du auch gruppieren:

const nachLager = produkte.reduce((acc, p) => {
  const key = p.lager > 0 ? "lieferbar" : "ausverkauft";
  (acc[key] ??= []).push(p.name);
  return acc;
}, {});
// { ausverkauft: ["Tasse"], lieferbar: ["Shirt", "Buch"] }

Merksatz

• map → gleich viele Elemente, umgewandelt
• filter → weniger Elemente, gleiche Form
• reduce → ein einziger Wert (Summe, Objekt, String …)

Diese drei nehmen mir in jedem Frontend die Schleifen ab. Mehr JavaScript-Snippets findest du auf code.bymw.de.

Quellen

• Array.prototype.map — MDN
• Array.prototype.reduce — MDN