Loops

Loops are the backbone of iterative logic in JavaScript—allowing you to repeat actions efficiently while handling sequences of data. They’re essential for processing collections, validating inputs, and automating repetitive tasks. In this section, we’ll explore the five core loop constructs you’ll use daily, with practical examples and clear distinctions to help you choose the right tool for every scenario.

For Loop

The for loop is JavaScript’s most versatile iteration tool. It combines initialization, condition checking, and iteration in a single statement, making it ideal for predictable counting scenarios or traversing arrays. Its structure is:

<code class="language-javascript">for (initialization; condition; iteration) {
<p>  // body</p>
<p>}</code>

Here’s how it works step-by-step:

Initialization: Sets up the loop counter (e.g., let i = 0)
Condition: Checks if the loop should continue (e.g., i < 5)
Iteration: Updates the counter after each iteration (e.g., i++)

Key Use Case: When you need to traverse a fixed-size collection (like an array) or count through a range of numbers.

<code class="language-javascript">// Example 1: Counting from 0 to 4
<p>for (let i = 0; i < 5; i++) {</p>
<p>  console.log(<code>Iteration ${i}</code>);</p>
<p>}</p>
<p>// Output: </p>
<p>// Iteration 0</p>
<p>// Iteration 1</p>
<p>// Iteration 2</p>
<p>// Iteration 3</p>
<p>// Iteration 4</code>

<code class="language-javascript">// Example 2: Processing an array
<p>const numbers = [10, 20, 30];</p>
<p>for (let num of numbers) {</p>
<p>  console.log(<code>Number: ${num}</code>);</p>
<p>}</p>
<p>// Output:</p>
<p>// Number: 10</p>
<p>// Number: 20</p>
<p>// Number: 30</code>

💡 Pro Tip: Use const or let for loop variables to avoid accidental reassignment. Never use var in modern code.

While Loop

The while loop executes a block as long as a condition remains true. It’s perfect for scenarios where the number of iterations isn’t fixed upfront (e.g., user input validation or processing until a specific state is reached).

<code class="language-javascript">// Example: Counting until user enters a valid number
<p>let userInput = "";</p>
<p>while (!userInput.trim()) {</p>
<p>  userInput = prompt("Enter a number:");</p>
<p>}</p>
<p>console.log(<code>You entered: ${userInput}</code>);</code>

Key Use Case: When you need to handle dynamic conditions (e.g., waiting for user input, processing data until a threshold is met).

Why Choose while?

Unlike for loops, while gives you full control over the iteration logic without a built-in counter. It’s especially useful when your loop condition depends on external state changes.

Do...While Loop

The do...while loop guarantees at least one execution of the loop body before checking the condition. This makes it ideal for input validation scenarios where you must process something before confirming it’s valid.

<code class="language-javascript">// Example: Input validation with guaranteed first try
<p>let password = "";</p>
<p>do {</p>
<p>  password = prompt("Enter password (min 6 chars):");</p>
<p>} while (password.length < 6);</p>
<p>console.log("Password accepted!");</code>

Key Use Case: When you need to ensure the loop runs once even if the initial condition fails (e.g., forms, security checks).

Why Choose do...while?

It solves a common problem: "What if the first attempt fails?" Unlike while, it executes the body before checking the condition. This is critical for user interactions where you must get a response first.

For...In Loop

The for...in loop iterates over object properties (keys). It’s designed for traversing objects, not arrays—though you can use it with arrays if you’re careful.

<code class="language-javascript">// Example: Traversing an object's properties
<p>const person = {</p>
<p>  name: "Alice",</p>
<p>  age: 30,</p>
<p>  city: "New York"</p>
<p>};</p>

<p>for (const key in person) {</p>
<p>  console.log(<code>Key: ${key}, Value: ${person[key]}</code>);</p>
<p>}</p>
<p>// Output:</p>
<p>// Key: name, Value: Alice</p>
<p>// Key: age, Value: 30</p>
<p>// Key: city, Value: New York</code>

Key Use Case: When you need to process object keys (e.g., form data, configuration objects).

Critical Note:

⚠️ Do not use for...in on arrays unless you explicitly want to iterate over indices (which is error-prone). For array traversal, prefer for...of.

For...Of Loop

The for...of loop iterates over iterable values (like arrays, strings, maps, sets). It’s JavaScript’s modern solution for handling collections without worrying about object keys or indices.

<code class="language-javascript">// Example 1: Array iteration
<p>const fruits = ["apple", "banana", "cherry"];</p>
<p>for (const fruit of fruits) {</p>
<p>  console.log(fruit);</p>
<p>}</p>
<p>// Output:</p>
<p>// apple</p>
<p>// banana</p>
<p>// cherry</code>

<code class="language-javascript">// Example 2: String iteration
<p>const message = "Hello";</p>
<p>for (const char of message) {</p>
<p>  console.log(char);</p>
<p>}</p>
<p>// Output:</p>
<p>// H</p>
<p>// e</p>
<p>// l</p>
<p>// l</p>
<p>// o</code>

Key Use Case: When you need to process values, not keys or indices (e.g., transforming arrays, handling streams).

Why for...of?

It’s the most readable loop for modern JavaScript. Unlike for...in, it doesn’t expose internal object structure—making it safer and more intuitive.

Comparison of Loop Types

Loop Type	Best For	Key Limitation	When to Avoid
`for`	Counting, fixed-size collections	Requires explicit counter	Complex condition logic
`while`	Dynamic conditions (e.g., user input)	No built-in counter	Simple counting
`do...while`	Guaranteed first execution	No exit condition in body	Simple counters
`for...in`	Object property traversal	Doesn’t work well with arrays	Array data processing
`for...of`	Value-based iteration (arrays, strings)	Doesn’t traverse object keys	Object key processing

💡 Rule of Thumb: Use for...of for arrays, for...in for objects, and while/do...while for user-driven logic.

Summary

for loops are your go-to for counting and fixed-size collections (arrays).
while loops handle dynamic conditions where iteration count isn’t known upfront.
do...while loops ensure at least one execution—critical for input validation.
for...in loops traverse object properties (not arrays).
for...of loops iterate over values in iterables (arrays, strings, etc.).

Choose the loop that matches your data structure and execution needs: for for predictable counts, while for dynamic checks, and for...of for modern value-based iteration. Remember—always prefer for...of over for...in when working with arrays to avoid confusion. Master these loops, and you’ll write cleaner, more efficient JavaScript that scales with your projects. 😊