...

Web Technologies - JAVASCRIPT

Back to Course

Lesson Description


Lession - #233 Javascript Loop For In


The For In Loop In JavaScript

The JavaScript for in statement loops through an Object's properties:

(key in object>
syntax / code block to be executed
for (key in object>
{
// code block to be executed
}


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For In Loop</h2>
<p>The for in statement runs through an object's properties:</p>

<p id="demo"></p>

<script>
const man = {fname:"Sunil", lname:"Naik", age:45}; 

let txt = "";
for (let x in man>
{ txt += man[x] + " "; } document.getElementById("demo">
.innerHTML = txt; </script> </body> </html>

Output:
Sorry cannot be displayed
Try it here

Explanation of an Example

  • The for in loop loops through a person object.

  • Each iteration yields a key (x>

  • The key is used to gain access to the key's value.

  • The key's value is person[x].


  • For In Over Arrays

    The JavaScript for in statement can also loop through an Array's properties:
    Syntax
    for (variable in array>
    {
    code
    }

    <!DOCTYPE html>
    <html>
    <style>
    body{
    background-color:white;
    }
    </style>
    <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:
    Sorry cannot be displayed
    Try it here


    Array.forEach(>

    For each array element, the forEach(>
    method calls a function (a callback function>
    .

    <!DOCTYPE html>
    <html>
    <style>
    body{
    background-color:white;
    }
    </style>
    <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:
    Sorry cannot be displayed
    Try it here


    It is worth noting that the function accepts three arguments:

  • The item's worth

  • The index of items

  • The array in question

  • The value parameter is the only one used in the preceding example. It can be rewritten as follows:
    <!DOCTYPE html>
    <html>
    <style>
    body{
    background-color:#ffffff;
    }
    </style>
    <body>
    <h2>JavaScript Array.forEach(>
    </h2> <p>For each array element, it calls a method once.</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:

    Sorry cannot be displayed

    Try it here