JavaScript For Loop

Last Updated : 19 Nov, 2024

JavaScript for loop is a control flow statement that allows code to be executed repeatedly based on a condition. It consists of three parts: initialization, condition, and increment/decrement.

// for loop begins when x=2
// and runs till x <= 4
for (let x = 2; x <= 4; x++) {
    console.log("Value of x:" + x);
}

Output

Value of x:2
Value of x:3
Value of x:4

For loop to print table of a number.

let x = 5
for (let i = 1; i <= 10; i++) {
  console.log(x * i); 
}

Output

For loop to print elements of an array.

let arr = [10, 20, 30, 40];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); 
}

Output

Syntax of For Loop in JavaScript

A for loop in JavaScript repeatedly executes a block of code as long as a specified condition is true. It includes initialization, condition checking, and iteration steps, making it efficient for controlled, repetitive tasks.

Syntax:

for (statement 1 ; statement 2 ; statement 3){    code here...}

Statement 1: It is the initialization of the counter. It is executed once before the execution of the code block.
Statement 2: It defines the testing condition for executing the code block
Statement 3: It is the increment or decrement of the counter & executed (every time) after the code block has been executed.

Flow chart

This flowchart shows the working of the for loop in JavaScript. You can see the control flow in the For loop.

Statement 1: Initializing Counter Variable

Statement 1 is used to initialize the counter variable. A counter variable is used to keep track of the number of iterations in the loop. You can initialize multiple counter variables in statement 1.

We can initialize the counter variable externally rather than in statement 1. This shows us clearly that statement 1 is optional. We can leave the portion empty with a semicolon.

Example:

let x = 2;

for (; x <= 4; x++) {
    console.log("Value of x:" + x);
}

Output

Value of x:2
Value of x:3
Value of x:4

Output

Value of x:2
Value of x:3 
Value of x:4

Statement 2: Testing Condition

This statement checks the boolean value of the testing condition. If the testing condition is true, the for loop will execute further, otherwise loop will end and the code outside the loop will be executed. It is executed every time the for loop runs before the loop enters its body.

This is also an optional statement and Javascript treats it as true if left blank. If this statement is omitted, the loop runs indefinitely if the loop control isn’t broken using the break statement. It is explained below in the example.

Example:

let x = 2;
for (; ; x++) {
    console.log("Value of x:" + x);
    break;
}

Output

Value of x:2

Output:

Value of x:2

Statement 3: Updating Counter Variable

It is a controlled statement that controls the increment/decrement of the counter variable.

It is also optional by nature and can be done inside the loop body.

Example:

const subjects = ["Maths", "Science", "Polity", "History"];
let i = 0;
let len = subjects.length;
let gfg = "";
for (; i < len;) {
    gfg += subjects[i];
    //can be increased inside loop
    i++;
}
console.log(gfg)

Output

MathsSciencePolityHistory

Output

MathsSciencePolityHistory

More Loops in JavaScript

JavaScript has different kinds of loops in Java. Some of the loops are:

Loop	Description
for loop	A loop that repeats a block of code a specific number of times based on a conditional expression.
while loop	A loop that repeats a block of code as long as a specified condition is true.
do-while loop	A loop that executes a block of code at least once, then repeats the block as long as a specified condition is true.
for…of loop	Iterates over the values of an iterable object (like arrays, strings, maps, sets, etc.)
for…in loop	Iterates over the enumerable properties of an object (including inherited properties).

Learn and master JavaScript with Practice Questions. JavaScript Exercises provides many JavaScript Exercise questions to practice and test your JavaScript skills.