JavaScript Array forEach() Method

What You’ll Learn

The forEach() method runs a function on every array element for side effects—logging, summing into a variable, updating the DOM. It returns undefined, unlike map(). This tutorial covers syntax, five examples, when to choose forEach over other loops, and common pitfalls.

Introduction

Loops are everywhere in JavaScript. The forEach() method gives you a clean, readable way to visit each element without writing index variables or managing loop conditions manually.

Use it when you want to do something with each item (log it, push to another array, update UI)—not when you need a transformed array back. For that, reach for map() or filter().

Understanding the forEach() Method

array.forEach(callback) calls your callback once per element, passing (element, index, array). The callback runs in ascending index order from 0 to length - 1.

The method itself always returns undefined. Any result you need must be stored in an outer variable or performed as a side effect (like writing to the console or DOM).

📝 Syntax

General form of Array.prototype.forEach:

array.forEach(callback(element, index, array), thisArg)

Parameters

• callback — function run for each element.
• element — current value in the callback.
• index — current index (optional in callback signature).
• array — the array being iterated (optional third callback arg).
• thisArg — optional this value inside the callback.

Return value

• Always undefined.
• Does not create a new array.
• Skips empty slots in sparse arrays.

Common patterns

• arr.forEach((x) => console.log(x)) — log each item.
• arr.forEach((n) => { sum += n; }) — accumulate in outer variable.
• arr.forEach((item, i) => { ... }) — use index when needed.
• arr.forEach(fn, context) — bind this with thisArg.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const fruits = ["apple", "banana", "cherry"];

fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});
// 0 apple
// 1 banana
// 2 cherry

0 apple
1 banana
2 cherry

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach((num) => {
  sum += num;
});

console.log(sum);
// 15

15

const numbers = [1, 2, 3, 4, 5];
const doubled = [];

numbers.forEach((num) => {
  doubled.push(num * 2);
});

console.log(doubled);
// [2, 4, 6, 8, 10]

[2, 4, 6, 8, 10]

const nums = [1, 2, 3];

const fromMap = nums.map((n) => n * 10);
const fromForEach = nums.forEach((n) => n * 10);

console.log("map:", fromMap);
// [10, 20, 30]

console.log("forEach:", fromForEach);
// undefined

map: [10, 20, 30]
forEach: undefined

const users = [
  { name: "Alex", role: "admin" },
  { name: "Sam", role: "editor" }
];

users.forEach((user) => {
  console.log(`${user.name} (${user.role})`);
});
// Alex (admin)
// Sam (editor)

Alex (admin)
Sam (editor)

🚀 Common Use Cases

• Console logging — inspect each element during development.
• DOM updates — create or update nodes for each list item.
• Accumulating totals — sum, count, or aggregate in outer variables.
• API side effects — send analytics or fire requests per item.
• Validation passes — check each entry and collect errors manually.
• Event setup — attach listeners to each element in a NodeList converted to array.

📝 Notes

• Return value is always undefined—not chainable like map.
• break and continue do not work; use a for loop instead.
• return in the callback only exits that one iteration.
• Avoid adding/removing items while iterating—can cause skipped or duplicate visits.
• Prefer reduce() for sums; filter() for conditional lists.
• ES5—excellent browser support including IE9+.

💡 Best Practices