JavaScript Course | Loops in JavaScript

Previous Topic: JavaScript Course | Practice Quiz-2
Looping in programming languages is a feature which facilitates the execution of a set of instructions/functions repeatedly while some condition evaluates to true. For example, suppose we want to print “Hello World” 10 times.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
</script>

chevron_right


The above code will simply output the sentence ‘Hello World’ to the screen 10 times. Though this method is something I wouldn’t recommend. Though one might argue that you can write console.log ’10’ times, what about printing about the console.log ‘100’ or say ‘10000’ times. The above approach in these cases is just not what anyone would recommend that’s why we make use of loops.
Javascript provides different types of loops.

  • while loop
  • do..while loop
  • for loop

Note: Javascript also includes for..in, for..each, for..of loop though they are beyond the scope of this course.



while loop
A while loop is a control flow statement that allows code to be executed repeatedly based on a given Boolean condition. The while loop can be thought of as a repeating if statement.

while(condition){
 do..this;
}

The condition/expression we pass inside the parenthesis of the while loop must evaluate to true otherwise the statements we write inside the block of the while loop will not be executed.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// working while loop example
let i = 0;
while( i < 5){
 document.write('Hello World'+'<br/>');
 i++; // necessary to increase the iterator value
</script>

chevron_right


Output:

Hello World
Hello World
Hello World
Hello World
Hello World

The above code simply prints ‘Hello world’ to the screen and all we did is initialized a variable ‘i’ with value ‘0’ assigned to it, then we say that till the value of this variable ‘i’ is less than ’10’ keep doing whatever is written inside the block of the while loop. It is important to increase the value of this variable ‘i’ otherwise it will go into ‘infinite’ loop. Now consider a scenario where we pass something inside the parenthesis which doesn’t evaluate to true, in that case, nothing will be executed which is inside the code block.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// not working while loop
let i = 5;
while( i < 4 ){
 document.write('Hello World');
 i++;
}
</script>

chevron_right


Since the condition inside the while loop doesn’t evaluate to true, hence nothing is printed to the screen.

do..while loop
do while loop is similar to while loop with the only difference that it checks for the condition after executing the statements. I don’t matter if the condition inside the while parenthesis is true or not the loop will run at least once.

do
{
    statements..
}
while (condition);

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// do while loop
// JavaScript program to illustrate do-while loop 
    let x = 21; 
    
    do 
    
        document.write("Value of x: " + x + "<br />"); 
        x++; 
    } while (x < 20); 
    
</script> 

chevron_right


Output:

Value of x: 21

For Loop
For loop provides a concise way of writing the loop structure. Unlike a while loop, a for statement consumes the initialization, condition and increment/decrement in one line thereby providing a shorter, easy to debug structure of looping.

for (initialization condition; testing condition;  increment/decrement) {
  do..this;
}
  • Initialization condition: Here, we initialize the variable in use. It marks the start of a for loop. An already declared variable can be used or a variable can be declared, local to loop only.
  • Testing Condition: It is used for testing the exit condition for a loop. It must return a boolean value. It is also an Entry Control Loop as the condition is checked prior to the execution of the loop statements.
  • Statement execution: Once the condition is evaluated to true, the statements in the loop body are executed.
  • Increment/ Decrement: It is used for updating the variable for next iteration.
  • Loop termination: When the condition becomes false, the loop terminates marking the end of its life cycle.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// for loop
for(let i = 0; i < 5;i++){
 document.write('Value of i is: ' + i +'<br/>' );
}
</script>

chevron_right


Output:

Value of i is: 0
Value of i is: 1
Value of i is: 2
Value of i is: 3
Value of i is: 4

Next Topic :JavaScript Course | Functions in JavaScript



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.