Mastering the JavaScript Do-While Loop: A Comprehensive Guide

JavaScript Do-While Loop

JavaScript Do-While Loop is used to execute a block of code for one or more number of times based on a condition.

The basic difference between while and do-while loop is that, in while loop the condition is checked before execution of block, but in do-while the condition is checked after executing the block. Because of this, the code inside the loop is executed at least one in a do-while loop.

In this tutorial, we will learn how to define/write a JavaScript Do-While loop, and its usage using example programs.

Syntax

The syntax of JavaScript Do-While Loop is

<span class="pln">
</span><span class="kwd">do</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
     </span><span class="com">//statements</span><span class="pln">
 </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">while</span><span class="pln"> </span><span class="pun">(</span><span class="pln">condition</span><span class="pun">);</span><span class="pln">
</span>

where condition is the expression which is checked after executing the statements inside the loop.

do and while are keywords.

Examples

In the following example, we execute a block of code that appends ‘hello world’ to a pre block HTML element ten times using a Do-While Loop.

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="tag">&lt;pre</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"output"</span><span class="tag">&gt;&lt;/pre&gt;</span><span class="pln">
    </span><span class="tag">&lt;script&gt;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">do</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'output'</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">+=</span><span class="pln"> </span><span class="str">'hello world\n'</span><span class="pun">;</span><span class="pln">
            i</span><span class="pun">++;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">while</span><span class="pln"> </span><span class="pun">(</span><span class="pln">i </span><span class="pun">&lt;</span><span class="pln"> </span><span class="lit">10</span><span class="pun">);</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span>

Output:

Even if the condition is false for the first time, the code inside loop will be executed at least once.