? JavaScript Loops

? Quick Overview

Loops in JavaScript let you repeat a block of code multiple times. They are essential for tasks like processing arrays, iterating over object properties, repeating an action until a condition is met, and working with user input or runtime data.

Common loop types include for, for...in, for...of, while, and do...while. Each loop has a slightly different use case, but all revolve around three main ideas: start, condition, and update.

? Key Concepts

• Iteration: One complete execution of the loop body.
• Loop control variable: A variable (like i or count) that changes on each iteration.
• for loop: Best when you know in advance how many times to repeat a task.
• for...in: Iterates over keys (enumerable properties) of an object.
• for...of: Iterates over values of an iterable (arrays, strings, Maps, Sets, etc.).
• while: Repeats as long as a condition stays true (condition is checked before each run).
• do...while: Similar to while, but runs the body at least once before checking the condition.
• Infinite loops: Happen when the condition never becomes false (often due to a missing or incorrect update).

? Syntax & Theory

Most loops follow the same logical pattern:

• Initialization: Set a starting value (e.g., let i = 0;).
• Condition: Decide when to stop (e.g., i < 5).
• Update: Change the loop variable each time (e.g., i++).

For for loops, all three parts live in the loop header. In while and do...while, you typically put initialization before the loop, the condition in the loop header, and the update inside the loop body.

Objects and arrays are treated differently:

• for...in is designed for objects and gives you property names (keys).
• for...of is designed for iterables and gives you the values directly.

? Code Examples

? for Loop

The for loop is used when you know in advance how many times you want to execute a block of code. It has three parts inside the parentheses: initialization, condition, and increment/decrement.

// Classic for loop with a counter
for (let i = 0; i < 5; i++) {
  console.log("Iteration number:", i);
}

// Looping through an array using a for loop
const fruits = ["Apple", "Banana", "Cherry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

? for...in Loop

The for...in loop iterates over enumerable properties (keys) of an object. It is useful when working with objects to access keys and their values.

const person = {name: "Alice", age: 30, city: "NY"};
for (let key in person) {
  console.log(key + ": " + person[key]);
}

Note: Avoid using for...in on arrays if you want numeric indices, as it iterates over keys which can include inherited properties.

? for...of Loop

The for...of loop iterates over iterable objects such as arrays, strings, Maps, Sets, etc., giving you values directly.

const colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);
}

// Using for...of with a string
const message = "Hello";
for (let char of message) {
  console.log(char);
}

⏳ while Loop

The while loop runs as long as a specified condition is true. It checks the condition before each iteration, so if the condition is initially false, the loop body will never run.

let count = 0;
while (count < 3) {
  console.log("Count is:", count);
  count++;
}

Use case: Waiting for a certain condition that depends on runtime values.

? do...while Loop

The do...while loop guarantees the loop body executes at least once before the condition is tested. This is useful when the loop code must run initially regardless of the condition.

let number = 0;
do {
  console.log("Number is:", number);
  number++;
} while (number < 3);

// Runs once even though the condition is false
let n = 5;
do {
  console.log("Runs once even though condition is false");
} while (n < 3);

➕ Sum of Numbers Using for Loop

let sum = 0;
for (let i = 1; i <= 5; i++) {
  sum += i;
}
console.log("Sum of numbers from 1 to 5 is:", sum);

? Looping Over Object Properties and Arrays

Using for...in for object properties and for...of for array values:

// Iterating over an object
const book = {title: "1984", author: "Orwell"};
for (let prop in book) {
  console.log(`${prop}: ${book[prop]}`);
}

// Iterating over an array
const numbers = [10, 20, 30];
for (const num of numbers) {
  console.log(num);
}

? Live Output & Explanation

? Interactive Example

Click the button to see a simple for loop generate numbers from 1 to 5 and display them on the page.