JavaScript Loop Examples: A Comprehensive Guide

Loops are an essential part of programming, allowing you to repeat a block of code multiple times. In JavaScript, there are several types of loops, each with its own use cases. This guide will walk you through different loop types and provide practical examples to help you understand how they work.

What is a Loop?

A loop is a control flow statement that allows you to execute a block of code repeatedly until a specified condition is met. This is useful when you need to perform a task multiple times without writing the same code over and over.

Types of Loops in JavaScript

1. for Loop

The for loop is the most commonly used loop in JavaScript. It is ideal when you know how many times you want to loop in advance.

Syntax

for (initialization; condition; increment) {
  // code to be executed
}

Example: Looping from 1 to 5

for (let i = 1; i <= 5; i++) {
  console.log(i); // Prints 1, 2, 3, 4, 5
}

Example: Iterating over an Array

const fruits = ['apple', 'banana', 'orange'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // Prints each fruit
}

2. while Loop

The while loop executes a block of code as long as a specified condition is true. It checks the condition before each iteration.

Syntax

while (condition) {
  // code to be executed
}

Example: Counting until a Condition is Met

let i = 1;
while (i <= 5) {
  console.log(i); // Prints 1, 2, 3, 4, 5
  i++;
}

Example: Validating User Input

let age;
while (typeof age !== 'number' || isNaN(age)) {
  age = prompt('Enter your age:');
  age = parseFloat(age);
}
console.log('Your age is', age);

3. do...while Loop

The do...while loop is similar to the while loop, but it executes the block of code at least once before checking the condition.

Syntax

do {
  // code to be executed
} while (condition);

Example: Simple Counter

let i = 1;
do {
  console.log(i); // Prints 1, 2, 3, 4, 5
  i++;
} while (i <= 5);

4. for...of Loop (ES6)

The for...of loop is used to iterate over iterable objects such as arrays, strings, and maps. It provides a simpler syntax compared to traditional for loops.

Syntax

for (const element of iterable) {
  // code to be executed
}

Example: Looping through an Array

const fruits = ['apple', 'banana', 'orange'];
for (const fruit of fruits) {
  console.log(fruit); // Prints each fruit
}

Example: Looping through a String

const str = 'Hello';
for (const char of str) {
  console.log(char); // Prints H, e, l, l, o
}

Choosing the Right Loop

• Use for when you know the number of iterations in advance.
• Use while when you want to loop as long as a condition is true.
• Use do...while when you want to execute the loop at least once before checking the condition.
• Use for...of for iterating over iterable objects like arrays and strings.

Frequently Asked Questions

Q1: What is the difference between for and while loops?

• The for loop is used when you know the number of iterations in advance.
• The while loop is used when you want to loop until a certain condition is met.

Q2: How can I avoid infinite loops?

• Always ensure that the loop condition will eventually become false.
• Use increment/decrement statements correctly in for loops.
• Test your loops with small values before using them in production.

Q3: Can I loop through an object in JavaScript?

• Yes, you can use a for...in loop to iterate over the properties of an object.

Example: Looping through an Object

const person = { name: 'John', age: 30, city: 'New York' };
for (const key in person) {
  console.log(key + ': ' + person[key]);
}

Conclusion

Loops are a fundamental concept in JavaScript, and understanding how to use them effectively can greatly enhance your programming skills. By practicing different loop types and scenarios, you’ll become more comfortable in using them in your projects.