DEV Community

Abhay Yt
Abhay Yt

Posted on

Comprehensive Guide to Loops in JavaScript

### Loops in JavaScript

Here’s a comprehensive guide to loops in JavaScript with examples:


### **1. For Loop**
The for loop is ideal when you know the exact number of iterations you need to perform.

#### **Syntax:**

for (initialization; condition; increment/decrement) {
  // Code to execute
}
Enter fullscreen mode Exit fullscreen mode

#### **Example:**

for (let i = 1; i <= 5; i++) {
  console.log(`Iteration: ${i}`);
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • let i = 1 initializes the loop variable i.
  • i <= 5 checks if the condition is true before each iteration.
  • i++ increments i after each loop execution.

### **2. While Loop**
The while loop is used when the number of iterations is not predetermined and depends on a condition.

#### **Syntax:**

while (condition) {
  // Code to execute
}
Enter fullscreen mode Exit fullscreen mode

#### **Example:**

let count = 0;
while (count < 5) {
  console.log(`Count is: ${count}`);
  count++;
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • The loop continues as long as count < 5 is true.
  • Inside the loop, the value of count is incremented in each iteration.

### **3. Do-While Loop**
The do-while loop ensures that the block of code is executed at least once, even if the condition is false.

#### **Syntax:**

do {
  // Code to execute
} while (condition);
Enter fullscreen mode Exit fullscreen mode

#### **Example:**

let number = 0;
do {
  console.log(`Number is: ${number}`);
  number++;
} while (number < 3);
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • The loop body runs first, printing number.
  • The condition number < 3 is checked afterward, determining if the loop should continue.

### **4. For-In Loop**
The for-in loop is used to iterate over the properties of an object.

#### **Syntax:**

for (key in object) {
  // Code to execute
}
Enter fullscreen mode Exit fullscreen mode

#### **Example:**

const person = { name: "John", age: 30, city: "New York" };
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
Enter fullscreen mode Exit fullscreen mode

***Output:*

name: John
age: 30
city: New York
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • key holds the property name.
  • person[key] accesses the corresponding value.

### **5. For-Of Loop**
The for-of loop is used to iterate over iterable objects like arrays, strings, maps, or sets.

#### **Syntax:**

for (variable of iterable) {
  // Code to execute
}
Enter fullscreen mode Exit fullscreen mode

#### **Example:**

const fruits = ["Apple", "Banana", "Cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}
Enter fullscreen mode Exit fullscreen mode

***Output:*

Apple
Banana
Cherry
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • fruit takes each element of the array in sequence.

### **6. Breaking Out of Loops**
Use the break statement to exit a loop prematurely.

#### **Example:**

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}
Enter fullscreen mode Exit fullscreen mode

***Output:*

0
1
2
3
4
Enter fullscreen mode Exit fullscreen mode

### **7. Skipping Iterations**
Use the continue statement to skip the current iteration.

#### **Example:**

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}
Enter fullscreen mode Exit fullscreen mode

***Output:*

0
1
3
4
Enter fullscreen mode Exit fullscreen mode

### **8. Nested Loops**
Loops can be nested inside one another for multidimensional iterations.

Example:

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 2; j++) {
    console.log(`i = ${i}, j = ${j}`);
  }
}
Enter fullscreen mode Exit fullscreen mode

***Output:*

i = 1, j = 1
i = 1, j = 2
i = 2, j = 1
i = 2, j = 2
i = 3, j = 1
i = 3, j = 2
Enter fullscreen mode Exit fullscreen mode

### **9. Infinite Loops**
Be cautious of loops with conditions that never evaluate to false.

#### **Example:**

while (true) {
  console.log("This will run forever unless stopped!");
}
Enter fullscreen mode Exit fullscreen mode

Note: Avoid such loops unless there’s a break mechanism.


### **10. Looping Over Arrays**
Both for and for-of loops are commonly used with arrays.

#### **Example:**

const numbers = [10, 20, 30];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

for (let num of numbers) {
  console.log(num);
}
Enter fullscreen mode Exit fullscreen mode

### **11. Looping Over Strings**
The for-of loop is also helpful for iterating through characters of a string.

Example:

const text = "Hello";
for (let char of text) {
  console.log(char);
}
Enter fullscreen mode Exit fullscreen mode

By understanding and applying these loop types effectively, you can handle repetitive tasks and data structures in JavaScript efficiently. Let me know if you need clarification on any specific type!

Hi, I'm Abhay Singh Kathayat!
I am a full-stack developer with expertise in both front-end and back-end technologies. I work with a variety of programming languages and frameworks to build efficient, scalable, and user-friendly applications.
Feel free to reach out to me at my business email: kaashshorts28@gmail.com.

Top comments (0)