← Back to Concepts

Array forEach

Basic forEach with Even/Odd Check

The forEach method executes a callback function once for each array element - from first to last. Unlike map or filter, it doesn't return anything - i.e. you can't use it to transform the array. If the function you pass to forEach returns a value, it will be ignored. 

const numbers = [5, 8, 4, 1];
numbers.forEach((num) => {
  if (num % 2 === 0) {
    console.log(`${num} is even`);
  } else {
    console.log(`${num} is odd`);
  }
});

Key Points:

  • forEach() runs a callback for each element in the array - from first to last
  • It doesn't return anything - you can't use it to transform the array.
  • If you need to transform the array, use map() instead.

forEach with Array of Objects

forEach works on arrays of any type of elements: numbers, strings, objects, etc. It always runs the callback function for each element - from first to last. 

const students = [
  { name: "Alice", grade: "A" },
  { name: "Bob", grade: "B" }
];
students.forEach((student) => {
  console.log(`${student.name} got ${student.grade}`);
});

Key Points:

  • The callback parameter receives the entire object on each iteration
  • Use dot notation to access object properties inside the callback

forEach to Calculate a Sum

We can read and modify variables declared outside the callback function. This pattern is useful for accumulating results like totals or counts.
In this example we use let to declare the total variable because it will change. 

const prices = [10, 25, 15];
let total = 0;
prices.forEach((price) => {
  total = total + price;
});
console.log(total);

Key Points:

  • forEach can modify variables declared outside the callback function
  • Use let (not const) for variables that need to change and declare them before the callback function
  • For summing arrays, reduce() is often a better choice

forEach with Index Parameter

The callback function can receive a second parameter: the index of the current element in the array. This is useful when you need to know the position of the element in the array.
In this example we use the index to print the numbered list of tasks. 

const tasks = ["buy groceries", "wash dishes", "clean the house"];
tasks.forEach((task, index) => {
  console.log(`${index + 1}. ${task}`);
});

Key Points:

  • The second parameter gives you the index of the current element in the array
  • Array index always starts from 0

Comparison: forEach vs for..of

Both forEach and for..of iterate through arrays in the same way: from first to last element. The main difference is that forEach can provide the index of the current element as a second parameter, while for..of does not. 

const names = ["Alice", "Bob"];
names.forEach((name) => {
  console.log(`Hello, ${name}!`);
});

for (const name of names) {
  console.log(`Hello, ${name}!`);
}

Key Differences:

  • for..of allows break and continue — forEach does not
  • forEach provides the index easily as a second parameter
  • Use for..of when you need to exit early; use forEach for simple iterations from first to last element