Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions typically return true or false when analysed. A loop will continue running until the defined condition returns false.
The three most common types of loops are. for
- What are Loops in JavaScript?
- Different Types of Loops in JavaScript
- while loop
- do-while loop
- for loop
- for-of loop
- for-in loop
What are Loops in JavaScript?
In many programming languages, loops are used to the execution of a block of code repeatedly until the specified condition is met true.
For example, suppose you want to print “My First Program” 5 times. This can be done in two ways, the first one is iterating a loop and the second one is printing manually.
Using a loop print “My First Program”
<script>
for(var i=1; i<=5; i++) {
document.write( "My first Program - " + i + "<br>");
}
</script>
Print “My First Program” Manually
<script>
document.write( "My first Program" + "<br>");
document.write( "My first Program" + "<br>");
document.write( "My first Program" + "<br>");
document.write( "My first Program" + "<br>");
document.write( "My first Program" + "<br>");
</script>
You looked at both the examples given. How did we print my first program in JavaScript 5 times?. But in one we had to write the code repeatedly in a program. That is when we used for loop, then we write less code to print 5 times “my first program”.
By the end of this tutorial, you will learn about all the loops of JavaScript.
Different Types of Loops in JavaScript
There are five types of loops in JavaScript:
- while loop
- do-while loop
- for loop
- for-of loop
- for-in loop
1: while Loop
The while loop is also known as an entry control loop. while loop is repeated block of code until specified condition met is true. If the condition fails, the loop execution halt.
Syntax of while loop:
while(condition) {
// Code to be executed
}
The “while loop” is executed block of code until the specified condition is met true. Inside the while loop, you should include the statement that will end the loop at some point in time. Otherwise, your loop will never end or run infinitely.
Example 1: while loop
<script>
var i = 25;
while (i<=20) {
document.write(i + "<br/>");
i++;
}
</script>
2: do while Loop
The do while loop is different from while loop. In the do-while loop, the specified condition is evaluated at the end of the loop. Even if the condition is false, the do-while loop will execute the block of code once.
Note:- Do while loop is also known as an exit control loop.
Syntax of do while loop:
do {
// Code to be executed
}
while(condition);
The do…while loop is very similar to while loop. The main difference is that in do…while loop, if the condition is false, the do-while loop will execute the block of code once.
Example 1: do-while loop
<script>
var i = 1;
do {
document.write(i + "<br/>");
i++;
}
while(i <= 0);
</script>
3: For Loop
The for loop, the specified condition is evaluated at the beginning of the loop. Even a repeated block of code until the specified condition is met true.
Syntax of while loop:
for(initialization; condition; increment/decrement) {
// Code to be executed
}
Here,
- Initialization: Initialize a counter variable to start with.
- Condition: specify a condition that must evaluate to true for next iteration.
- Iteration: increase or decrease counter.
Example 1: For loop
<script>
for(var i=1; i<=5; i++) {
document.write( i + "<br>");
}
</script>
4: for-of Loop
The for/of loop through the values of an iterable object in javascript.
Syntax of for-of loop:
for(variable in object) {
// Code to be executed
}
Example 1: for-of loop
<script>
// asign string to var
let str = "My Class!";
for(let character of str) {
document.write(character + "<br>");
}
</script>
5: The for-in Loop
The for-in loop is a special type of a loop that iterates over the properties of an object, or the elements of an array.
Syntax of for-in loop:
for(variable in object) {
// Code to be executed
}
Example 1: for-in loop
<script>
// javascript object
var info = {"fname": "Tony", "lname": "Hill", "age": "25"};
// iterate object using for-in Loop
for(var pinfo in info) {
document.write("<p>" + pinfo + " = " + info[pinfo] + "</p>");
}
</script>
Conclusion
In this javascript tutorial, you have learned javascript loop such as for, do-while, while, for-in, and for-of, loop.
