Skip to main content

JavaScript Loops

JavaScript for Loop

Written by Updated

The JavaScript for loop is used to run the same block of code again and again.

It is useful when you want to repeat a task a specific number of times.

Example

Example

javascript

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

In this example, the loop runs from 1 to 5.

What is a for Loop?

A for loop repeats a block of code while a condition is true.

It is commonly used when you already know how many times you want to run the code.

Syntax

Syntax

javascript

for (initialization; condition; update) {
  // code to repeat
}

A for loop has three main parts:

PartMeaning
InitializationStarts the loop variable
ConditionChecks whether the loop should continue
UpdateChanges the loop variable after each run

Simple for Loop Example

Simple for Loop Example

javascript

for (let i = 1; i <= 5; i++) {
  console.log("Hello JavaScript");
}

Here, the message runs five times.

The loop starts with i = 1.

It continues while i <= 5.

After each run, i++ increases the value of i by 1.

Understanding the Loop Parts

Example

Understanding the Loop Parts

javascript

for (let i = 1; i <= 3; i++) {
  console.log(i);
}

This loop has three parts:

Understanding the Loop Parts

javascript

for (let i = 1; i <= 5; i++) {
  //   ^^^^^^^^^  initialiser: runs once, before the loop starts
  //             ^^^^^^^^  condition: checked before every pass
  //                       ^^^  update: runs after every pass
  console.log(i);
}

This creates a loop variable and starts it from 1.

Understanding the Loop Parts

javascript

i <= 3

This condition checks whether the loop should continue.

Understanding the Loop Parts

javascript

i++

This increases the value of i after each loop run.

Counting Numbers with for Loop

A for loop is often used for counting.

Example

Counting Numbers with for Loop

javascript

for (let number = 1; number <= 10; number++) {
  console.log(number);
}

This prints numbers from 1 to 10.

Counting Backward

You can also count backward using a for loop.

Example

Counting Backward

javascript

for (let i = 5; i >= 1; i--) {
  console.log(i);
}

Here, the loop starts from 5 and ends at 1.

The i-- decreases the value of i by 1 after each run.

for Loop with Arrays

A for loop is very useful for working with arrays.

Example

for Loop with Arrays

javascript

let fruits = ["Apple", "Banana", "Mango"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Array indexes start from 0.

So, fruits[0] means "Apple".

The loop continues while i is less than fruits.length.

for Loop with Strings

You can also use a for loop to read characters from a string.

Example

for Loop with Strings

javascript

let name = "John";

for (let i = 0; i < name.length; i++) {
  console.log(name[i]);
}

This prints each character of the string one by one.

Using for Loop with Calculation

A for loop can be used to calculate totals.

Example

Using for Loop with Calculation

javascript

let total = 0;

for (let i = 1; i <= 5; i++) {
  total = total + i;
}

console.log(total);

This adds numbers from 1 to 5.

The final value of total is 15.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript for Loop</title>
</head>
<body>

  <h1>JavaScript for Loop</h1>

  <p id="result"></p>

  <script>
    let result = "";

    for (let i = 1; i <= 5; i++) {
      result += "Number: " + i + "<br>";
    }

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

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try changing the loop condition.

Example

Try It Yourself

javascript

for (let i = 1; i <= 10; i++) {
  result += "Number: " + i + "<br>";
}

Also try counting backward from 10 to 1.

Important Points

  • The for loop is used to repeat code.
  • It is useful when you know how many times the code should run.
  • A for loop has initialization, condition, and update parts.
  • The loop continues while the condition is true.
  • The i++ increases the value by 1.
  • The i-- decreases the value by 1.
  • A for loop is commonly used with numbers, arrays, and strings.

Conclusion

The JavaScript for loop is used to repeat a block of code multiple times.

It is one of the most commonly used loops in JavaScript.

Once you understand the for loop, it becomes easier to work with repeated tasks, lists, arrays, and dynamic content.