JavaScript Tutorial

This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

For Loop
The JavaScript for loop is used to execute a block of code repeteatedly, until a specified condition evaluates to false. It can be used for iteration if the number of iteration is fixed and known.
The JavaScript loops are used to execute the particular block of code repeatedly. The 'for' loop is the most compact form of looping. It includes the following three important parts
Initialization: The loop initialization expression is where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.
Condition: The condition expression which will test if a given condition is true or not. If the condition is true, then the code given inside the loop will be executed. Otherwise, the control will come out of the loop.
Iteration: The iteration expression is where you can increase or decrease your counter.
You can put all the three parts in a single line separated by semicolons.
Flow Chart
The flow chart of a for loop in JavaScript would be as follows
﻿
Syntax
The syntax of for loop is JavaScript is as follows
for (initialization; condition; iteration) {
   Statement(s) to be executed if condition is true
}
Above all 3 statements are optional.
Examples
Try the following examples to learn how a for loop works in JavaScript.
Example: Executing a code block repeatedly
In the example below, we used the for loop to print the output's updated value of the 'count' variable. In each iteration of the loop, we increment the value of 'count' by 1 and print in the output.
<html>
<head>
    <title> JavaScript - for loop </title>
</head>
<body>
    <p id = "output"> </p>
    <script>        
        const output = document.getElementById("output");
        output.innerHTML = "Starting Loop <br>";
        let count;
        for (let count = 0; count < 10; count++) {
            output.innerHTML += "Current Count : " + count + "<br/>";
        }
        output.innerHTML += "Loop stopped!";
    </script>
</body>
</html>
Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Example: Initialization is optional
The below code demonstrates that the first statement is optional in the for loop. You can also initialize the variable outside the loop and use it with the loop.
Whenever you need to use the looping variable, even after the execution of the loop is completed, you can initialize a variable in the parent scope of the loop, as we have done in the below code. We also print the value of p outside the loop.
<html>
<head>
    <title> Initialization is optional in for loop </title>
</head>
<body>
    <p id = "output"> </p>
    <script>
        let output = document.getElementById("output");
        var p = 0;
        for (; p < 5; p++) {
            output.innerHTML += "P -> " + p + "<br/>";
        }
        output.innerHTML += "Outside the loop! <br>";
        output.innerHTML += "P -> " + p + "<br/>";
    </script>
</body>
</html>
Output
P -> 0
P -> 1
P -> 2
P -> 3
P -> 4
Outside the loop!
P -> 5
Example: Conditional statement is optional
The below code demonstrates that the conditional statement in the for loop is optional. However, if you don't write any condition, it will make infinite iterations. So, you can use the 'break' keyword with the for loop to stop the execution of the loop, as we have done in the below code.
<html>
<head>
    <title> Conditional statement is optional in for loop </title>
</head>
<body>
    <p id = "output"> </p>
    <script>
        let output = document.getElementById("output");
        let arr = [10, 3, 76, 23, 890, 123, 54]
        var p = 0;
        for (; ; p++) {
            if (p >= arr.length) {
                break;
            }
            output.innerHTML += "arr[" + p + "] -> " + arr[p] + "<br/>";
        }
    </script>
</body>
</html>
Output
arr[0] -> 10
arr[1] -> 3
arr[2] -> 76
arr[3] -> 23
arr[4] -> 890
arr[5] -> 123
arr[6] -> 54
Example: Iteration statement is optional
In the for loop, the third statement is also optional and is used to increment the iterative variable. The alternative solution is that we can update the iterative variable inside the loop body.
<html>
<head>
    <title> Iteration statement is optional </title>
</head>
<body>
    <p id = "output"> </p>
    <script>
        let output = document.getElementById("output");
        let str = "Tutorialspoint";
        var p = 0;
        for (; ;) {
            if (p >= str.length) {
                break;
            }
            output.innerHTML += "str[" + p + "]  -> " + str[p] + "<br/>";
            p++;
        }
    </script>
</body>
</html>
Output
str[0] -> T
str[1] -> u
str[2] -> t
str[3] -> o
str[4] -> r
str[5] -> i
str[6] -> a
str[7] -> l
str[8] -> s
str[9] -> p
str[10] -> o
str[11] -> i
str[12] -> n
str[13] -> t
﻿
﻿

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

For Loop

Flow Chart

Syntax

Examples

Example: Executing a code block repeatedly

Output

Example: Initialization is optional

Example: Conditional statement is optional

Example: Iteration statement is optional