Looping is a means to execute the same segment of code multiple times. This is extremely useful when you need to repeatedly perform the same tasks on an array or a set of objects.

JavaScript provides functionality to perform for and while loops. The followings sections describe how to implement loops in JavaScript.

while Loops

The most basic type of looping in JavaScript is the while loop. A while loop tests an expression and continues to execute the code contained in its {} brackets until the expression evaluates to false.

For example, the following while loop executes until i is equal to 5:

var i = 1;
while (i<5){
  console.log("Iteration " + i);
  i++;
}

This example sends the following output to the console:

Iteration 1
Iteration 2
Iteration 3
Iteration 4

do/while Loops

Another type of while loop is the do/while loop. This is useful if you always want to execute the code in the loop at least once and the expression cannot be tested until the code has executed at least once.

For example, the following do/while loop executes until days is equal to Wednesday:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
var i=0;
do{
  var day=days[i++];
  console.log("It's " + day);
} while (day != "Wednesday");

This is the output at the console:

It's Monday
It's Tuesday
It's Wednesday

for Loops

A JavaScript for loop enables you to execute code a specific number of times by using a for statement that combines three statements in a single block of execution. Here’s the syntax:

for (assignment; condition; update;){
  code to be executed;
}

The for statement uses the three statements as detailed here when executing the loop:

■ assignment: This is executed before the loop begins and not again. It is used to initialize variables that will be used in the loop as conditionals.

■ condition: This expression is evaluated before each iteration of the loop. If the expression evaluates to true, the loop is executed; otherwise, the for loop execution ends.

■ update: This is executed on each iteration, after the code in the loop has executed. This is typically used to increment a counter that is used in condition.

The following example illustrates a for loop and the nesting of one loop inside another:

for (var x=1; x<=3; x++){
  for (var y=1; y<=3; y++){
    console.log(x + " X " + y + " = " + (x*y));
  }
}

The resulting output to the web console is this:

1 X 1 = 1
1 X 2 = 2
1 X 3 = 3
2 X 1 = 2
2 X 2 = 4
2 X 3 = 6
3 X 1 = 3
3 X 2 = 6
3 X 3 = 9

for/in Loops

Another type of for loop is the for/in loop. The for/in loop executes on any data type that can be iterated. For the most part, you will use for/in loops on arrays and objects. The following example illustrates the syntax and behavior of the for/in loop on a simple array:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
for (var idx in days){
  console.log("It's " + days[idx] + "<br>");
}

Notice that the variable idx is adjusted each iteration through the loop, from the beginning array index to the last. This is the resulting output:

It's Monday
It's Tuesday
It's Wednesday
It's Thursday
It's Friday

Interrupting Loops

When you work with loops, there are times when you need to interrupt the execution of code inside the code itself, without waiting for the next iteration. There are two keywords you can use to do this: break and continue.

The break keyword stops execution of a for or while loop completely. The continue keyword, on the other hand, stops execution of the code inside the loop and continues with the next iteration. Consider the following examples.

This example shows using break if the day is Wednesday:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
 for (var idx in days){
 if (days[idx] == "Wednesday")
 break;
 console.log("It's " + days[idx] + "<br>");
 }

When the value is Wednesday, loop execution stops completely:

It’s Monday
It’s Tuesday

This example shows using continue if the day is Wednesday:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
for (var idx in days){
  if (days[idx] == "Wednesday")
    continue;
  console.log("It's " + days[idx] + "<br>");
}

Notice that the write is not executed for Wednesday because of the continue statement, but the loop execution does complete:

It's Monday
It's Tuesday
It's Thursday
It's Friday
Advertisements