JS Loop For In

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript For In

The For In Loop

The JavaScript for in statement loops through the properties of an Object:

Syntax

for (key in object) {

  // code block to be executed

}

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For In Loop</h2>

<p>The for in statement loops through the properties of an object:</p>

<p id=”demo”></p>

<script>

const person = {fname:”John”, lname:”Doe”, age:25};

let txt = “”;

for (let x in person) {

  txt += person[x] + ” “;

}

document.getElementById(“demo”).innerHTML = txt;

</script>

</body>

</html>

Output

JavaScript For In Loop

The for in statement loops through the properties of an object:

John Doe 25

Example Explained

The for in loop iterates over a person object

  • Each iteration returns a key (x).
  • The key accesses the value of the key.
  • The value of the key is person[x].

For In Over Arrays

The JavaScript for in statement loops over the properties of an Array:

Syntax

for (variable in array) {

  code

}

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For In</h2>

<p>The for in statement can loops over array values:</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

let txt = “”;

for (let x in numbers) {

  txt += numbers[x] + “<br>”;

}

document.getElementById(“demo”).innerHTML = txt;

</script>

</body>

</html>

Output

JavaScript For In

The for in statement can loops over array values:

Array.forEach()

The forEach() method calls a function (a callback function) once for each array element.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

let txt = “”;

numbers.forEach(myFunction);

document.getElementById(“demo”).innerHTML = txt;

function myFunction(value, index, array) {

  txt += value + “<br>”;

}

</script>

</body>

</html>

Output

JavaScript Array.forEach()

Calls a function once for each array element.

45
4
9
16
25

The function takes 3 arguments:

  • The item value.
  • The item index.
  • The array itself.

The example above uses the value parameter. It can be rewritten to:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

let txt = “”;

numbers.forEach(myFunction);

document.getElementById(“demo”).innerHTML = txt;

function myFunction(value) {

  txt += value + “<br>”;

}

</script>

</body>

</html>

Output

JavaScript Array.forEach()

Calls a function once for each array element.

45
4
9
16
25