Do...While in JavaScript; executing the forgotten loop

As engineers and web developers, loops are some of the most jack-of-all-trades tools in our toolkits that we use every day.

The ever reliable for loop starts the vast majority of our logic, with the occasional while loop pulling up slack for a bit more complexity.

In all of our excitement over our regular toolkit, however, it's easy to forget that a third version exists!

Enter the do...while loop. 🎉

What the heck is a do...while loop?

According to the MDN Web Docs, a do...while statement:

...creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.

Let's take a look at the syntax:

do {
  //statement;
} while (condition);

Used with a bit of real logic:

let i = 0;
do {
 i = i + 1;
} while (i < 5);

It may not be readily apparently why this is useful or preferable over a regular while loop, but the key thing to remember is:

the statement logic in the loop will run at least once before the while condition is evaluated

This is a very specific use case, but one that can make your life significantly easier when those specific use cases come along.

Let's use an example with a bit more context that will make it far more clear what the advantage is.

Let's say you've been given an array of n length, and as part of a solution to a problem you need to traverse the array in a "circle" and return back to the index on which you began. You'll potentially be repeating this loop from each index of the array in a for loop.

Instead of trying to figure out how to manipulate a pointer to fit within a nested for or a while loop, we can use a do...while loop instead!

let n = arr.length;
for (let i = 0; i < n; i++) {
  // Where in the array we'll begin
  let traverseIndex = i;

  do {
    /*
    (other algorithm logic here)
    */
    if (traverseIndex === n - 1) {
      traverseIndex = 0;
    } else {
      traverseIndex++;
    }
  } while (traverseIndex !== i);
}

That last line might be a bit confusing— how can the loop occur after we've set the traverseIndex to i, if we're telling the loop to stop once that condition is met?

Because thanks to do...while, we're running our actual loop logic once before that condition is checked. This means we can begin at our starting index, do logic with that index in the array, then increment it (or set it to the start of the array if it reaches the end) and essentially begin the loop afterwards.

This allows us to run logic on the ith element, proceed through the array, and then stop immediately once we reach that ith element again!

Pretty handy, huh?

Thanks for reading this short tutorial on using a do...while loop in JavaScript! I hope you find it helpful to remember while you're working on your own projects and problem solving endeavors. 😄