Imagine you want to print the numbers from 1 to 10. You could write console.log() ten times, but that would be a lot of repeated code. JavaScript gives us loops to handle this kind of work. A loop runs the same block of code again and again until a condition tells it to stop.
The three javascript loops you will use most often are:
forwhiledo...while
for Loop
A for loop repeats a block of code a specific number of times. It is a good choice when you know how many times the code needs to run.
For example, this program prints numbers from 1 to 5.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript for Loop</title>
</head>
<body>
<h1>JavaScript for Loop</h1>
<script>
for (let i = 1; i <= 5; i++) {
console.log(i);
}
</script>
</body>
</html>
Output:
1
2
3
4
5The for loop has three important parts:
for (let i = 1; i <= 5; i++)
let i = 1sets the starting value.i <= 5tells the loop when to stop.i++increases the value by 1 after each round.
So the loop starts at 1, prints the number, increases it, and continues until i becomes greater than 5.
while Loop
A while loop keeps running a block of code while a condition is true. The loop stops when the condition becomes false.
Example: while Loop
<!DOCTYPE html>
<html>
<head>
<title>JavaScript while Loop</title>
</head>
<body>
<h1>JavaScript while Loop</h1>
<script>
let number = 1;
while (number <= 5) {
console.log(number);
number++;
}
</script>
</body>
</html>
Output:
1
2
3
4
5The loop checks number <= 5 before each round. The number++ is important here. It increases the value so the condition eventually becomes false. Without it, the loop would keep running.
do…while Loop
A do...while loop runs the code first and checks the condition afterward. This means the code runs at least once, even if the condition is false at the beginning.
Example: do…while Loop
<!DOCTYPE html>
<html>
<head>
<title>JavaScript do while Loop</title>
</head>
<body>
<h1>JavaScript do...while Loop</h1>
<script>
let number = 1;
do {
console.log(number);
number++;
} while (number <= 5);
</script>
</body>
</html>
Output:
1
2
3
4
5The main difference is simple:
whilechecks the condition first.
do...whileruns the code first and checks the condition afterward.
break Statement
The break statement is used to stop a loop immediately. Once JavaScript reaches break, the loop ends.
Example: Using break
<!DOCTYPE html>
<html>
<head>
<title>JavaScript break</title>
</head>
<body>
<h1>JavaScript break Example</h1>
<script>
for (let i = 1; i <= 10; i++) {
if (i === 6) {
break;
}
console.log(i);
}
</script>
</body>
</html>
Output:
1
2
3
4
5When i becomes 6, break stops the loop immediately.
continue Statement
The continue statement skips the current round of a loop and moves to the next round.
Example: Using continue
<!DOCTYPE html>
<html>
<head>
<title>JavaScript continue</title>
</head>
<body>
<h1>JavaScript continue Example</h1>
<script>
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue;
}
console.log(i);
}
</script>
</body>
</html>
Output:
1
2
4
5When i is 3, continue skips that round. The loop then continues with 4.
The difference is easy to remember:
break→ stops the loop.continue→ skips one round.
Nested Loops
A loop can also be placed inside another loop. This is called a nested loop. Nested loops are useful when you need to work with rows and columns, tables, patterns, or other repeated data.
Example: Nested for Loop
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Nested Loop</title>
</head>
<body>
<h1>JavaScript Nested Loop</h1>
<script>
for (let row = 1; row <= 3; row++) {
for (let column = 1; column <= 3; column++) {
console.log("Row:", row, "Column:", column);
}
}
</script>
</body>
</html>
Output:
Row: 1 Column: 1
Row: 1 Column: 2
Row: 1 Column: 3
Row: 2 Column: 1
Row: 2 Column: 2
Row: 2 Column: 3
Row: 3 Column: 1
Row: 3 Column: 2
Row: 3 Column: 3The outer loop handles the rows, while the inner loop handles the columns.
Key Points
- Loops repeat a block of code.
- A
forloop is useful when you know the number of repetitions. - A
whileloop runs while its condition is true. - A
do...whileloop runs the code once before checking its condition. breakstops a loop.continueskips the current round.- A loop inside another loop is called a nested loop.
In the next chapter, we will look at JavaScript Functions and see how you can put related code together and use it whenever you need it.
Frequently Asked Questions (FAQs)
Q1. What are JavaScript loops?
JavaScript loops are used to repeat a block of code multiple times while a condition is true. They help reduce repeated code and are commonly used when working with numbers, arrays, and other collections of data.
Q2. What is a JavaScript for loop used for?
A JavaScript for loop is useful when you know how many times you want to repeat a task. For example, you can use it to print numbers from 1 to 10 or process a fixed number of items.
Q3. What is the difference between a JavaScript while loop and a for loop?
A JavaScript while loop is useful when the number of repetitions depends on a condition. A for loop is often more convenient when the starting value, stopping condition, and number of repetitions are known.
Q4. When should I use a JavaScript do while loop?
A JavaScript do while loop is useful when the code must run at least once before the condition is checked. Unlike a while loop, the condition is checked after the first execution.
Q5. What is a nested loop in JavaScript?
A nested loop is a loop placed inside another loop. It is useful for working with rows and columns, tables, patterns, and data that has multiple levels.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
