Looping in programming languages is a feature that 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: In this example we will print the same things, again and again, to understand the work of Loops.
<script> console.log('Hello World'); console.log('Hello World'); console.log('Hello World'); console.log('Hello World'); console.log('Hello World'); console.log('Hello World'); console.log('Hello World'); console.log('Hello World'); console.log('Hello World'); console.log('Hello World'); </script> |
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.
JavaScript Loops: These are the majorly used loops in javascript.
- 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.
JavaScript 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:
<script> // Working while loop example let i = 0; while( i < 5){ console.log('Hello World'); // Necessary to increase the iterator value i++; } </script> |
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.
<script> // Not working while loop let i = 5; while( i < 4 ){ console.log('Hello World'); i++; } </script> |
Since the condition inside the while loop doesn’t evaluate to true, hence nothing is printed to the screen.
JavaScript do..while Loop: The 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:
<script> // JavaScript program to illustrate do-while loop let x = 21; do { console.log("Value of x: " + x + "<br />"); x++; } while (x < 20); </script> |
Output:
Value of x: 21
JavaScript 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:
<script> // for loop for(let i = 0; i < 5;i++){ console.log('Value of i is: ' + i ); } </script> |
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
