JavaScript Array forEach() Method

JavaScript Array forEach() method iterates over each element in an array and execute a provided callback function once for each element. Unlike some other array methods, forEach() does not return a new array or value—it is used solely for performing operations on each array element.

Pre-requisites to Learn

• JavaScript Array

Syntax

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

Parameters

Parameter	Description
callback (Required)	A function to execute for each element in the array.
element (Required)	The current element being processed in the array.
index (Optional)	The index of the current element being processed.
array (Optional)	The array forEach() was called on.
thisArg (Optional)	A value to use as this when executing the callback function. Defaults to undefined.

Return Value

The forEach() method does not return anything (undefined). It is used for its side effects, such as modifying elements or performing actions.

Notes:

• It iterates Over Each Element of the array. It executes the callback function for every element in the array.
• It does not modify the original array but can be used to manipulate array elements via side effects.

Examples of JavaScript Array forEach() Method

Example 1: Printing Array Elements – This method iterates over the array and logs each element to the console.

let arr = [1, 2, 3, 4, 5];

arr.forEach(num => console.log(num));
// Output:
// 1
// 2
// 3
// 4
// 5

Example 2: This method provides access to the index of each element during iteration.

let fruits = ['apple', 'banana', 'cherry'];

fruits.forEach((fruit, index) => {
  console.log(`Index: ${index}, Fruit: ${fruit}`);
});

// Output:
// Index: 0, Fruit: apple
// Index: 1, Fruit: banana
// Index: 2, Fruit: cherry

Example 3: While forEach() doesn’t return a new array, you can use it to modify objects within the array.

let users = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 }
];

users.forEach(user => {
  user.isActive = true;
});

console.log(users);

// Output:
// [
//   { name: 'John', age: 25, isActive: true },
//   { name: 'Alice', age: 30, isActive: true },
//   { name: 'Bob', age: 20, isActive: true }
// ]

Example 4: Handling Sparse Arrays – The forEach() method skips over empty slots in sparse arrays.

let sparseArray = [1, , 3, 4];

sparseArray.forEach(num => {
  console.log(num);
});

// Output:
// 1
// 3
// 4

Example 5: Stopping Execution – Unlike for or for…of loops, you cannot break or exit early from a forEach() loop.

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

numbers.forEach(num => {
  if (num > 3) {
    return; // This does not stop the loop
  }
  console.log(num);
});

// Output:
// 1
// 2
// 3

Supported Browsers

Browser	Support
Chrome	1+
Firefox	1.5+
Safari	3+
Edge	12+
Opera	9.5+
Internet Explorer	9+

Comparison with Other Methods

Method	Purpose
Array.forEach() Method	Executes a function for each array element but does not return a value.
Array.map() Method	Creates a new array by transforming each element using the callback function.
Array.filter() Method	Creates a new array with elements that satisfy a given condition.
for Loop	Provides more control over iteration, including breaking or continuing execution.