JavaScript Tutorial – Day 7: Loops in JavaScript
1 min read

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:

  1. for loop
  2. while loop
  3. do…while loop
  4. for…in loop
  5. 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, and for...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

Leave a Reply

Your email address will not be published. Required fields are marked *