Javascript Loops – The Iterating Statements Of Javascript

Javascript Loops

In the previous articles, we learn about javascript conditional statements. In this tutorial, we are going to learn Javascript loops.

So let’s get started.

Javascript loops execute a block of code repeatedly based upon the condition.

There are 4 types of looping statements in javascript

  1. while loop
  2. do while loop
  3. for loop
  4. for in loop

The above 4 loops provide one common functionality which is repeating and each one is useful in different kinds of situations.

What does looping statements do actually?

For example, let’s take a situation. You have an array called shopping_list. It contains 50 items.

If you want to display each item of the shopping_list, you need to write the statements one by one up to 50.

What about if there are 5000 items in the list? Can you write each statement manually?

You can write. But it takes more time and it’s not a good programming behavior.

That’s why the loops were introduced.

By using loops, you can execute statements any number of times until the expression evaluates to true.

1. While loop

While loop is the basic loop in javascript looping statements.

Syntax :

while(expression){ 
   // loop body
}

Explanation :

  • The while loop first evaluates the expression.
  • If the expression evaluates to true, the interpreter executes the statements inside the brackets of the while loop.
  • Then the interpreter return to the expression.
  • The same process repeated continuously until the expression evaluates to false.
  • If the expression evaluates to false, then the interpreter skips the block of the while loop.

See the diagram below for better understanding

javascript while loop - flowchart

Example :

var x = 0;

while( x < 5 ){

   console.log(x);
   x++;

}

//expected output

/*
0
1
2
3
4
*/

Explanation :

In the body of the loop, we write a statement x++; to increment the value of x.

If we didn’t increment the value of x, the expression of while loop always evaluates to true.

If this happens the loop will be executed continuously and we call this an infinite loop.

2. do/while loop

The do/while loop is an extended version of while loop. It works exactly like while loop. But the difference is, in do/while loop the body of the loop must execute at least once.

Syntax :

do{
  //statements.
}while(expression);

Explanation :

  • The do while loop first executes the statements inside the body of the loop.
  • Then it evaluates the expression.
  • If the expression evaluates to true, again the body of the loop will execute.
  • The interpreter return to the expression.
  • This process repeated continuously until the expression evaluates to false.
  • If the expression evaluates to false, then the interpreter skips over to the next statements.

Note:  The major difference between while loop and do while loop is, even if the expression is false the body of the loop will execute for the first time in the do while loop.

See the diagram below for better understanding.

Example :

var x = 0;

do{
    console.log(x);
    x++;
} while(x<5);


Expected output: 

//expected output
/*
0
1
2
3
4

Let’s write another example on do while loop.

var x = 5;
do{
   console.log(x);
   x++;
}while(x<5);

Expected output :

//output
5

In the above example the expression evaluates to false, but still, the body of the loop executed one time.

3. for loop

The for loop is the more convenient loop than the other loops. It follows a shorter pattern which includes initialization, condition, increment/decrement.

Syntax :

for(initialize; condition; update){
    // loop body
}

The for loop is a combination of 3 expressions. Each of them is responsible for initializing, testing and updating a loop variable. Putting them all in one line makes it simple to write a loop.

Explanation :

  • The for loop first initialize the variable.
  • Then it checks the condition.
  • If the condition evaluates to true, the body of the loop will execute.
  • Then the interpreter updates(either it can be increment or decrement) the variable.
  • After updating the value of a variable, the for loop again return to the condition.
  • This process repeated continuously until the condition evaluates to false.
  • If the condition evaluates to false, the body of the loop will exit.

See the picture below for better understanding.

javascript for loop - flowchart

Example :

for(var x = 0; x < 5; x++ ){
   console.log(x);
}

Expected output :

 /* the output is
 0
 1
 2
 3
 4 
*/

Note: The Initialization of a variable executes only once. Only condition and update expressions are repeated until the condition evaluates to true.

4.for in loop

The for in loop is used to iterate through the properties of an object.

Syntax :

for(var property in object){
   console.log(property);
}

Explanation :

In for/in loop the interpreter repeats the loop until the properties of an object had finished.

Example :

var obj = { name:'joovin',age: 23,job: 'web developer'};

for(var p in obj){
    console.log(p);
}

Expected output :

//output
name
age
job

Javascript for/in loop produces property names only. To display property values, we need to write manually like below.

object_name[property_name];

Here’s the sample code to display object properties along with values.

for(var p in obj){
   console.log(p + obj[p]);
}

Expected output :

//output
name joovin
age 23
job web developer

Ok. That’s it for the javascript loops. If you have any doubts feel free to comment below.

If you like this article, please share with other learners.

Thanks for reading!

Keep [email protected]

 

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by Pixelbart

Leave a Reply

Your email address will not be published. Required fields are marked *