Meanwhile: While Loops in JavaScript

Recently, I’ve been exploring topics that I learned early in my JavaScript education, but that have faded to some degree or another because they’ve been replaced by more efficient techniques, by methods built-in to libraries like React or simply because time has worked its magic on my mind.

The for Loop came up in a recent interview and I felt a little lost, because I have become so used to implementing .map() or .filter() methods to iterate through an array. I want to make sure that I am reinforcing the core looping strategies of JavaScript so that I can be more confident and well-rounded in the future.

Which is why I’ve decided to break down another basic looping strategy: the while Loop.

A while Loop will execute a certain block of code multiple times, for as long as a certain condition is met.

while (condition) {
   //Your code...
}

You can see that the while Loop is simpler in syntax than the for Loop. All we need is our conditional expression and the code block we want to run. In a sentence, you can think of it like this: “While something is true, do this.”

Let’s take a peak at an example. I want to build a function that replicates the iconic counting of Count von Count from Sesame Street (i.e. “One! One scary castle! Mwahaha!”) He will count coconuts up to a certain amount determined by the user. For each additional coconut, an extra “ha” will be added to his laugh.

const countCounts = (n) =>{
   let i = 1;
   
   while (i <= n) {
      console.log(i + "! " + i + " crazy coconuts! " + "Mwa" +           
      "ha".repeat(i));
      i++;
   }
}

After creating a function called countCounts and passing in a number (n), the first thing I’ve done is create a counter variable called i and set it to 1. This will be the first number in our sequence and because we always want Count von Count to start at one, that’s the best value to set as our default.

While i is less than or equal to n — the number our user passes in — we will run our code block. Our i value will repeat twice and then append the string “crazy coconuts!”. It will also append the strings “Mwa” and “ha”, which will be repeated a number of times equal to our counter variable. Once the log is complete, we will increment the i value by one.

What are our results when we run countCounts()?

countCounts(6);
// => 1! 1 crazy coconuts! Mwaha
2! 2 crazy coconuts! Mwahaha
3! 3 crazy coconuts! Mwahahaha
4! 4 crazy coconuts! Mwahahahaha
5! 5 crazy coconuts! Mwahahahahaha
6! 6 crazy coconuts! Mwahahahahahaha

That’s looking pretty good!

Taking a close look at the code, you’ll notice that even though the syntax is different, we are still using the same three basic steps that we use in a for Loop. We initialize a counter, set a condition and then increment our counter. It just looks a little different. We set our counter outside the loop and set our incrementation within the code block.

So why would we use a while Loop instead of a for Loop? Both are perfectly viable options to solve a lot of problems, but have advantages that serve them best in certain situations.

For example, for Loops are great for when we know when we want a loop to starts, as well as when we want it to end. Let’s say we want to print all the numbers that are divisible by five until we reach the number 25. This is perfect for a for Loop because we know where we want the loop to stop.

for (let i = 1; i <= 25; i++){
   if (i % 5 === 0){
      console.log(i)
   }
}

In this case, we initialize our counter at one, check to see if it is less than or equal to 25, and then increment by one. If the i variable is divisible by 5, we console log it.

The while Loop is better for when you aren’t so sure about your start or end points, but know exactly what your condition is going to be.

For example, in our countCounts function, we don’t know exactly how many times we want to run the code block, because that is entirely up to the user. This variable can be changed. That’s why it is a great situation to use a while Loop.

While there are other looping option in JavaScript, these are the two predominant options. I do not know if they will become a regular part of my repertoire, as there are other, more efficient options to iterate over data. But I do what to make sure that I’m hardening these ideas, as looping is a core programming topic.