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
- function(required): It is a function that is called on every element of the array.
- currentValue(required): It is the current element in an array that is iterating.
- index(optional): It is the current element index of an array.
- arr(optional): It is an array object to which the current element belongs.
- thisValue(optional): It is the value to be passed to the function to be used as its “this” value.
Return value
None(undefined).
Visual Representation
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 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 indexes
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
Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.