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.
454
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.
454
9
16
25