Greeting JavaScript: break, continue statements, while and do-while Loops4 min read

In some previous articles, we’ve learned how to use some of the for loops to loop over the array, string and so forth. In this article, we are going to take a look at while loop, which is similar to for loop.

while Loop

In JavaScript and many other languages, while loop is used to creates a loop that executes a block of code as long as the test condition evaluates to true.

Syntax

while (expression) {
 // statements
}

while loop is only executed the code block inside its curly brackets when conditions are evaluated to true. Which mean if the expression istrue, then statements are executed, otherwise, JavaScript engine will continue executing the statements after this while loop. Consider the follow examples:

var i = 5;
while (i > 0) {
console.log(i--);
// expected output: 5 4 3 2 1
}
console.log(i); // 0

Remember in the Data Type article I had talked about post-increment? Which is being assigned before increasing value by one.

• First, we created a variable named i and assign its value to 5
• Before executing the statement, while loop has to check whether the expression is true or false. In this case i is 5, which is greater than 0, then the block code is executed
• After each execution, the value of i is decreased by 1 and until the expression no longer is true. So the first output is: 5 4 3 2 1
• Why the second console the value is 0? Because of inside the while loop, our statement is i--, which the last result of the first output is 1, then if we then log its value again, it would be decreased by 1, which lead to 0.

If the expression is not labelled to true, then the while loop will never execute and JavaScript engine will continue statements after the while loop

var a = 5;
while (a < 4) {
a = 3
console.log(a);
}
console.log(a); // 5

Because of a = 5 is greater than 4, then the while loop will never be executed.

boolean values and while Loop

When manipulating number and string, those boolean value will return false if it’s an empty string, or this is the number with the value of 0, otherwise, it’ll return true, consider the following examples:

Boolean(""); // false
Boolean(" "); // false
Boolean("0"); // true
Boolean(0); // false
Boolean(NaN); // false
Boolean(null); // false
Boolean(2); // true
Boolean(-2) // true

break and continue keywords

var letItBe = "20"
var count = 0;
while(letItBe){
letItBe = Number(letItBe) + 20
count += 1; // 1 2 3 4
console.log(count)
if(letItBe == 100) break;
}
console.log(letItBe) // 100

• First, we defined a variable named letItBe with the value of “20”, which is not an empty string, so it’s evaluated to true
• Inside the expression of while loop, we passed in letItBe, which is truthy value, so we executed the code inside this while loop
• Inside the while loop, in the first line we assign its value letItBe to its value which converted from string to number by using Number Object, then plus 20
• Each of the time it iterated, we created a new variable count and it determined how many times did we run this loop
• It’s 4 because when we reached the value of 100, we breaked this loop then we logged out the result, which is 100.

Besides break statement to break out the loop in specific condition, we also can use continue statement in while loop:

var i = 0;
var n = 0;
while (i < 5) {
  i++;
  if (i === 3) {
    continue;
  }
  n += i;
  console.log(i) // 1 2 4 5
}
console.log(n) // 12 (1 + 2 + 4 + 5)

• We initialized two variables, i and n with the same value of 0
• Then we used while loop, if i < 5 then executing something inside it
• When iterated through 1 to 5, if i equals 3, then skipped this value and continues the loop
• Then printed out the values of i and n which i is the value after each iteration and n is the sum of each i combined.

do-while Loop

Unlike the while loop which is only executing its statement inside it when the expression is evaluated to true. On the other hand, do-while loop will execute the statements at least one no matter the expression is true or false.

Syntax

do{
statements
}while (expression)

Consider the following example of the do-while loop statement.

var x = 0
do{
x++
console.log(x)
}while (x < 5)
// expected output: 1 2 3 4 5

In this example, the x variable starts at 0 and is incremented by one each time through the loop. The loop continues as long as the x is less than 5.

You often use the do-while statement in the situation that the body of the loop needs to execute at least one. This is an important feature of the do-while loop. The most typical example of using the do-while loop is getting input from the user until the value provided is expected.

Another example:

var foo = 5;
do{
foo += 5;
console.log(foo) // 10
}while(foo < 3)

The value of foo variable equals to 5 which is greater than 3, but the do statement still executed it once even the condition haven’t met.

Conclusion

Besides for loop, JavaScript has offered some other types of loop such as while loop and do-while loop. Similar to for loop, while loop only executes statements if the expression is evaluated to true. On the other hand, do-while loop will execute the statement at least once even condition is met or not. Talk about boolean value, empty string and number with the value of 0 are evaluated to false, otherwise true.