Javascript forEach is an built-in array method that loops through an array and executes a function on each element in the array.
Syntax
forEach method takes a callback function as its parameter. This function can be a named, anonymous or arrow function. Here are three different syntax variations of the forEach method in JavaScript:
const array = [1,2,3,4,5]
// Using a named function:
function callback(currentElement,index,arr) {
console.log(currentElement);
}
array.forEach(callback);
// Using an anonymous function:
array.forEach(function(currentElement, index, arr) {
console.log(currentElement);
});
// Using an arrow function:
array.forEach((currentElement, index, arr) => {
console.log(currentElement);
});
Parameters
The callback function can take up to three parameters:
- currentElement: The current element being processed
- index: The index of the current element in the array
- arr: The original array itself (array) .
Examples
Print Each Element In The Array
In this basic example, we're using the forEach() to iterate through the array of numbers and print each number to the console using the console.log() method.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
// 1, 2, 3, 4, 5
});
We can also print the index of each element in the array, like this:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number, index) {
console.log(`Index: ${index}, Number: ${number}`);
});
/*
Index: 0, Number: 1
Index: 1, Number: 2
Index: 2, Number: 3
Index: 3, Number: 4
Index: 4, Number: 5
*/
Sum Values In An Array
To sum all the values in the array, the forEach method iterates through each item in the array and adds each value to the sum variable.
const values = [1, 2, 3, 4, 5];
let sum = 0;
values.forEach(value => {
sum += value;
});
console.log(sum); // Output: 15
After the forEach loop is finished, the sum variable contains the total sum of all the values in the array.
foreach vs for
for
Javascript foreach method is alternative to the for loop. While both of these loops can achieve the same goal, they differ in their syntax, performance and flexibility.
The for loop is a looping construct that has been a part of programming languages for many years. It's a very basic loop that allows you to iterate through an array and perform an action on each element. The syntax of the for loop is as follows:
for (let i = 0; i < array.length; i++) {
//code to execute on each element
}
The for loop is generally faster than the forEach loop, especially when you have a large array with many elements. This is because the for loop only needs to perform a simple operation on each element, while the forEach loop needs to execute a function on each element.
Additionally, the for loop provides us with greater control over the iteration because we can set limits for execution.
forEach
One advantage of the forEach loop over the for loop is that it's more flexible. The forEach loop allows you to pass a function as a parameter, which provides more clear and readable code for complex usages.
Conclusion
The javascript forEach method is a powerful method while working on arrays. It gets a callback function as an parameter and call this callback function for each element to perform actions over the elements.
More
If you want to learn more javascript array methods, you can take a look at guides for the map and reduce methods
Thank you for reading.