JavaScript forEach: Callback auf Array-Elemente

JavaScript-Array-forEach (Array.prototype.forEach) führt einen Callback einmal pro Element in einem Array in Index-Reihenfolge aus. Verwende einen JavaScript-forEach-Loop für Side Effects wie Logging, DOM-Updates oder das Aktualisieren einer äußeren Variable, wenn du kein break oder await brauchst. Weil die Methode undefined zurückgibt, ist sie das falsche Werkzeug für Transformationen (map) oder Suchen, die früh stoppen können (find, some). Für Kontrollfluss ist eine for...of-Schleife meist die bessere Wahl.

JavaScript-forEach-Beispiel für Array-Iteration

Ausgabe:

0: rot
1: grün
2: blau

So funktioniert dieses Beispiel

1. farben enthält drei Strings in einem Array.
2. forEach ruft die Arrow-Function einmal pro Element auf und übergibt dabei das aktuelle Element und seinen nullbasierten Index als Argumente.
3. Der Callback protokolliert jede Farbe zusammen mit ihrer Position. forEach verarbeitet Elemente in aufsteigender Index-Reihenfolge und überspringt leere Slots in sparse Arrays.

Häufige forEach-Fallen

forEach mit async/await verwenden:

Falsch:

const urls = ["https://example.com/a", "https://example.com/b"];

urls.forEach(async (url) => {
  await fetch(url);
});
console.log("fertig"); // läuft sofort

Richtig:

for (const url of urls) {
  await fetch(url);
}

forEach wartet nicht auf Promises, die der Callback zurückgibt. Verwende for...of für sequentielles await oder await Promise.all(urls.map((url) => fetch(url))) für parallele Arbeit.

Versuchen, forEach vorzeitig zu beenden:

Falsch:

const elemente = ["a", "b", "c"];
const ziel = "b";

elemente.forEach((element) => {
  if (element === ziel) break; // SyntaxError
});

Richtig:

const gefunden = elemente.find((element) => element === ziel);

forEach kann nicht früh aussteigen. Verwende find/some für Short-Circuit-Suchen oder for...of, wenn du break brauchst.

forEach vs map vs for…of

Verwende forEach für Side Effects, wenn früher Ausstieg und await nicht erforderlich sind. Verwende map, wenn das Ergebnis ein transformiertes Array sein soll. Verwende for...of, wenn du break, continue oder sequentielles await brauchst.

FAQ

Kann man JavaScript-forEach vorzeitig beenden?

Nein. forEach führt den Callback für jedes Element aus. Eine Exception zu werfen stoppt die Iteration zwar, ist aber ein Anti-Pattern. Verwende for...of mit break oder find/some/every für Short-Circuit-Suchen.

Verändert forEach das ursprüngliche Array?

forEach selbst verändert das Array nicht. Der Callback kann Objekt-Elemente direkt verändern, weil er Referenzen und keine Kopien erhält. Primitive Werte wie Zahlen und Strings werden by value übergeben und lassen sich nicht über den Callback-Parameter ändern.

Was ist der Unterschied zwischen forEach und map?

forEach gibt undefined zurück und ist für Side Effects gedacht. map gibt ein neues Array zurück, das aus den Rückgabewerten des Callbacks aufgebaut wird. Wenn das Ziel eine Datentransformation ist, nutze map; wenn das Ziel Aktionen wie Logging oder DOM-Updates sind, nutze forEach.