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
Comments