- 4 years ago
- Zaid Bin Khalid
- 3582 Views
-
4
In this session, you will learn how to repeat a series of actions using loops in JavaScript with the help of syntax code and example.
Different Types of Loops in JavaScript
The primary function of loops is used to execute the same block of code again and again until a specific condition is met. The essential task behind a loop is to automate the tasks in a program to save effort and time with an accurate result.
JavaScript Loops
JavaScript supports five different types of loops:
- While Loop
- Do…while loop
- For loop
- For…in loop
- For…of loop
We will discuss all the loop statements in detail, which is support by JavaScript in this session.
The while Loop
The most straightforward looping statement is the while loop statement provided by JavaScript. This loop loops a block of code as long as the condition evaluates to true. When the state fails, the loop is stopped.
While Loop Syntax
The basic syntax of while loop as shown:
while(condition) {
// Code to be executed
}
The mentioned example will show a loop that will continue to run as long as the variable i is less than or equal to 5. It will increase the variable each time the loop runs:
var i = 1;
while(i <= 5) {
document.write("<p>The number is " + i + "</p>");
i++;
}
The do…while loop
I do…while loop the condition evaluates at the end of each loop when the block of code executed once.
The do…while Loop Syntax
The basic syntax of the do-while loop as shown:
do {
// code to be executed
}
while(condition);
The following example defined a loop in the JavaScript code when it started with i=1. Then it will print output results and increase the value of the variable I by 1.
var i = 1;
do {
document.write("<p>The number is " + i + "</p>");
i++;
}
while(i <= 5);
Difference Between while and do…while loop
These loops are different in one important way. When the condition statement is executed, the while loop at the start of the conditional expression shows to false. The loop will never be executed, on the other side with a do…while loop. It will always be executed once even the conditional expression evaluates to false. Unlike the condition is assessed at the end of the loop.
The for Loop
In the loop, till a specific condition is met, the loop repeats a block of code. It used to execute a block of code for a certain number of times typically.
For loop syntax
The basic syntax for loop as shown:
for(initialization; condition; increment) {
// Code to be executed
}
for(var i=1; i<=5; i++) {
document.write("<p>The number is " + i + "</p>");
}
The for…in loop
This type of loop is a special loop, can iterate over the properties of an object or the elements of an array.
for… in loop syntax
The basic syntax for…in loop as shown:
for(variable in object) {
// code to be executed
}
You can see, for example, how to loop through all properties of the JavaScript object.
// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// Loop through all the elements in the array
for(var i=0; i<fruits.length; i++) {
document.write("<p>" + fruits[i] + "</p>");
}
The for…of Loop Es6
In the Es6 loop, which allows us to iterate over arrays or other objects. (example strings). For each element of the iterable object, the code inside the loop is executed.
You can see in the following example on how to loop through arrays and strings using this loop:
// Iterating over array
let letters = ["a", "b", "c", "d", "e", "f"];
for(let letter of letters) {
console.log(letter); // a,b,c,d,e,f
}
// Iterating over string
let greet = "Hello World!";
for(let character of greet) {
console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}
- 4 years ago
- Zaid Bin Khalid
- 3582 Views
-
4