How Can I Use For Loop In Java Script With Examples

admin_img Posted By Bajarangi soft , Posted On 25-09-2020

In Java Script A for-loop (or simply for loop) is a control flow statement for specifying iteration, which allows code to be executed repeatedly. So today we use for loops in java script

How Can I Use For Loop In Java Script With Examples

Different Kinds of Loops

JavaScript supports different kinds of loops:

  • for - loops through a block of code a number of times

  • for/in - loops through the properties of an object

  • for/of - loops through the values of an iterable object

  • while - loops through a block of code while a specified condition is true

  • do/while - also loops through a block of code while a specified condition is true

 

The For Loop

The for loop has the following syntax:

for (statement 1; statement 2; statement 3) {
// code block to be executed
}
 

Statement 1 is executed (one time) before the execution of the code block.

Statement 2 defines the condition for executing the code block.

Statement 3 is executed (every time) after the code block has been executed.

<script>
    var text = "";
    var i;
    for (i = 0; i < 5; i++) {
        text += "The number is " + i + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
</script>
 

From the example above, you can read:

Statement 1 sets a variable before the loop starts (var i = 0).

Statement 2 defines the condition for the loop to run (i must be less than 5).

Statement 3 increases a value (i++) each time the code block in the loop has been executed.

Statement 1

Normally you will use statement 1 to initialize the variable used in the loop (i = 0).

This is not always the case, JavaScript doesn't care. Statement 1 is optional.

You can initiate many values in statement 1 (separated by comma):

<script>
    var lang = ["JavaScript", "PHP", "Web", "Python"];
    var i, len, text;
    for (i = 0, len = lang.length, text = ""; i < len; i++) {
        text += lang[i] + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
</script>


And you can omit statement 1 (like when your values are set before the loop starts):
<script>
    var lang = ["JavaScript", "PHP", "Web", "Python"];
    var i = 2;
    var len = lang.length;
    var text = "";

    for (; i < len; i++) {
        text += lang[i] + "<br>";
    }

    document.getElementById("demo").innerHTML = text;
</script>
 

Statement 2

Often statement 2 is used to evaluate the condition of the initial variable.

This is not always the case, JavaScript doesn't care. Statement 2 is also optional.

If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

If you omit statement 2, you must provide a break inside the loop. Otherwise the loop will never end.

Statement 3

Often statement 3 increments the value of the initial variable.

This is not always the case, JavaScript doesn't care, and statement 3 is optional.

Statement 3 can do anything like negative increment (i--), positive increment (i = i + 15), or anything else.

Statement 3 can also be omitted (like when you increment your values inside the loop):

<script>
    var lang = ["JavaScript", "PHP", "Web", "Python"];

    var i = 0;
    var len = lang.length;
    var text = "";

    for (; i < len; ) {
        text += lang[i] + "<br>";
        i++;
    }
    document.getElementById("demo").innerHTML = text;
</script>


The For/In Loop

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

<script>
    var txt = "";
    var person = {fname:"Kiran", lname:"V", age:25};
    var x;
    for (x in person) {
        txt += person[x] + " ";
    }
    document.getElementById("demo").innerHTML = txt;
</script>





 

The For/Of Loop

The JavaScript for/of statement loops through the values of an iterable objects

for/of lets you loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more.

The for/of loop has the following syntax:
 

for (variable of iterable) {
// code block to be executed
}
 

variable - For every iteration the value of the next property is assigned to the variable. Variable can be declared with constlet, or var.

iterable - An object that has iterable properties.

 

Looping over an Array

<script>
    var lang = ["JavaScript", "PHP", "Web", "Python"];
    var x;

    for (x of lang) {
        document.write(x + "<br >");
    }
</script>
 

Looping over a String

<script>
    var txt = 'JavaScript';
    var x;

    for (x of txt) {
        document.write(x + "<br >");
    }
</script>


Complete code of For Loop In Java Script

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript For Loops</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>JavaScript For Loops</h1>
    </div>
    <br>
        <div class="well">
            <h1></h1>
            <h1 id="demo"></h1>
        </div><br>
</div>
</body>
</html>
<script>
    var lang = ["JavaScript", "PHP", "Web", "Python"];
    var i, len, text;
    for (i = 0, len = lang.length, text = ""; i < len; i++) {
        text += lang[i] + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
</script>

Related Post