JavaScript While Loop

Rumman Ansari   Software Engineer   2023-03-26 00:00:00   461  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

JavaScript While Loop

JavaScript While Loop is used to execute a block of code for a number of times based on a condition.

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

Syntax

The syntax of JavaScript While Loop is

<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><span class="pun">{</span><span class="pln">
     </span><span class="com">//statements</span><span class="pln">
 </span><span class="pun">}</span>

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

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 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">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="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="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:

We can also use a while to iterate over the elements of an array, using array length in condition, as shown in the following example.

<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"> arr </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="lit">10</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span><span class="pln"> </span><span class="lit">30</span><span class="pun">,</span><span class="pln"> </span><span class="lit">40</span><span class="pun">];</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">while</span><span class="pln"> </span><span class="pun">(</span><span class="pln">i </span><span class="pun">&lt;</span><span class="pln"> arr</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)</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"> arr</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="str">'\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="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:

MCQ Available

There are 2 MCQs available for this topic.

2 MCQ

No Questions Data Available.
No Program Data.

Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.