Skip to content

1.11 Loops -2-

While Loop

Task 1: Display the numbers from 1 to 3 in the console.

for(var i=1;i<=3;i++){
    console.log(i);
}

The result will be:

1
2
3

Task 2: Check the following code and compare it with task 1 code.

var i = 1;
while(i<=3){
    console.log(i);
    i++;
}

The result will be:

1
2
3

Notice that the code in task 1 and task 2 achieves the same result.

How does the task 1 code work?

  1. We declare the counter variable. Let it be i. We assigned a value of 1 to i. We want our counter to start counting from 1.

  2. We use while loop. The usage of while loop is similar to the one of for loop.

  3. We want to keep on repeating tasks as long as i<=3 satisfies.

  4. We open a curly bracket {

  5. We write the tasks we want to repeat console.log(i).

  6. We increase the counter by 1: i++. We can also write i=i+1.

  7. We close the curly bracket }.

When to use while/for loop?

You can achieve the same thing either by using for or while loop. It is a matter of choice. But sometimes using while loop is more convenient. Let's explorer more examples.

Task 3: The room temperature is decreasing from 25 by 2 degrees per hour. Display "The temperature is ..., I can handle it" as long as the temperature is greater than zero.

var temp = 25;
while(temp > 0){
    console.log("The temperature is " + temp + ". I can handle it!");
    temp=temp-2;
}

The result will be:

The temperature is 25. I can handle it!
The temperature is 23. I can handle it!
The temperature is 21. I can handle it!
The temperature is 19. I can handle it!
The temperature is 17. I can handle it!
The temperature is 15. I can handle it!
The temperature is 13. I can handle it!
The temperature is 11. I can handle it!
The temperature is 9. I can handle it!
The temperature is 7. I can handle it!
The temperature is 5. I can handle it!
The temperature is 3. I can handle it!
The temperature is 1. I can handle it!

Notice that: You can achieve the same result by using for loop.

var temp = 25;
for(temp; temp > 0; temp=temp-2){
    console.log("The temperature is " + temp + ". I can handle it!");
}

Task 4: The user can write comments as long as he/she is logged in.

var isLoggedIn = false;
while(isLoggedIn){
    console.log("He can comment");
}

Notice that isLoggedIn is false. If it was true, the condition would be always true. Then we would be stuck in an infinite loop and our program would hang. We can solve this by using break statement. Let's see how!

Break Statement

Task 5: Display "He can comment" as long as the user is logged in. Then, get out of while loop.

var isLoggedIn = true;
while(isLoggedIn){
    console.log("He can comment");
    break;
}

You will get: He can comment.

What does break do?

It simply gets you out of the while loop or any loop. Let's use break with the for loop!

Task 6 Add 2 to every number from 1 to 6. If the number + 5 is greater than 7, get out of the loop.

for(var num = 1; num<=6; num++){
    if((num + 5) > 7){
        break;
    }
    console.log(num+2);
}

The result will be:

3
4

Let's investigate it!

  1. We created a simple for loop for(var num = 1; num<=6; num++).

  2. If the counter + 5 is greater than 7, break out from the loop.

  3. Otherwise, display the counter + 2 in the console.

  4. In the first iteration, the num is 1, 1 + 5 = 6 and 6 is less than 7, so 1 + 2 will be displayed in the console (3).

  5. In the second iteration, the num is 2, 2 + 5 = 7 and 7 is not greater than 7 so 2 + 2 will be displayed in the console (4).

  6. In the third iteration, the num is 3, 3 + 5 = 8 and 8 is greater than 7, so we will break out of the loop.

Task 7: Declare count variable. Assign the value of 5 to count. Display the count in the console, as long as the variable value is not zero.

var count = 5;
while(count){
    console.log("Count: " + count);
    count--;
}

The result will be:

Count: 5
Count: 4
Count: 3
Count: 2
Count: 1

Note(1): Task 7 is similar to task 3, however, we used a different approach in Task 7. Instead of testing the condition count > 0, we simply test the count itself. As long as the count is not equal to zero, it is true. Once count reaches zero, the expression while(0) will evaluate to while(false). Hence the sentences will not be executed.

Task 8: Display a message "Please provide us with your password" as long as the user does not enter his password.

var password = "123";
while(!password){
    console.log("Please provide us with your password");
}

You will get nothing here.

Warning: if password is an empty string, null, or undefined, you will get into an infinite loop here. This example is very useful within a program that keeps showing alerts for providing passwords and user names. The loop will only stop when the user provides the user name and the password.

Note(2): It is better to use while loop when we do not know the times we should repeat certain tasks. Like in task 8, we do not know when the user will provide his/her password. It is very hard to use for loop in such case.