
JavaScript Tutorial – Day 7: Loops in JavaScript
When writing programs, we often need to repeat actions multiple times. Instead of writing the same code again and again, we use loops in JavaScript. In this JavaScript tutorial, weβll explore different types of loops, their syntax, real-world examples, and best practices.
What are Loops in JavaScript?
A loop in JavaScript is a control structure that executes a block of code repeatedly until a specified condition is met.
π Example: Instead of writing
console.log("Hello");
console.log("Hello");
console.log("Hello");
We can write:
for (let i = 0; i < 3; i++) {
console.log("Hello");
}
Types of Loops in JavaScript
JavaScript provides several loops:
- for loop
- while loop
- do…while loop
- for…in loop
- for…of loop
Letβs go through them one by one.
1. For Loop in JavaScript
The for loop in JavaScript is used when we know how many times we want to repeat.
Syntax:
for (initialization; condition; increment) {
// code to run
}
Example:
for (let i = 1; i <= 5; i++) {
console.log("Number: " + i);
}
π Output:
Number: 1
Number: 2
Number: 3
Number: 4
Number: 5
2. While Loop in JavaScript
The while loop in JavaScript runs until the condition is true.
Example:
let i = 1;
while (i <= 5) {
console.log("Count: " + i);
i++;
}
π Output:
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
3. Do…While Loop in JavaScript
The do…while loop in JavaScript always executes the block at least once, even if the condition is false.
Example:
let i = 1;
do {
console.log("Do While Count: " + i);
i++;
} while (i <= 3);
π Output:
Do While Count: 1
Do While Count: 2
Do While Count: 3
4. For…In Loop in JavaScript
The for…in loop is used to iterate over the properties of an object.
Example:
let car = { brand: "Tesla", model: "Model S", year: 2024 };
for (let key in car) {
console.log(key + ": " + car[key]);
}
π Output:
brand: Tesla
model: Model S
year: 2024
5. For…Of Loop in JavaScript
The for…of loop in JavaScript is used to iterate over arrays, strings, and other iterable objects.
Example:
let fruits = ["Apple", "Banana", "Cherry"];
for (let fruit of fruits) {
console.log(fruit);
}
π Output:
Apple
Banana
Cherry
Real-Life Example of Loops in JavaScript
Imagine youβre building a shopping cart:
let cart = ["Shoes", "T-shirt", "Watch"];
for (let item of cart) {
console.log("Item in cart: " + item);
}
π Output:
Item in cart: Shoes
Item in cart: T-shirt
Item in cart: Watch
When to Use Loops in JavaScript?
- β for loop β fixed number of iterations
- β while loop β when the number of iterations is unknown
- β do…while loop β when you want at least one execution
- β for…in loop β for objects
- β for…of loop β for arrays or iterable values
Best Practices for Loops in JavaScript
- Avoid infinite loops (
while(true)
) unless necessary. - Use
break
to exit a loop early. - Use
continue
to skip current iteration. - Use the right loop for the right task.
External Resource
π Learn more from MDN Loops and Iteration
Quick Recap
- Loops repeat code until a condition is met.
- JavaScript provides
for
,while
,do...while
,for...in
, andfor...of
. - Each loop has different use cases.
Whatβs Next?
In this JavaScript tutorial series:
- β Day 6 β Switch Case in JavaScript
- β Day 7 β Loops in JavaScript
- π Day 8 β Functions in JavaScript