JavaScript while loop and do-while loop with programming examples

(Last Updated On: November 21, 2020)

JavaScript while Loop:

The mechanism through which a set of statements (or single statement) can be executed repeatedly until the given condition becomes true is called loop. Loop statements are used to execute a set of statements repeatedly. The statements that are executed repeatedly are called body of loop. The body loop can be executed repeatedly for a specified number of times or until the given condition remain true.

A variable, which is used in the loop statement to control the number of repetition of loop, is known as loop control variable, the loop control variable is always initialized outside the body of loop( or before to execute the loop statement), so that the condition of loop becomes true. The value of control variable must be changed inside the body of loop (or loop structure), so that the repetition of loop can be controlled.

The loop statements are important features of any programming language, the looping feature of programming language is also known as repetitive structure or iterative structure. In loop structure, the beginning point and ending point of the set of statements that have to be executed repeatedly are marked.

JavaScript provides the following loop structures:

  1. The JavaScript while loop structure.
  2. The JavaScript ‘do-while’ loop structure.
  3. The ‘for’ loop structure.


The JavaScript while loop:

The JavaScript while loop structure is a conditional loop structure. This loop structure is used to execute a group of statements ( or single statement) as long as the given condition remains true.

This loop structure is used when the programmer does not know in advance the number of repetition of loop. The looping is controlled by the user’s given value.

The syntax of JavaScript, while loop structure to execute a single statement repeatedly, is:

While(expression)

Statement;

Next_statement;

The syntax of JavaScript while loop structure of execute a group of statements repeatedly is:

While(expression)

{

Group of statements;

}

Next_statement;

When a javascript while loop statement is encountered during the execution of a program/script, the expression (or condition) is evaluated first. The expression may be a relational expression or logical expression. if the expression is true, then body of  loop is executed. After execution the body of loop, the computer control goes back to the ‘while’ statement and evaluates the expression again, if the given expression is still true, the body of loop is executed again and the computer control goes back to the ‘while’ statement once again. This process is repeated until the expression becomes false. If the expression becomes false at any stage during execution of script, the loop terminates and computer control shifts to the statement that comes immediately after the end of ‘while’ loop structure.

The  body of loop must contain a statement used to control the repetition of loop. Usually, a statement is given in the body of loop to change the value of control variable, so that the loop can be terminated.



Flowchart of JavaScript while loop:

JavaScript while loop

A script is given below to print first 10 natural number using ‘JavaScript while loop structure.

JavaScript while loop

In the above script “n<=10” is a test condition and value 1 is assigned to variable  ‘n’ before the loop statement to make the condition true. When the condition is nested, it will return true value, so body of loop will be executed. In the body of loop, the “n++”, statement changes the value of variable ‘n’ during program execution. After execution the body o loop 10 times, the value of ‘n’ becomes 11. So the loop is terminated and control shifts to the statement “document.write(“ok”); ” that comes immediately after the ‘while’ loop structure.


Example write code to print the squares and cubes of number from 2 to 7 using javascript while loop:

JavaScript while loop

Example write code to calculate the nth power of a number n, i.e. np by using JavaScript while loop:

JavaScript while loop

JavaScript while loop

JavaScript while loop


Example write codes which reverse the order of the input integer using JavaScript while loop:

JavaScript while loop

JavaScript while loop

JavaScript do-while loop:

the JavaScript do-while loop structure is also used to execute a statement or set of statements repeatedly as long as the given condition remains true.

The JavaScript do-while loop structure is similar to JavaScript while loop structure but in JavaScript do-while loop structure, the body of loop comes before the test condition or expression. so the body of loop must be executed at least once event if the expression is false.

The JavaScript do-while loop structure is mostly used for menu selection( or to enter records). In menu selection, you have to execute the body of loop at least once.

The general syntax of JavaScript do-while loop structure is:

Do

{

Body of  loop;

}whil(expression);

Next_statement;

Where:

Do:

Indicates the beginning of the do-while loop structure it is a keyword of javascript.

Body of  loop:

Specifies the set of statements to be executed repeatedly.

While(expression):

Specifies the last statement of ‘do-while’ loop structure. This statement contains the test condition.

Note that there is a semicolon(;) at the end of keyword while. It indicates the end of ‘do-while’ loop structure. The semicolon(;) must be given at the end of this statement.

When the ‘do’ statement is encountered during the execution of a program/script, first the body of loop is executed and then the expression (or test condition) is evaluated. If the expression is true, computer control goes back to the beginning of the ‘do’ loop. This process is repeated until the expression becomes false. If the expression becomes false at any stage during execution of program, the loop terminates and computer control shifts to the statement that comes immediately after the end of ‘do-while’ loop structure (i.e. while(expression);)


The flowchart of JavaScript do-while loop:

JavaScript while loop

A script is given below to print first 10 natural numbers using ‘do-while’ loop.

JavaScript while loop

In the above script “n<=10” is a test condition and value 1 is assigned to variable  ‘n’ before the loop statement to make the condition true. When the condition is nested, it will return true value, so body of loop will be executed. In the body of loop, the “n++”, statement changes the value of variable ‘n’ during program execution. After execution the body o loop 10 times, the value of ‘n’ becomes 11. So the loop is terminated and control shifts to the statement “document.write(“ok”); ” that comes immediately after the do-while loop.



Example write JavaScript code to print the multiplication table of a given number by using ‘do-while’ loop:

JavaScript while loop

JavaScript while loop

Example write code to calculate the factorial of an integer by using JavaScript ‘do-while’ loop:

JavaScript while loop

JavaScript while loop


Differences between JavaScript while loop and JavaScript do-while loop:

             JavaScript while loop            JavaScript do-while loop
JavaScript while loop Test condition comes before body of loop test condition comes after the body of loop
At the beginning of  JavaScript while loop, test condition is evaluated and then body of loop is executed if test condition is true. The body of loop must be executed at least once even if the expression is false.
In JavaScript while loop Semicolon (;) is not given with while(expression) Semicolon (;) is given with while(expression)

Recommended For You

About the Author: Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply