Hey everyone! Today, let’s dive into an essential topic in JavaScript — loops! If you’ve ever needed to repeat a task multiple times in your code, loops are your best friend.
Loops help us automate repetitive tasks efficiently, making our code more concise and readable. Additionally, we’ll explore two important keywords: break and continue, which allow us to control the flow of loops more effectively. Whether you’re just starting or looking to solidify your understanding, this guide will make loops easy to grasp. Let’s get started!
What Are Loops in JavaScript?
Loops allow us to run a block of code multiple times without writing it repeatedly. Instead of manually repeating an action, we can automate it using loops.
JavaScript has four main types of loops:
for loop
while loop
do…while loop
for…of loop (useful for arrays)
Let’s break them down with examples!
1️⃣ for Loop
The for loop is great when you know exactly how many times you want to run a piece of code.
How it Works:
A for loop has three parts inside the parentheses:
Initialization → Set a starting value.
Condition → The loop will run while this is true.
Update → Changes the value after each iteration.
Example:
// Print numbers from 1 to 5
for (let i = 1; i <= 5; i++) {
console.log(i);
}
How This Works:
Start with i = 1
Run the loop while i <= 5
Print i, then increase i by 1
Repeat until i is greater than 5
2️⃣ while Loop
The while loop runs as long as the condition is true. It's great when you don’t know beforehand how many times the loop should run.
Example:
// Print numbers from 1 to 5
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}
How This Works:
Check if i <= 5 (if true, run the loop)
Print i
Increase i by 1
Repeat until i is greater than 5
3️⃣ do…while Loop
The do…while loop is similar to while, but it always runs at least once, even if the condition is false!
Example:
// Print numbers from 1 to 5
let i = 1;
do {
console.log(i);
i++;
} while (i <= 5);
How This Works:
Run the code inside {} at least once
Then, check if i <= 5
If true, repeat. If false, stop
Use do...while when you must execute the loop at least once.
4️⃣ for…of Loop (for arrays)
The for...of loop is perfect for iterating over arrays.
Example:
const fruits = ['🍎', '🍌', '🍊'];
for (let fruit of fruits) {
console.log(fruit);
}
How This Works:
Loop through each element in the array
Assign the current element to fruit
Print it
Break & Continue: Controlling Loops
Now, let’s talk about break and continue, which give us extra control over loops.
Break Statement
Stops the loop immediately when a condition is met.
Example:
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break;
}
console.log(i);
}
Output: 1, 2 (Stops at 3)
Use break when you want to exit a loop early.
Continue Statement ⏩
Skips the current iteration but continues the loop.
Example:
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue;
}
console.log(i);
}
Output: 1, 2, 4, 5 (Skips 3)
Use continue when you want to skip certain values but keep looping.
Final Thoughts
Loops are powerful tools that help us automate repetitive tasks in JavaScript. Here’s a quick recap:
✅ Use for when you know how many times to loop
✅ Use while when looping until a condition changes
✅ Use do...while if you need to run the loop at least once
✅ Use for...of to loop through arrays easily
✅ Use break to exit a loop early
✅ Use continue to skip an iteration but keep looping
Hope this guide makes loops easier to understand! Which loop do you use the most, and why? Let me know in the comments!
Top comments (0)