8. JavaScript: Loops

If some one ask you to print numbers from 0 to 5  you can print,

document.write(0)
document.write(1)
document.write(2)
document.write(3)
document.write(4)
document.write(5)

its easy but what if some one ask you to do it 100 times or 1000 times or more. Then printing lines one by one is not a good way to solve this problem. You need some solution which can perform one task repeatedly as long as required.

We have very famous solution for this problem called Loops. Loops can help you to perform one task as long as you want, it can be for 5 times for 500 times or more. Loops are very efficient in this.

There are two different types of loop available in javaScript.

1.   While Loop
2.   For Loop

1.  While Loop

While loop is useful when you want to perform one task as long as condition is true. Once the condition is false loop will be stopped. What does it mean, lets discuss in detail.

As you know that if statement works with condition. If myvalue is less than 10 then it will print myvalue on your screen.

var myvalue = 0;

if(myvalue <= 10){
    document.write(myvalue);
}

While loop also works in same fashion but with repetition. You can do some minor changes in previous code. Repalce if with while, and your while loop is ready for work.

var myvalue = 0;

while (myvalue <= 10){
    document.write(myvalue);
}

While loop will check if myvalue is less than 10, it will go inside the loop and print myvalue on the screen, it will go back at the start of while loop and see if myvalue is still less than 10 if yes, it will go inside the loop again and it will print myvalue on the screen. While loop will keep printing as long as myvalue is less than 10.

In this condition you can see that myvalue will be less than 10 all the time. If you want to stop this loop at some point, start incrementing with 1 on every iteration, so the loop will stop when myvalue will exceed more than 10.

var myvalue = 0;

while (myvalue <= 10){
    document.write(myvalue);
    myvalue = myvalue + 1; 
}

 

2.  For Loop

There is another better and clean way to write a loop, which is called for loop. In for loop, you can initialize the variable, set the condition and increment in this variable. All 3 steps can be done in one line. Here is a syntax

for(var myvalue = 0; myvalue <= 10; myvalue++){
   document.write(myvalue)
}

It will produce the same result as while loop but its very easy to understand.

For loop starts from initialization of variable, in your case var myvalue = 0.
Then it checks the condition if myvalue is less than 10, if yes, it goes inside the loop and print myvalue on screen.
At the end it increments in myvalue with 1.
myvalue++ or myvalue = myvalue + 1 both perform the same job.


Loop with Array

Loops are always convenient way to work with Arrays. You can use for and while loops to access all elements in array. Lets start with while loop.

First create an arry and initialize with some values.

var collection = [];

collection[0] = "Apple";
collection[1] = "Orange";
collection[2] = "Paron";

Now access all array elements one by one. Remember that array index starts from 0, so your variable in while loop should also start from 0.

var i = 0;
while (i < collection.length) {
    document.write(collection[i]+" ");
    i++;
}

collection.length is new for you, but its a function provided by javaScript which returns the length of your array.

You can also use for loop in same fashion

for(i = 0; i < collection.length; i++){
   document.write(collection[i]+" ");
}

javaScript also provides a special type of for loop which takes care most of the stuff by itself. You do not need to assign value to a variable, no condition check and no increment.

Just create a variable and point it to the array, here is an example:

for(i in collection){
    document.write(collection[i] + " ");
}

yes it is so simple, rest of the work is done by javaScript.

 

Download file from GitHub