In this article, We are going to learn about the JavaScript forEach() function. These days, almost in every field JavaScript is used either it is frontend or backend.

There are lots of ways to do the same things. Every programmer/developer has its own way to do the things. In this article, We are going to answer on the that question which is mostly search in the google.

Let’s move and learn how to use the JavaScript forEach() function.

JavaScript forEach() Function Description

JavaScript forEach() is a JavaScript array method. forEach() calls a provided callback function once for each element of the array. It can be only used on Arrays, Map and Sets Datatypes of the JavaScript.

The provided callback function can perform any type of operation on the element of the given array. The callback function can be like storing the data into the database etc.

JavaScript forEach() Function Syntax

arr.forEach(function callback(currentValue [, index [, array]]) {
    //your iterator
}[, thisArg]);

Parameters of the JavaScript forEach() function

Let’s understand the syntax of the forEach() method in detail.

Callback

This is a function which is perform on each element of the given array. It takes three arguments:

currentValue

This is the current element being processed by the callback function. This is the required field of the callback function.

index

This is the current index of the processed element of the given array. This field is optional in the callback.

array

This is the optional field of the callback function. This is the array on which forEach() function was called.

thisArg

Value to use as this when executing callback.

Return value of the JavaScript forEach() function

JavaScript forEach() function does not return any value. If you want to console the return value then it will be undefiend.

Example

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

numbers.forEach(number => {
    console.log(number);
});

//output
1
2
3
4
5

When to use foreach() function

Every new developer confuses about the for and forEach uses. They can’t decide which one is better for them and which has a good in terms of the speed?

Below is the some reason why people love to use forEach Function:

  • forEach() function provides better readability then the for loop function.
  • In the forEach() function, error probability is less than the for a loop. Let’s understand this with an example.
let colors = ['red', 'blue', 'pink', 'orange'];

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

//forEach function
colors.forEach(color => console.log(color));

//for loop with a silly mistake
for(let i=0; i<= colors.length; i++){
   console.log(colors[i]);
}

In the above example, there is a silly mistake in the conditional operator of the for loop which causes the error in the code. Such type of error can be easily avoided by using the forEach() function.

Note:

There is no way to break a forEach() function. If you want to break the loop then you must use the for loop instead of JavsScript forEach() function.

Conclusion

This is all about the JavaScript forEach() function. In this article, I tried to cover most of the things related to the forEach() function of the JavaScript.

If you look at the performance of the forEach() function with the for function then for loop is faster than the foreach() function.

Hope this article helps you a lot to understand the forEach() function of the JavaScript. If you have any doubt or suggestion then comment in the comment box.

Codecademy Web Development
Pin It