DEV Community

Cover image for JavaScript Made Easy: Part 12
David Tetreau
David Tetreau

Posted on • Updated on

JavaScript Made Easy: Part 12

For Part 12, we will continue talking about loops. Last time we discussed a very important type of loop, the for/in loop. This time, we will switch gears and discuss the while loop. Open up your repl and code along!

While Loop Syntax

The while loop executes a statement as long as the condition is true. The syntax for the while loop is as follows:

while(condition) {
  statement
}
Enter fullscreen mode Exit fullscreen mode

This type of loop checks that a specified condition is true and then executes the statement or statements inside. Notice that this type of loop is different than some of the other types of loops.

With the for loop, there are conditions to be checked before the loop runs, but this process involves incrementing a variable and when the counter reaches a specified number, the loop stops running.

Example

Here's an example to get a better idea of how while loops work:

let schoolDaysLeft = 100; 
while(schoolDaysLeft >= 0) {
  console.log("There are " + schoolDaysLeft + " days left until summer break.");
  if(schoolDaysLeft > 0) {
  schoolDaysLeft--;
  } else if (schoolDaysLeft === 0){ 
  console.log("School is over!");
  break;
 }
}
Enter fullscreen mode Exit fullscreen mode

Notice that there was break inserted in the code when schoolDaysLeft was equal to zero. This keyword instructs the loop to stop running. In this example we:

  1. Initialized a variable which represents the number of days left until school is over.
  2. Created a while loop which checks a condition. The condition for the loop to run is that schoolDaysLeft is greater than or equal to 0.
  3. When the loop runs, it will console.log a string such as the following string: "There are 11 days left until summer break".
  4. The loop will check the conditionals (if and else if statements). If the schoolsDaysLeft variable has a value greater than zero, the variable will be decremented.
  5. If the loop equals zero there will be a message logged to the console that indicate school is over.

Conclusion

Take some time and practice making your own while loop. Try to make an infinite loop in your repl. This is a loop where the condition will always be true. These are to be avoided because they will cause issues, however you should become familiar with them.

I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily.

Discussion (1)

Collapse
joshcheek profile image
Info Comment hidden by post author - thread only accessible via permalink
Josh Cheek • Edited on
  • Indentation is inconsistent, which I generally interpret as "the author doesn't care". For me, that made it difficult to continue reading. Most editors have convenient ways to increment and decrement indentation so that you don't have to manually set it. Looking into that will probably improve your dev experience immensely.
  • The condition on the while loop could be simplified. Since zero behaves like false and schoolDaysLeft is a decrementing positive number, schoolDaysLeft >= 0 is the same as schoolDaysLeft
  • Same for the condition on the if statement
  • The condition on the else branch doesn't do anything (if it ever gets that far, then you know that schoolDaysLeft is zero)
  • It is generally strange to have a break statement in a while loop, normally the condition in the while loop is what breaks it, so explicit breaks aren't necessary. This is the case here, where we only need the break because the decrementing happens in the if statement. If we always decremented it, then we would not need the break because the while condition would naturally break it. So I'd move the decrementing out of the condition and then remove the break statement, and then invert the if statement to allow removing the now empty branch.
  • But that condition is just checking whether we're on the last iteration of the loop, which can also be simplified by moving it out of the loop entirely.

Anyway, in the end, I wind up with this, which should be behaviourally equivalent:

let schoolDaysLeft = 101

while(schoolDaysLeft)
  console.log(`There are ${--schoolDaysLeft} days left until summer break.`)

console.log("School is over!")
Enter fullscreen mode Exit fullscreen mode

But the kind of cumbersome incremented initial value (it loops 101 times instead of 100) does make me suspicious that the condition is wrong, so it maybe should have been this:

let schoolDaysLeft = 100

while(schoolDaysLeft)
  console.log(`There are ${schoolDaysLeft--} days left until summer break.`)

console.log("School is over!")
Enter fullscreen mode Exit fullscreen mode

Also, a tip: for examples like this, choosing smaller numbers will make them easier to work with. While playing with the example, I set schoolDaysLeft to 5.

Some comments have been hidden by the post's author - find out more