Welcome to the JavaScript tutorials, we have already seen JavaScript If else, and JavaScript Switch case. Today we will talk about JavaScript while loop, and the reasons to use JavaScript while loop. Till now we have seen how the statement will be executed, if the condition is true or false. But, what if you need to perform an action again and again? Either you will use multiple lines of code or a loop which will help you to save a time or a code.
Yes, right, here JavaScript while loop will help you perform an action again and over again. The JavaScript has everything to support you in your difficult time while coding.
JavaScript While Loop – Definition
You must have got the hint about JavaScript while loop, but let’s see the exact meaning of it. The JavaScript while loop can be defined as a condition statement that will create a loop to execute a specific code repetitively till its condition is true.
Note: First the condition will be evaluated, and then the statement will be executed.
JavaScript while loop – Syntax
The while loop has a conditional statement, and a body to be executed in a curly bracket. Now, let’s see the syntax of the while loop:
While (condition)
{
Statement
}
The JavaScript while loop will work in two steps:
- Condition – Check whether the condition is true or not? If it’s true, then it will go to execute part.
- Execute – Now, if the condition is true, then it will execute the statement.
Note: After the execution part, while loop will check the condition. And if it will find it true, then it will again execute the statement. The same repetitive process will go on, until the condition is false.
JavaScript While loop – Example
Now let’s understand the use of JavaScript while loop with an easy to understand example:
<html>
</head>
<body>
<script type="text/javascript">
<!--
var says = 0;
document.write("Starting Loop" + "<br />");
while (says < 10){
document.write("SharpLesson welcome's : " + says + " times" +"<br />");
says++;
}
document.write("Sharplesson will welcome you alway's"+"</br> Loop stopped!");
//-->
</script>
</body>
</html>
The output of the above code will be:
Starting Loop SharpLesson welcome's : 0 times SharpLesson welcome's : 1 times SharpLesson welcome's : 2 times SharpLesson welcome's : 3 times SharpLesson welcome's : 4 times SharpLesson welcome's : 5 times SharpLesson welcome's : 6 times SharpLesson welcome's : 7 times SharpLesson welcome's : 8 times SharpLesson welcome's : 9 times Sharplesson will welcome you alway's Loop stopped!
You can clearly see that the output show’s that the sharplesson always welcome their readers. Before the start of the loop, we have printed a statement ‘ starting a loop’. If you are new to JavaScript, then it is good to use such things to know from where your loop has started.
We already said that JavaScript while loop will work in parts, so let’s understand it in steps:
- First the interpreter will see the condition. Here the value of says =0, which is less than 10 and that is why the statement in a curly bracket will execute.
- Now, it will increment the ‘says’ to 1, and again the interpreter will check the condition.
- Here, says<10, it means again the statement will be executed.
- The loop will be repeated till the time says value will not become equal or greater than 10.
JavaScript do while loop
In case you want to execute the statement first and later you want to check the condition, and then do while loop is a choice for you.
JavaScript do while loop – Syntax
Do{
Statement
} while ( condition);
Now you can see that, unlike JavaScript while loop, here do statement is a one that will be seen by the interpreter first. Next the condition part will play the role, if true, then will repeat else loop will end there only.
JavaScript do while loop – Example
Let’s check the example of do while loop, to understand how it is different that while loop:
<html>
</head>
<body>
<script type="text/javascript">
<!--
var says = 0;
document.write("Starting Loop" + "<br />");
do
{
document.write("SharpLesson welcome's : " + says + " times" +"<br />");
says++;
}while (says < 1)
document.write("Sharplesson will welcome you alway's"+"</br> Loop stopped!");
//-->
</script>
</body>
</html>
The output will be:
Starting Loop SharpLesson welcome's : 0 times Sharplesson will welcome you alway's Loop stopped!
Again, let’s examine the result in steps:
- Unlike JavaScript while loop, it will first execute the statement.
- The value of ‘says’ will increment from 0 to 1, and hence it will go to check condition.
- When it will check the condition, then their interpreter will find the condition is false.
- Now it will not execute the do while loop further and will move down to the next code.
Conclusion
We have just covered JavaScript while loop, do while loop and their examples. As we already said, JavaScript is a fun to learn language, and you must be experiencing it too. Just remember, practice is the main to succeed, enjoy every visit of yours at sharplesson.
Tips to remember
- Don’t put your JavaScript while loop in a condition where condition will not change to false. The execution will not end, because the JavaScript interpreter will always find the value true and will perform it again and again.
- The while loop will not execute if the condition is false.
- The do while loop will execute once, even if the condition is false.