Articles → JavaScript → Loops in JavaScript

Loops in JavaScript

In this article I will explain what loops in JavaScript are. This topic contains following sections

   1. Software requirements

   2. Prerequisite knowledge.

   3. Purpose of loops.

   4. Types of loops.

   5. For loop.

   6. While loop.

   7. Do while loop.

   8. For in loop.

Software requirements

Before you start reading this tutorial you should make sure that

1. Any browser runs on windows operating system supports JavaScript.

2. Notepad or any text editor for writing code.

Prerequisite knowledge

Before you go ahead, it is required that you should have

   1. Basic knowledge of JavaScript.

   2. Basic knowledge of HTML.

   3. Knowledge of any programming language is an added advantage.

Purpose of loops

The purpose of loop is to execute a statement or code block repeatedly till the boundary condition is not reached.

Types of loops

In this tutorial I will explain four types of loops

   1. For loop

   2. While loop

   3. Do while loop

   4. For in loop

For loop

For loop executes a code block to a specified number of times.

Syntax

for (variable_name = start_value; variable_name <= end_value; variable_name = variable_name + increment_value) {
            //	Code of block to be executed
        }

   • Here variable_name is an identifier. i, j, k, count etc are all examples of identifiers.

   • start_value is a value from which loop starts.

   • end_value is a value up to which loop executes.

   • increment_value is the value to which the loop increments.

For example we want to print a number from 1 to 10 then for loop will be

for (i = 1; i <= 10; i = i + 1) {
            //	Code of print numbers
}

Here start value is 1, end value is 10 and increment value is 1. See the table below to check how for loop works.

Value of variable i	Is condition i <= 10 satisfied	Action
1	No	Execute the code block and Increment value of i
2	No	Execute the code block and Increment value of i
3	No	Execute the code block and Increment value of i
4	No	Execute the code block and Increment value of i
5	No	Execute the code block and Increment value of i
6	No	Execute the code block and Increment value of i
7	No	Execute the code block and Increment value of i
8	No	Execute the code block and Increment value of i
9	No	Execute the code block and Increment value of i
10	Yes	Exit loop

While loop

While loop executes a code block until a particular condition is not satisfied.

Syntax

while (condition) {
            //    code to be executed
}

If the above scenario needs to be executed from while loop then the code becomes

i = 1;
while (i <= 10) {
 // Code to execute
 i++;
}

Do while loop

Do while loop is similar to while loop. The difference is - while loop checks the condition first and if condition is true then code inside the while loop gets executed.

But in do while loop, code segment inside the do block gets executed at least once before checking the condition. And this loop keeps on executing the code block until the condition mentioned in while becomes false.

Syntax

do {
  //    code to be executed
}
while (condition);

In the syntax above first of all code in do block gets executed and then condition in while gets checked. If the condition is true, then again code in do block gets executed else loop exits.

Consider a code below

var i = 2;
do {
   //  Code to execute
}
while (i == 1);

In the code above

   1. Code inside the o block gets executed.

   2. While condition is checked. Condition fails.

   3. Loop exits

For in loop

For in loops through properties of an object.

Syntax

for (variable_name in object) {
                    //    code to be executed
}

Consider the following code

var obj = new Object();
obj['name'] = 'karan';
obj['address'] = 'India';
obj['tech'] = '.net';

Here obj is a variable of type Object. In the object we have three properties i.e. name, address and tech and value is assigned to each property. See the figure below.

for in loop given below prompts the following alerts name, address and tech.

for(x in obj)
{
  alert(x);
 // alert(obj[x]); // this will prompt karan, India and .net
}

Posted By -	Karan Gupta

Posted On -	Monday, July 16, 2012

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250