Code has been added to clipboard!

forEach

Reading time 2 min
Published Aug 10, 2017
Updated Oct 10, 2019

JavaScript forEach: Main Tips

  • JavaScript forEach() applies a specified function for every item in a particular array individually.
  • This method only executes the specified function in an array item which has a value.
  • It's return value is undefined.
  • This loop was introduced with ECMAScript 3.

Usage and Purpose of forEach

The JavaScript forEach() loop is used when you want to inflict a specific method to an entire array.

Remember: arrays are lists of elements.

If you need to invoke a function to all of the array items, it's best that you apply the JavaScript array forEach loop.

The forEach() code example we have here uses a number you input to multiply every number the array contains with, and display the result in the container name demo:

Example
<button onclick="numbers.forEach(myFunction)">Multiply</button>

Now, this example takes every value in the array, and displays the sum of those values:

Example
var sum = 0;
var numbers = [58, 45, 122, 787];
function myFunction(item) {
    sum += item;
    sumspan.innerHTML = sum;
}

There are no limitations when it comes to the functions you can call on elements with the JavaScript forEach(). You can modify the items using any JavaScript function.

The specified method will not be applied to elements that have no value. For instance, the forEach JavaScript method will not affect sparse arrays in which most of the items do not have values.

The following example shows the usage of JavaScript forEach():

Example
var numbers = [8, 2, 5];
numbers.forEach((item) => {
    document.writeln(item);
});

forEach Syntax Explained

Take a look at the code snippet below. In it, you can see the correct syntax used or writing the JavaScript forEach():

array.forEach(function(current_Value, index, array), this_Value)

The forEach JavaScript can have two main parameters: the function to be applied to the array items, and this_Value. The specified function has its arguments as well:

  • The current_value indicates the value of the currently-processed item.
  • The second parameter reveals the index of the same element.
  • The last argument is called array, and indicates the array the function is going to affect.

Note: only current_value is required to enter - the other parameters are optional.

Parameter Description
function(current_value, index, array) Needed. A function each array element to be run.
this_Value Optional. A value to be its this value.
If skipped, it will be passed as undefined.
What Is JavaScript Used For?
Tutorial
Introduction
Output
Syntax
Comment
Commands
Operators
Comparison and Logical Operators
Data Types
Math.random()
Type Conversion
Function Definitions
Events
Objects
Object Properties
Prototype
Array
Sorting Arrays
Strings
Numbers
Number Format
Math Object
Onclick Event
Date
Date Formats
Scope
Regular Expressions
Reserved Words
Common Mistakes
Performance
Forms
Form Validation
Window: The Browser Object Model
Popup Boxes
Cookies
JSON
AJAX Introduction
AJAX Form
Automatic File Download
Functions
Array Methods
String Methods
Date Methods
Timing Events
Cheat Sheet
JavaScript in HTML
HTML DOM Methods
HTML DOM Changing HTML
HTML DOM Animation
HTML DOM EventListener
HTML DOM Navigation
HTML DOM NodeList
HTML DOM Element Nodes
Array Functions
Boolean
Calling a Function
Date Functions
Global Objects
Input Text
Operator
Statements
String Functions
Math
Math.random
Number
RegEx
alert
array.filter
array.length
array.map
array.reduce
array.push
array.sort
break and continue
className
confirm
decodeURIComponent
for
forEach
if
indexOf
innerHTML
location.reload
number.toString
onclick
onload
parseInt
prompt
replace
setAttribute
setInterval
setTimeout
slice
splice
string.includes
string.indexOf
string.split
style.display
submit
substr
substring
switch
test
throw, try and catch
toLowerCase
toUpperCase
use strict
while
window.history
window.location
window.navigator
window.screen