The forEach loop in JavaScript provides an easy and readable way to iterate over the elements of an array. It is a built-in method for arrays that executes a provided function once for each array element. In this article, we will explore how to use the forEach
loop, providing detailed explanations and complete code examples for different use cases.
Basic Usage of forEach Loop
The forEach() method executes a provided function once for each array element in ascending order. This function can take up to three arguments: the current element, the index of the current element, and the array itself.
Syntax
array.forEach(function(element, index, array) {
// Code to be executed for each element
});
- element: 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 upon.
Example: Basic Iteration
let arr = [10, 20, 30, 40, 50]; arr.forEach(function(element) { console.log(element); });
Output
10
20
30
40
50
In this example, the forEach loop iterates over each element in the numbers
array and prints it to the console.
Using forEach() Loop with Index
You can also use the index of each element during iteration. This can be useful when you need to know the position of each element.
Example: Iteration with Index
let arr = [10, 20, 30, 40, 50]; arr.forEach(function(element, index) { console.log(index + ' => ' + element); });
Output
0 => 10
1 => 20
2 => 30
3 => 40
4 => 50
In this example, the forEach loop iterates over each element in the array and prints both the index and the element to the console.
Using forEach() Loop with Arrow Functions
You can use arrow functions to make the code more concise. Arrow functions provide a shorter syntax for writing function expressions.
Example: Using Arrow Functions
let arr = [10, 20, 30, 40, 50]; arr.forEach((element, index) => { console.log(`${index} => ${element}`); });
Output
0 => 10
1 => 20
2 => 30
3 => 40
4 => 50
In this example, the forEach() loop uses an arrow function to iterate over each element in the array and prints both the index and the element to the console.
Modifying Array Elements
Although you cannot directly modify the original array elements within a forEach() loop, you can modify the objects if the array contains objects.
Example: Modifying Objects in an Array
let users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 } ]; users.forEach(user => { user.age += 1; }); console.log(users);
Output
[
{ name: 'Alice', age: 26 },
{ name: 'Bob', age: 31 },
{ name: 'Charlie', age: 36 }
]
In this example, the forEach() loop iterates over each object in the users
array and increments the age property by 1.
Using forEach() Loop with Additional Parameters
The third parameter of the forEach() callback function is the array itself. This can be useful if you need to access the entire array within the loop.
Example: Accessing the Array
let arr = ['a', 'b', 'c']; arr.forEach((letter, index, array) => { console.log(`Index: ${index}, Value: ${letter}`); });
Output
Index: 0, Value: a
Index: 1, Value: b
Index: 2, Value: c
In this example, the forEach() loop iterates over each element in the array and prints the index, the element, and the entire array to the console.