Arrays bringen ihren eigenen Werkzeugkasten mit
JavaScript-Arrays kommen mit einer ganzen Reihe eingebauter Methoden. Für fast alles, wofür man früher eine for-Schleife geschrieben hat – Werte umformen, bestimmte Elemente herauspicken, Summen bilden – gibt es eine passende Array-Methode. Das Ergebnis ist meist ein Einzeiler, der sich besser liest und sich sauber mit anderen Methoden kombinieren lässt.
Das Grundgerüst besteht aus drei Methoden: map, filter und reduce. Wenn du diese drei plus ein paar verwandte Methoden beherrschst, schrumpft dein schleifenlastiger Code zu etwas zusammen, das du auf einen Blick erfassen kannst.
Jede Methode bekommt einen Callback übergeben und gibt etwas zurück. Keine davon hat nums verändert – ein Prinzip, das man sich früh einprägen sollte.
map: Jedes Element transformieren
map nimmt eine Funktion und ruft sie für jedes Element auf. Die Rückgabewerte landen in einem neuen Array gleicher Länge. Genau richtig, wenn du pro Eingabe-Element genau einen Ausgabewert haben willst.
Der Callback bekommt als zweites Argument auch den Index, falls du ihn brauchst: arr.map((item, i) => ...). Ansonsten lässt du ihn einfach weg.
Ein typischer Anfängerfehler: zu map greifen, obwohl man das zurückgegebene Array gar nicht braucht. Wenn du nur jedes Element ausgeben oder in eine Datenbank schreiben willst, gehört das in ein forEach oder eine ganz normale Schleife.
filter: nur die passenden Elemente behalten
array filter in JavaScript ruft für jedes Element ein Prädikat auf – also eine Funktion, die true oder false zurückgibt – und behält genau die Elemente, bei denen das Ergebnis truthy ist. Das neue Array ist gleich lang oder kürzer als das Original.
map und filter lassen sich wunderbar verketten. So eine Method-Chain liest man von vorne nach hinten wie eine Pipeline:
Erst filtern, dann mappen – so läuft map nur über die Elemente, die den Filter überstanden haben.
reduce: Ein Array auf einen einzigen Wert zusammenfalten
reduce ist die mächtigste der drei Methoden. Du übergibst ihr eine Reducer-Funktion (accumulator, item) => newAccumulator sowie einen Startwert. Sie geht das Array Element für Element durch, reicht jedes Item zusammen mit dem bisherigen Akkumulator an den Reducer weiter – und am Ende bekommst du genau das zurück, was der Akkumulator am Schluss enthält.
Das Ergebnis muss keine Zahl sein. Genauso gut kann ein Objekt, ein weiteres Array oder ein String dabei herauskommen — eben alles, was du dir Stück für Stück zusammenbaust:
Gib immer den Startwert an (das zweite Argument). Ohne ihn nimmt reduce das erste Element als Anfangswert des Akkumulators — das knallt bei leeren Arrays und liefert oft sowieso nicht das, was du eigentlich willst.
reduce ist mächtig, wird aber schnell unlesbar, wenn die Logik verschachtelt wird. Wenn dein Reducer länger als ein paar Zeilen ist, ist eine schlichte for...of-Schleife meist verständlicher.
forEach: Seiteneffekte ohne Rückgabewert
forEach ist im Grunde map ohne zurückgegebenes Array. Du nutzt es immer dann, wenn du mit jedem Element etwas tun willst — es loggen, eine API aufrufen, das DOM aktualisieren — und dabei keine neue Collection brauchst.
Zwei Dinge, die du wissen solltest:
forEachgibtundefinedzurück. Du kannst danach also kein.map()verketten.- Aus einem
forEachkannst du nicht vorzeitig perbreakaussteigen. Wenn du einen frühen Ausstieg brauchst, nimmfor...ofodersome/every.
Wenn du dich dabei erwischst, arr.forEach(x => results.push(transform(x))) zu schreiben – das ist in Wahrheit ein map.
find und findIndex: Bitte nur eins
find liefert das erste Element, das auf das Prädikat passt, oder undefined, falls nichts matcht. findIndex gibt stattdessen den Index zurück (bzw. -1).
find stoppt beim ersten Treffer. Verwende nicht filter(...)[0] – das läuft einmal komplett durch das Array und wirft den Rest anschließend wieder weg.
some und every: Fragen mit Ja/Nein-Antwort
some liefert true, sobald mindestens ein Element die Bedingung erfüllt. every gibt nur dann true zurück, wenn das wirklich auf alle Elemente zutrifft.
Beide Methoden arbeiten mit Short-Circuit — some bricht beim ersten true ab, every beim ersten false. Genau das Richtige, wenn du fragen willst: „Trifft das auf irgendeins zu?" bzw. „Trifft das auf alle zu?".
slice vs splice: Kopieren statt Herausschneiden
Die beiden klingen verdammt ähnlich, machen aber völlig Unterschiedliches.
slice(start, end) gibt eine flache Kopie eines Array-Ausschnitts zurück und lässt das Original in Ruhe. end gehört nicht mehr dazu (exklusiv); lässt du den Parameter weg, geht's bis zum Ende.
splice(start, deleteCount, ...items) verändert das Array direkt (also in place). Die Methode entfernt ab Position start genau deleteCount Elemente, fügt optional neue ein und gibt die entfernten Elemente als Array zurück.
Merkhilfe: slice ist safe (kopiert), splice operiert chirurgisch direkt am Array.
Mutierende vs. nicht-mutierende Array-Methoden
Dieser Unterschied ist wichtig. Code, der aus Versehen ein geteiltes Array mutiert, sorgt für eine der nervigsten Bug-Sorten überhaupt.
Mutierend (verändern das Original, geben meist etwas anderes zurück):
push,pop,shift,unshiftsplice,sort,reversefill,copyWithin
Nicht-mutierend (liefern ein neues Array oder einen neuen Wert, das Original bleibt unangetastet):
map,filter,slice,concatflat,flatMapfind,findIndex,some,every,includes,indexOfreduce,reduceRight
Besondere Vorsicht ist bei sort und reverse geboten — die wirken harmlos, mutieren aber klammheimlich. Wenn du eine sortierte Kopie brauchst, ziehst du vorher ein slice:
Modernes JS bringt außerdem nicht-mutierende Gegenstücke mit: toSorted, toReversed, toSpliced und with. Sie geben ein neues Array zurück und lassen das Original in Ruhe. In allen aktuellen Runtimes verfügbar – nutze sie, wo du kannst.
flat und flatMap
Mit flat wird ein verschachteltes Array um eine Ebene abgeflacht – oder um mehrere Ebenen, wenn du den Tiefen-Parameter mitgibst. flatMap ist im Grunde ein map mit anschließendem flat um eine Ebene. Praktisch immer dann, wenn ein Element auf null oder mehrere Ergebnisse abgebildet werden soll.
flatMap ist der saubere Weg, um Elemente zu "expandieren" – ein Input, mehrere Outputs – ganz ohne zusätzlichen flat()-Aufruf.
Alles zusammengeführt
Ein kleines, praxisnahes Beispiel. Aus einer Liste von Bestellungen soll der Gesamtumsatz aller abgeschlossenen Bestellungen über 50 $ ermittelt werden:
Drei Methoden, eine Pipeline, kein manuelles Schleifen-Gefummel. Jeder Schritt beschreibt, was er tut. Du könntest die beiden filter-Aufrufe zu einem zusammenfassen, aber sie getrennt zu halten liest sich angenehm – und hilft manchmal beim Debuggen.
Als Nächstes: Map und Set
Arrays sind super für geordnete Sequenzen, aber sie werden unhandlich, sobald du schnelle Lookups per Schlüssel oder eine Sammlung eindeutiger Werte brauchst. Genau dafür bringt JavaScript zwei eingebaute Datenstrukturen mit – Map und Set – und um die geht es auf der nächsten Seite.
Häufig gestellte Fragen
Was ist der Unterschied zwischen map, filter und reduce?
map transformiert jedes Element und liefert ein neues Array mit gleicher Länge zurück. filter behält nur die Elemente, die eine Bedingung erfüllen, und gibt ein (meist kürzeres) neues Array zurück. reduce läuft durchs Array und faltet es zu einem einzigen Wert zusammen – eine Summe, ein Objekt, ein anderes Array, was auch immer du dir zusammenbaust.
forEach oder map – was soll ich nehmen?
forEach ruft eine Funktion für jedes Element auf und gibt undefined zurück – also reine Seiteneffekte. map ruft ebenfalls eine Funktion für jedes Element auf, gibt dir aber ein neues Array mit den Ergebnissen. Willst du ein transformiertes Array, nimm map. Geht's dir nur darum, pro Element etwas auszuführen und das Ergebnis ist egal, reicht forEach (oder direkt eine for...of-Schleife).
Welche Array-Methoden verändern das Original-Array?
Mutierend sind push, pop, shift, unshift, splice, sort, reverse, fill und copyWithin. Alles andere – map, filter, slice, concat, flat, flatMap, find, some, every, reduce – lässt das ursprüngliche Array in Ruhe und gibt einen neuen Wert zurück.
Wann slice, wann splice?
slice(start, end) liefert eine flache Kopie eines Abschnitts und fasst das Original nicht an. splice(start, deleteCount, ...items) dagegen mutiert das Array – es entfernt und/oder fügt Elemente direkt ein und gibt die entfernten zurück. Eselsbrücke: slice ist sicher, splice operiert am offenen Herzen.
