JavaScript Array forEach() Method

JavaScript Array forEach() method is used to execute a given function once for each element in an array. This method does not execute on an empty array.

Syntax

array.forEach(function(currentValue, index, arr), thisValue)

Parameters

  1. function(required): It is a function that is called on every element of the array
  2. currentValue(required): It is the current element in an array that is iterating.
  3. index(optional): It is the current element index of an array.
  4. arr(optional): It is an array object to which the current element belongs.
  5. thisValue(optional): It is the value to be passed to the function to be used as its “this” value.

Return value

None(undefined).

Visual RepresentationVisual Representation of JavaScript Array forEach() Method

Example 1: How to Use Array forEach() method

var arr = [5, 10, 15, 20, 25];
var newArray = [];

arr.forEach(function(item) {
  newArray.push(item + 21);
});

console.log(newArray);

Output

[ 26, 31, 41, 46, 51 ]

Example 2: Use Arrow functionVisual Representation of Use Arrow() function

let arr = [5, 10, 15, 20, 25];

arr.forEach(arr => console.log(arr));

Output

5
10
15
20
25

Example 3: Using Map with Sets

let map = new Map();

map.set('country', 'US');
map.set('state', 'California');
map.set('country code', '+1');

map.forEach (f1);

function f1(value, key) {
 
 console.log(key + ':' + value);
}

Output

country:US
state:California
country code:+1

Example 4: Converting a for loop to forEach

let arr = [5, 10, 15, 20, 25];
const arr_copy = []

// using for loop
for (let i = 0; i < arr.length; i++) {
 arr_copy.push(arr[i]);
}
console.log(arr_copy);


//using forEach()
const arr_foreach = []
arr.forEach((element) => {
 arr_foreach.push(element);
});
console.log(arr_foreach);

Output

[ 5, 10, 15, 20, 25 ]
[ 5, 10, 15, 20, 25 ]

Example 5: Using forEach() to retrieve Array indexesArray index in the forEach() method

let arr = [5, 10, 15, 20, 25];
let newArray = [];

arr.forEach((item, i) => console.log(i));

Output

0
1
2
3
4

Example 6: Using set

let set1 = new Set([5, 10, 15, 20]);

set1.forEach(f1);

function f1(item) {
 console.log(item);
}

Output

5
10
15
20

Example 7: Using sparse arrays

let arr = [];
arr[5] = 'data';
arr[10] = 'base';

arr.forEach(function(element, index) {
  console.log('Element ' + element + ' exists at index ' + index + '.');
});

Output

Element data exists at index 5.
Element base exists at index 10.

Example 8: Using non-array objects

You can call it on array-like or iterable objects, such as the arguments object, a NodeList from a DOM query, or any object with a length property and indexed elements.

function logArguments() {
  Array.prototype.forEach.call(arguments, function (arg) {
    console.log(arg);
  });
}

logArguments('hello', 'world', '!');

Output

hello
world
!

Browser Compatibility

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 1.5 and above
  • Opera 9.5 and above
  • Safari 3 and above

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.