Web Development - HTML, CSS & JavaScript
1️⃣1️⃣ "while" Loop
A "while" loop runs as long as its condition remains true.
let count = 1;
while (count <= 5) {
console.log(count);
count++;
}
Output: 1 2 3 4 5
Be careful to update the variable. This can create an infinite loop:
let count = 1;
while (count <= 5) {
console.log(count);
}
"count" never changes, so the condition never becomes false.
1️⃣2️⃣ "do...while"
A "do...while" loop executes the code at least once, because the condition is checked after the code runs.
let count = 10;
do {
console.log(count);
count++;
} while (count < 5);
Output: 10
Even though "count < 5" is false, the code runs once.
Compare:
while (count < 5) {
console.log(count);
}
The "while" loop may execute zero times.
1️⃣3️⃣ "break"
"break" immediately stops a loop.
for (let i = 1; i <= 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}
Output: 1 2 3 4
1️⃣4️⃣ "continue"
"continue" skips the current iteration and moves to the next one.
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue;
}
console.log(i);
}
Output: 1 2 4 5
1️⃣5️⃣ Nested Loops
You can put one loop inside another.
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 2; j++) {
console.log(i, j);
}
}
Output:
• 1 1
• 1 2
• 2 1
• 2 2
• 3 1
• 3 2
Nested loops are useful for:
• Grids
• Tables
• Matrices
• Combinations
• Certain algorithmic problems
But they can become expensive when working with large datasets.
⭐ 1️⃣6️⃣ "for...of"
"for...of" is especially useful for iterating over values in an iterable such as an array or string.
let fruits = ["Apple", "Banana", "Mango"];
for (let fruit of fruits) {
console.log(fruit);
}
Output: Apple Banana Mango
⭐ 1️⃣7️⃣ "for...in"
"for...in" is commonly used to iterate over enumerable property keys of an object.
let person = {
name: "Rahul",
age: 25,
city: "Pune"
};
for (let key in person) {
console.log(key);
}
Output: name age city
To access the corresponding value:
for (let key in person) {
console.log(key, person[key]);
}
Output: name Rahul, age 25, city Pune
Important distinction
• for...of → values
• for...in → property keys
🧠 Real-World Example
Imagine an e-commerce application. You want to check whether each customer has completed their payment.
let payments = [
"success",
"success",
"failed",
"success"
];
for (let payment of payments) {
if (payment === "success") {
console.log("Order confirmed");
} else {
console.log("Payment failed");
}
}
Output: Order confirmed, Order confirmed, Payment failed, Order confirmed
💻 Practice
1️⃣ Voting eligibility
Write a program that prints Eligible when age is 18 or above, otherwise Not eligible
2️⃣ Even numbers
Use a loop to print: 2 4 6 8 10
3️⃣ Multiplication table
Print the multiplication table of 7
4️⃣ Find a number
Loop from 1 to 20 and stop when you reach 13. Use "break".
5️⃣ Skip numbers
Loop from 1 to 10 but skip 5. Use "continue".
6️⃣ Predict the output
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue;
}
console.log(i);
}
7️⃣ Challenge
Write a program that checks numbers from 1 to 20 and prints Even for even numbers and Odd for odd numbers.
Hint: number % 2 === 0
🧠 Double Tap ❤️ For More
9 · 1.6K ·