JS While Loop – Programming Foundations #08

JS while loop is your ticket to executing code neatly and repeatedly for as many times as you need. So what is a while loop in JavaScript? Simply said, a while loop/statement is a loop that will execute any code blocks inside it for as long as a specified condition is met. Let’s discuss a few JavaScript while loop example below. 

The JS While Loop is used to execute code repeatedly in a loop

js while loop

In programming, there will always be instances where you need to use the same code block more than once. JavaScript gives you a few ways to get this done.  The while loop, for loop, for in loop and forEach loop are all ways that you can get your code to run in a loop. For this article, we will be focusing on the JS While Loop

So how do you write a JS While Loop?

Here’s how to write a while loop correctly.

  1. A while statement must begin with the keyword while.
  2. Next, you must present the conditional under which you want the loop to operate.
  3. Now it’s time to write the code block that you wish to execute in a loop.
  4. Lastly, you must add an increment or decrement. If you don’t do this you’ll end up with an infinite loop, which is not something you probably want.

The loop will only work for as long as the conditional holds true. Take a look at this simple JavaScript while loop example.

var jellyBeans = 0;

while(jellyBeans < 5){
    alert("Need more jelly beans!");
    jellyBeans++;
}
js while loop

Let’s study this piece of code.

A JsvaScript variable called jellybeans has been declared and assigned the value 0. (See our tutorial on JavaScript variables to learn more about values and variables in JavaScript.)

Next there is a conditional test. The JS while loop will only keep looping for as long as this condition holds true.

And next, the increment adds the value of 1 to the variable jellybeans every time the code loops.  So if you run this code, you’ll get 5 alert boxes displaying the message “Need more jelly beans!”. 

Now try out this JavaScript while loop example.

var butterbeer = 0;

while(butterbeer <= 10){
    console.log("You have " + butterbeer + " butterbeers!");
    butterbeer++;
}

As you can see, we have written this code so that the result will be seen in the JavaScript console.log. Writing to the console.log will let you know if you’ve made any mistakes with your code, which is why it’s mostly used for basic troubleshooting. Just press Ctrl + Shift + I to open the console.log on your browser. Your result should look like this. 

js while loop

Pretty simple isn’t it? With the JS while loop, you can make your code run in a loop as many times as needed to achieve the desired result. 

Here’s a more interesting JavaScript while loop example. Let’s print a triangle of stars using the while loop.

JavaScript while loop example – print a triangle of stars

js while loop star triangle
js while loop – triangle pattern

Can you try to figure out the code that’s needed to print the above triangle of stars to console.log?

Here’s the solution

var result = "*";

while(result.length <= 8){
    console.log(result);
    result = result + "*";
}
js while loop star pattern triangle
js while loop star pattern triangle

Okay so this one is just a bit more complicated than the previous examples. By now you already know that we use double quotes (” “) when assigning a string to a variable (see this previous tutorial on JavaScript variables if you are unclear on this). 

Observe the first line of code. A variable called result has been declared and the string called * has been assigned to it. 

Take a look at the second line of code.

while(result.length <= 8){

You’ll see that we have used a common string method as the conditional. The length property returns the length of the string. In this case the length of the variable result is 1, as “*” is only one character. 

Inside the while loop, the result (the star symbol) is printed to the console.log. Then another star is added to it before the code loops. As you can see, this code stops looping at 8 lines but you can change the conditional to have as many lines of stars as you like.  

What’s next? Learn all about using the if, else and JavaScript else if statement.

If you liked this JS While Loop article, we have more JavaScript articles

While you’re here, don’t forget to check out our Python tutorials and cool tips and tricks that can help you get stuff done. 

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.