Loops in javascript are used when you have to execute a block of code repeatedly based on condition. Loops execute certain lines of code as long as the condition is true.
If you want to write a “Hello world” message 50 times on your webpage, you’ll have to write code 50 times. But with the help of loops, you can do that in 4-5 lines of code.
Types of loops:
- for loop
- for/in loop
- for/of loop
- while loop
- do/while loop
1) for loop:
Syntax:
for(statement1; statement2; statment3) {
// code to be executed repeatedly
}
Explanation:
- statement1 is executed first even before the running loop. Mainly, statement1 is used to assign values to variables that will be useful in the loop.
Example: var i = 1; - statement2 is used to give a condition on which the loop should run.
Example: i <= 5; - statment3 is executed every time the code block is executed. This statement is used to increment the value of the variable.
Example: i++;
Example of for loop:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>For Loop in JS</title>
<script>
document.write("<b><u>For loop in javascript:</u></b><br /><br />")
for (var i = 1; i <= 5; i++) {
document.write("Hello world!!!");
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>Output:
For loop in javascript:
Hello world!!!
Hello world!!!
Hello world!!!
Hello world!!!
Hello world!!!
2) for/in loop:
for/in loop is used to loop on an object.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>For/in loop in JS</title>
<script>
var developer = { name: "John Doe", job: "UI developer", age: 23 };
document.write("Developer name, job profile and age is:");
document.write("<br />");
for (var x in developer) {
document.write(developer[x] + " ");
}
</script>
</head>
<body>
</body>
</html>Output:
Developer name, job profile and age is:
John Doe UI developer 23
3) for/of loop:
You can use for/of loop for iterating(loop through) arrays, objects, strings, and more.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>for/of loop in JS</title>
<script>
var names = ['Bill', "Steve", "Tim", "Mark"]
for (var x of names) {
document.write(x);
document.write("<br />");
}
</script>
</head>
<body>
</body>
</html>Output:
Bill
Steve
Tim
Mark
4) while loop:
The while loop iterates through a block of code when the condition is true.
Syntax:
while(condition) {
// code to be executed repeatedly
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>while loop in JS</title>
<script>
var id = 1;
while (id <= 5) {
document.write("Employee id is: ", id);
document.write("<br />");
id++;
}
</script>
</head>
<body>
</body>
</html>Output:
Employee id is: 1
Employee id is: 2
Employee id is: 3
Employee id is: 4
Employee id is: 5
5) do/while loop:
The do/while loop is an alternative to the while loop. But in do/while loop code is executed once. After that, it checks the condition and repeats the loop until the condition is true.
Syntax:
do {
// code to be executed
} while(condition)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>do/while loop in JS</title>
<script>
var id = 1;
do {
document.write("Employee id is: ", id);
document.write("<br />");
id++;
} while (id < 1)
</script>
</head>
<body>
</body>
</html>Output:
Employee id is: 1
Notice that in this example code block is executed once even if the condition is false.
