javascript foreach

JavaScript Array forEach() Function

javascript foreach function JavaScript is the Programming Language. It is used in HTML and WEB Based application. JS is used in Client Side. 

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. forEach() function calls 4 times.

Javascript foreach Syntax

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

In the above Syntax, we have created a function within the forEach function. We can 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”. That 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”. That 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.

<!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

Javascript foreach

In the all above examples, we have created seprate function. We can also create function inside the forEach function. 

Example : 

<!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(function myIterateFunction(item) {
  document.getElementById("lang").innerHTML += "Item : "+item+"<br>";
});

</script>

</body>
</html>

Output : 

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

Thanks for the reading post. I hope you like and understand the post. If you have any doubt regarding this post please comment below.

More Related Post

Leave a comment

Your email address will not be published. Required fields are marked *

0 0 0
FOLLOW ON