totn JavaScript

JavaScript: For Loop

This JavaScript tutorial explains how to use the for loop with syntax and examples.

Description

In JavaScript, the for loop is a basic control statement that allows you to execute code repeatedly for a fixed number of times.

Syntax

The syntax for the for loop in JavaScript is:

for (initialize; test; increment) {
   // statements
}

Parameters or Arguments

initialize
The declaration of the counter variable and assigning its initial value. For example, to initialize a variable called counter and set its value to 1, you could use var counter = 1;
test
The condition that is tested each pass through the loop. If the condition evaluates to TRUE, the loop body is executed. If the condition evaluates to FALSE, the loop is terminated. For example, counter < 5;
increment
The increment value for the loop. You can increment or decrement the counter. For example, you could use counter++ to increment the counter by 1 or you could use counter-- to decrement the counter by 1.
statements
The statements of code to execute each pass through the loop.

Note

  • You would use a for loop when you want to execute the loop body a fixed number of times.
  • See also the break statement to exit from the for loop early.

Example

Let's look at an example that shows how to use a for loop in JavaScript.

For example:

for (var counter = 1; counter < 5; counter++) {
   console.log(counter + ' - Inside for loop on TechOnTheNet.com');
}

console.log(counter + ' - Done for loop on TechOnTheNet.com');

In this for loop example, the loop will continue as long as counter is less than 5 as specified by:

counter < 5;

The for loop will continue while counter < 5. And once counter is >= 5, the loop will terminate.

In this example, the following will be output to the web browser console log:

1 - Inside for loop on TechOnTheNet.com
2 - Inside for loop on TechOnTheNet.com
3 - Inside for loop on TechOnTheNet.com
4 - Inside for loop on TechOnTheNet.com
5 - Done for loop on TechOnTheNet.com

Declare the counter variable outside of the for loop

You are not required to declare your counter variable within the for loop. Instead, you could rewrite your code as follows:

var counter;

for (counter = 1; counter < 5; counter++) {
   console.log(counter + ' - Inside for loop on TechOnTheNet.com');
}

console.log(counter + ' - Done for loop on TechOnTheNet.com');

In this for loop example, the counter variable is declared before the for loop statement as specified by:

var counter;

Decrement the counter variable in the for loop

Traditionally, most for loops have an incrementing counter, but you can also decrement the counter. Let's look at an example:

for (var counter = 5; counter > 0; counter--) {
   console.log(counter + ' - Inside for loop on TechOnTheNet.com');
}

console.log(counter + ' - Done for loop on TechOnTheNet.com');

In this for loop example, the counter variable is decremented as specified by:

counter--

In this example, the following will be output to the web browser console log:

5 - Inside for loop on TechOnTheNet.com
4 - Inside for loop on TechOnTheNet.com
3 - Inside for loop on TechOnTheNet.com
2 - Inside for loop on TechOnTheNet.com
1 - Inside for loop on TechOnTheNet.com
0 - Done for loop on TechOnTheNet.com

More complex incrementing in the for loop

Although most for loop are incremented by 1, you can choose an increment other than 1. Let's look at an example where we use an increment of 5 in the for loop:

for (var counter = 0; counter <= 20; counter = counter + 5) {
   console.log(counter + ' - Inside for loop on TechOnTheNet.com');
}

console.log(counter + ' - Done for loop on TechOnTheNet.com');

In this for loop example, the counter variable will start at 0. The counter variable will then increment by 5 each pass through the loop, as specified by:

counter = counter + 5

When the counter variable is greater than 20, the for loop will terminate.

In this example, the following will be output to the web browser console log:

0 - Inside for loop on TechOnTheNet.com
5 - Inside for loop on TechOnTheNet.com
10 - Inside for loop on TechOnTheNet.com
15 - Inside for loop on TechOnTheNet.com
20 - Inside for loop on TechOnTheNet.com
25 - Done for loop on TechOnTheNet.com
Share on: