{"id":20,"date":"2025-10-12T20:02:00","date_gmt":"2025-10-12T18:02:00","guid":{"rendered":"https:\/\/romejs.dev\/2025\/10\/12\/javascript-foreach\/"},"modified":"2026-01-27T12:41:16","modified_gmt":"2026-01-27T11:41:16","slug":"javascript-foreach","status":"publish","type":"post","link":"https:\/\/romejs.dev\/javascript-foreach\/","title":{"rendered":"JavaScript forEach richtig nutzen: Syntax, Stolperfallen, Alternativen und Best Practices"},"content":{"rendered":"

Wenn du Arrays in JavaScript<\/a> iterieren willst, bietet dir Array.prototype.forEach<\/strong> eine klare, gut lesbare und funktionale M\u00f6glichkeit, f\u00fcr jedes Element Nebenwirkungen auszuf\u00fchren. In diesem Artikel zeige ich dir, wie du javascript foreach<\/em> korrekt einsetzt, wann du besser andere Iterationsformen verwendest und welche Details in der Praxis wirklich z\u00e4hlen \u2013 inklusive Codebeispielen, Vergleichstabellen, Performance-Hinweisen und konkreten Empfehlungen.<\/p>\n

Was forEach ist \u2013 und wof\u00fcr du es einsetzt<\/h2>\n

forEach<\/code> f\u00fchrt eine Callback-Funktion f\u00fcr jedes vorhandene Element<\/em> in einem Array aus, in aufsteigender Index-Reihenfolge. Die Methode gibt immer undefined<\/code> zur\u00fcck und ist damit ideal f\u00fcr Nebenwirkungen<\/strong> (z. B. Logging, DOM-Manipulation, mutierendes Updaten externer Strukturen). Sie ist weniger geeignet f\u00fcr Transformationen, denn sie erzeugt kein neues Array \u2013 daf\u00fcr sind map<\/code> oder filter<\/code> zust\u00e4ndig.<\/p>\n

\n

Kernaussage:<\/strong> Nutze forEach<\/code> f\u00fcr Nebenwirkungen pro Element. Nutze map<\/code>\/filter<\/code>\/reduce<\/code> f\u00fcr Transformationen und Aggregation.<\/p>\n<\/blockquote>\n

Syntax und Parameter<\/h2>\n
array.forEach(callback[, thisArg])\n<\/code><\/pre>\n
Die Callback-Funktion erh\u00e4lt bis zu drei Parameter: den aktuellen Wert, den Index und eine Referenz auf das gesamte Array. Optional kannst du den this<\/code>-Kontext \u00fcber thisArg<\/code> setzen (gilt nur bei traditionellen Funktionen, nicht bei Pfeilfunktionen).<\/p>\n
Eine pr\u00e4zise Indizierung<\/a> der Elemente unterst\u00fctzt dich dabei, deren Position im Array eindeutig zu identifizieren.<\/p>\n\n\n\n\n\n\n\n\n\n
Parameter<\/th>\nTyp<\/th>\nBeschreibung<\/th>\n<\/tr>\n<\/thead>\n
callback<\/code><\/td>\nFunction<\/td>\nWird f\u00fcr jedes vorhandene Element aufgerufen.<\/td>\n<\/tr>\n
currentValue<\/code><\/td>\nT<\/td>\nAktueller Elementwert.<\/td>\n<\/tr>\n
index<\/code><\/td>\nnumber<\/td>\nNullbasierter Index des Elements.<\/td>\n<\/tr>\n
array<\/code><\/td>\nT[]<\/td>\nReferenz auf das Array, auf dem forEach<\/code> aufgerufen wurde.<\/td>\n<\/tr>\n
thisArg<\/code><\/td>\nany (optional)<\/td>\nWert f\u00fcr this<\/code> innerhalb des Callbacks (nicht bei Pfeilfunktionen).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Beispiel mit traditioneller Funktion und thisArg<\/code>:<\/p>\n
const nums = [1, 2, 3];\nconst ctx = { factor: 10 };\n\nnums.forEach(function (n) {\n  console.log(n * this.factor);\n}, ctx);\n\/\/ Ausgabe: 10, 20, 30\n<\/code><\/pre>\n
Beispiel mit Pfeilfunktion (lexikalisches this<\/code>, thisArg<\/code> wird ignoriert):<\/p>\n
const nums = [1, 2, 3];\nconst factor = 10;\n\nnums.forEach(n => {\n  console.log(n * factor);\n});\n<\/code><\/pre>\n
\"javascript<\/p>\n
Praxisbeispiele \u2013 korrekt und idiomatisch<\/h2>\n
Ein einfacher Start: Logge jedes Element.<\/p>\n
['Apfel', 'Birne', 'Banane'].forEach(frucht => console.log(frucht));\n<\/code><\/pre>\n
Typischer Anti-Pattern-Versuch (Transformation mit forEach<\/code>):<\/p>\n
\/\/ Bitte nicht so:\nconst input = [1, 2, 3];\nconst doubled = [];\ninput.forEach(n => doubled.push(n * 2));\n<\/code><\/pre>\n
Besser mit map<\/code>:<\/p>\n
const input = [1, 2, 3];\nconst doubled = input.map(n => n * 2);\n<\/code><\/pre>\n
DOM\/NodeList: In modernen Browsern kannst du NodeLists direkt iterieren. Sehr n\u00fctzlich f\u00fcr UI-Initialisierung.<\/p>\n
document.querySelectorAll('button').forEach(button => {\n  button.addEventListener('click', () => {\n    \/\/ handle click\n  });\n});\n<\/code><\/pre>\n
Aggregation (z. B. Summe) geht mit forEach<\/code>, aber reduce<\/code> ist idiomatischer:<\/p>\n
\/\/ Mit forEach\nlet sum = 0;\n[1, 2, 3, 4].forEach(n => { sum += n; });\n\n\/\/ Mit reduce (empfohlen)\nconst sum2 = [1, 2, 3, 4].reduce((acc, n) => acc + n, 0);\n<\/code><\/pre>\n
Kontrollfluss: Warum du mit forEach nicht \u201ebreaken\u201c kannst<\/h2>\n
forEach<\/code> unterst\u00fctzt kein<\/strong> break<\/code> oder continue<\/code>. Ein return<\/code> im Callback beendet nur die aktuelle Callback-Ausf\u00fchrung \u2013 es wirkt wie ein lokales \u201econtinue\u201c, nicht wie break<\/code> auf die gesamte Iteration. Wenn du fr\u00fchzeitig abbrechen willst, sind folgende Alternativen sinnvoll:<\/p>\n