JavaScript forEach() Array Function

javascript foreach function JavaScript is the Programming Language. It is used in HTML and WEB Based application. JavaScript is load only client side. But JavaScript loads separately for every tab of browser. JS is very useful because it helps to change dynamically HTML and Cascading Style Sheets (CSS). JavaScript plays important role in programming. Because it helps to increase load time.

ForEach() Function is used to iterate the items of javascript Array. This method calls for each element of Array.

Example : JS Array contains four elements. So JS forEach() function calls 4 times.

Javascript foreach Syntax

jsArray.forEach(function functionName (arrayValue, index, arr), thisValue);

So in the above Syntax, we have created a function within the forEach function. But we can also make it separately and pass function name in forEach function.

jsArray.forEach(functionName, thisValue);

function functionName(arrayValue, index, arr){

}

JS forEach function accepts maximum 2 parameters.

First one is function name.
Second one is thisValue (This is optonal parameter).

Function contains maximum 3 parameters.

arrayValue : It stores the latest value of Array.
index : Index stores the position of latest value of Arraay.
arr : It stores the full array elements.

Eample 1 : In the following example, we will mention only one parameter “item”. So this example will print the current array element value.

<!DOCTYPE html>
<html>

<head>
	<title>DEVELOPER HELPS</title>
</head>
<body>

<h2>JavaScript ForEach Fuction</h2>
<p id="lang"></p>
<script type="text/javascript">

var arrayElements= [10,20,30,40,50];
arrayElements.forEach(myIterateFunction);

function myIterateFunction(item) {
  document.getElementById("lang").innerHTML += "Item : "+item+"<br>";
}

</script>
</body>
</html>

Output :

Item : 10
Item : 20
Item : 30
Item : 40
Item : 50

Eample 2 : In the following example, we will mention two parameters “item” and “index”. So it will print the current array element and index value.

<!DOCTYPE html>
<html>
<head>
	<title>DEVELOPER HELPS</title>
</head>
<body>
<h2>JavaScript ForEach Fuction</h2>
<p id="lang"></p>

<script type="text/javascript">

var arrayElements= [10,20,30,40,50];
arrayElements.forEach(myIterateFunction);

function myIterateFunction(item, index){
  document.getElementById("lang").innerHTML += "item "+item+" index "+index+"<br>";
}

</script>

</body>
</html>

Output :

item 10 index 0
item 20 index 1
item 30 index 2
item 40 index 3
item 50 index 4

Eample 3 : In the following example, we will mention three parameters “item”, “index”, “arr” . That will print the current array element, index value and prints whole array values. So it will work like following.

<!DOCTYPE html>
<html>

<head>
	<title>DEVELOPER HELPS</title>
</head>

<body>
<h2>JavaScript ForEach Fuction</h2>
<p id="lang"></p>

<script type="text/javascript">

var arrayElements= [10,20,30,40,50];
arrayElements.forEach(myIterateFunction);

function myIterateFunction2(item, index, arr) {
  document.getElementById("lang").innerHTML += "item "+item+" index "+index+" arr "+arr+"<br>";
}

</script>

</body>
</html>

Output :

item 10 index 0 arr 10,20,30,40,50
item 20 index 1 arr 10,20,30,40,50
item 30 index 2 arr 10,20,30,40,50
item 40 index 3 arr 10,20,30,40,50
item 50 index 4 arr 10,20,30,40,50