JavaScript Looping Constructs - Explanations and Examples of FOR and WHILE Loops

JavaScript Looping Constructs - Explanations and Examples of FOR and WHILE Loops
Page content

JavaScript Loops

This tutorial details how you can use FOR and WHILE loops in your JavaScript code. It also describes the newer FOR .. IN loop which can be used to loop through arrays.

It will also explain what looping constructs in JavaScript are and how they can be used in your JavaScript code to do certain tasks which are repetitive and follow a certain logic. There are two main types of loops used in JavaScript - For and While.

The code enclosed in the FOR loop keeps executing until the ending condition in the FOR loop becomes false. The WHILE loop keeps on executing as long as the condition in the WHILE loop remains true. Both of these loops are to be used if you want some code to run over and over again until some condition is met.

FOR Loop

The basic syntax of the FOR loop is

for (variable = initialvalue; variable compare finalvalue; variable= variable + increment){code to be looped until some condition is met}

In the FOR loop, the variable is first set to some initial value. Then it is compared to some final value. If the condition is met, the code in the braces is executed and then the control comes back to the for loop. The variable is then incremented and the whole cycle is repeated. At some point, the condition isn’t met and the loop exits.

Example:

var a = 10;for(a=11; a<=20; a++){document.write(a);document.write(" “);}

This should give the output: 11 12 13 14 15 16 17 18 19 20

The loop starts with the value of a = 11. In each iteration it is compared whether it is less than or equal to 20. If true, the value of a is printed and a is incremented and the next iteration begins. This continues till the value of a becomes 21 when the loop exits. You can use any expression which returns true or false in the for loop to check for the finishing condition. Make sure to increment the value after each iteration otherwise an infinite loop may be formed.

WHILE loop

The basic syntax of the WHILE loop is

while (variable compare finalvalue){code to be looped until the condition remains true}

The WHILE loop variable is set to some initial variable outside the loop. In the loop, you specify some condition such that the loop will keep executing until it becomes false. The increment is done in the braces just before the loop finishes. After each iteration, the loop condition is checked and if it turns false, the loop exits.

Example:

var a = 10;while (a<=20){document.write(a);document.write(” “);a++;}

This will give the same output as the FOR loop - 11 12 13 14 15 16 17 18 19 20, but the increment takes place in the braces instead of in the loop.

Besides these, there is also the FOR .. IN loop. A FOR .. IN loop is used to loop through arrays of variables if you don’t know the exact dimensions of the array.

Here’s an example:

var tempvariable;var numbers = new Array();mycars[0] = 1;mycars[1] = 7;mycars[2] = 13;mycars[3] = 17;mycars[4] = 23;mycars[5] = 29;for (tempvariable in numbers){document.write(numbers[tempvariable]);document.write(” “); }

This will loop through the entire array of numbers and print each number - 1 7 13 17 23 29. It will exit when the array finishes.

This post is part of the series: JavaScript - Tutorials for Beginners

This collection contains several basic JavaScript tutorials for beginners. It explains fundamental concepts, such as operators, variables, loops, events, errors and conditional statements in JavaScript. It assumes no prior programming knowledge.

  1. Conditional Statements in JavaScript
  2. Looping Constructs in JavaScript
  3. Advanced Operators in JavaScript
  4. Alerts and Functions in JavaScript
  5. Error Handling in JavaScript