Array forEach() Method in JavaScript

Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

In this article, we are going to discuss forEach in javascript. The forEach() method iterates over the items of an array by calling a function. The forEach() in javascript can also be used with Maps and Sets. For each array element, the method forEach() in javascript calls the specified function once. The method forEach() in javascript is not executed for empty elements. forEach() in javascript is a feature of ECMAScript5 (ES5). All browsers fully support ES5 (JavaScript 2009).

Also Check- Complete JavaScript Tutorial

What is Array forEach() in Javascript?

For each item in an array, forEach() invokes a specified callbackFn function once in ascending index order. It isn't called if an index property has been deleted or isn't initialized.

callbackFn is invoked with three parameters:

  • the value of the element
  • the index of the element
  • the Array object being traversed.

If forEach() provides a thisArg parameter, it will be utilized as the callback's this value. callbackFn observes the value of thisArg in the end.

Before the initial invocation of callbackFn, the range of elements processed by forEach() is configured. CallbackFn will not visit elements that are assigned to indexes that have already been visited or to indexes beyond the range. Existing array items will have their value as passed to callbackFn when forEach() traverses them; elements that are deleted before being traversed will not be visited. Later elements will be skipped if previously visited elements are deleted (e.g. using shift()) during the iteration.

For each array element, forEach() calls the callbackFn function once; unlike map() and reduce(), it always returns undefined and is not chainable. The most common use case is for negative effects to be executed at the end of a chain.

The array on which forEach() is called is not modified.

Syntax of Array forEach() in Javascript

The following is the syntax of forEach() in javascript.

Parameters of Array forEach() in Javascript:

The following are the parameters of forEach() in Javascript:

  • callbackFn: This argument contains the method that will be called for each array element. It is a mandatory parameter.

  • Element: The value of the elements that are currently being processed is stored in this parameter. This parameter is mandatory.

  • Index: This is an optional parameter that contains the index of the current value element in the array, starting at 0.

  • Array: This parameter is optional and contains the entire array on which the Array is being used.

  • thisArg: This argument is optional; it holds the context that will be given as this and used while the callback function is being executed. If the context is given, it will be used in this way for each callback function invocation; otherwise, undefined will be used by default.

Return Value of Array forEach() in Javascript

Return value: undefined

The return value of this method is always undefined. This method may or may not affect the original array given, depending on the argument function's functionality.

Example:

The following is an example of forEach in javascript.

Output:

More Examples for Understanding

Example 1: No operation for uninitialized values

Output:

Explanation: The callback function was not invoked because a value between 20 and 30 was absent.

2. Converting a for loop to forEach

Output:

Explanation: The above example explains how to convert a for loop to forEach() in javascript.

3. Flat an array with forEach

Output:

Explanation: To merge two or more arrays, use the concat() function. This approach creates a new array rather than altering the current ones.

Browser compatibility

The forEach() method in javascript is supported by all the browsers such as Chrome, Edge, Safari, Opera, etc.

Conclusion

  • The forEach() method in javascript iterates over the items of an array by calling a function.
  • Maps and Sets can also use the forEach() method in javascript.
  • For each array element, the forEach() method calls the specified function once.
  • We also looked at the three parameters of callbackFn.
  • We've looked at a few different forEach() in javascript examples.
  • Array forEach() in Javascript accepts five Parameters.

See Also

There are also JavaScript articles that are related to this topic. Look it up as well.