Do...While in JavaScript; executing the forgotten loop
Tags: javascript, tutorial, webdev, frontend
Published: 2020-08-19 21:22:05

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while):

> ...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:

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

Used with a bit of real logic:

``` javascript
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!

``` javascript
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. 😄