## Loops in JavaScript 🔁 Imagine you want [JavaScript](/courses/javascript) to print: ```text 1 2 3 4 5 ``` You could write: ```javascript console.log(1); console.log(2); console.log(3); console.log(4); console.log(5); ``` That works. But what if you need to print numbers from: ```text 1 → 1,000 ``` Writing 1,000 `console.log()` statements would be... painful. 😭 This is exactly why programming languages have **loops**. --- # What Is a Loop? 🔁 A **loop** repeats a block of code while a certain condition is met. Instead of writing the same code again and again: ```javascript console.log('Hello'); console.log('Hello'); console.log('Hello'); ``` we can write: ```javascript for (let i = 0; i < 3; i++) { console.log('Hello'); } ``` Output: ```text Hello Hello Hello ``` Same result. Much cleaner. ⚡ --- # Why Do We Need Loops? Loops are everywhere in programming. You can use them to: * 🔢 Count numbers * 📋 Process lists of data * 🔍 Search for something * 🧮 Calculate repeated values * 🔤 Read characters from text * 🎮 Update repeated game logic * 📦 Process items one by one Without loops, repetitive tasks would require repetitive code. And repetitive code usually means: ```text More typing + More bugs + More maintenance 😵 ``` Loops solve that. --- # Main Loops in JavaScript [JavaScript](/courses/javascript) gives us several ways to repeat code: ```text for while do...while for...of for...in ``` They all repeat code, but they're useful in different situations. Let's understand them one by one. 👇 --- # The `for` Loop 🔄 The classic `for` loop is useful when you know roughly **how many times** something should run. Basic syntax: ```javascript for (initialization; condition; update) { // code to repeat } ``` That may look confusing at first. Let's break it down. --- # Understanding a `for` Loop 🧠 Example: ```javascript for (let i = 0; i < 5; i++) { console.log(i); } ``` Output: ```text 0 1 2 3 4 ``` The loop contains three important parts: ```javascript let i = 0 ``` Initialization. ```javascript i < 5 ``` Condition. ```javascript i++ ``` Update. --- ## 1️⃣ Initialization ```javascript let i = 0 ``` This runs once before the loop begins. We're creating a variable called: ```text i ``` and starting it at: ```text 0 ``` `i` is commonly short for **index** or **iterator**. You don't have to call it `i`, but you'll see it everywhere. --- ## 2️⃣ Condition ```javascript i < 5 ``` JavaScript checks this before each iteration. If it is: ```text true ✅ ``` the loop continues. If it becomes: ```text false ❌ ``` the loop stops. --- ## 3️⃣ Update ```javascript i++ ``` This runs after every iteration. It increases `i` by `1`. So our loop behaves like: ```text i = 0 → run i = 1 → run i = 2 → run i = 3 → run i = 4 → run i = 5 → stop ``` That's the entire idea behind a basic `for` loop. --- # Count From 1 to 5 🔢 If you want: ```text 1 2 3 4 5 ``` write: ```javascript for (let i = 1; i <= 5; i++) { console.log(i); } ``` Notice: ```javascript i <= 5 ``` instead of: ```javascript i < 5 ``` Because we want `5` included. --- # Counting Backwards ⏳ Loops don't have to count upward. ```javascript for (let i = 5; i >= 1; i--) { console.log(i); } console.log('🚀 Launch!'); ``` Output: ```text 5 4 3 2 1 🚀 Launch! ``` Here we use: ```javascript i-- ``` to decrease the number after each iteration. --- # Looping in Bigger Steps 🦘 You don't have to increase by exactly `1`. Example: ```javascript for (let i = 0; i <= 50; i += 10) { console.log(i); } ``` Output: ```text 0 10 20 30 40 50 ``` The update: ```javascript i += 10 ``` means: > Add 10 after every iteration. --- # Even Numbers Example ✨ We can combine loops with conditions. ```javascript for (let i = 1; i <= 10; i++) { if (i % 2 === 0) { console.log(i); } } ``` Output: ```text 2 4 6 8 10 ``` Remember: ```javascript i % 2 === 0 ``` checks whether the number is even. Now the concepts from previous chapters are starting to work together. 🔥 --- # Looping Through an Array 📦 Suppose we have: ```javascript const fruits = ['Apple', 'Banana', 'Mango']; ``` We can access each item using its index. ```javascript for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } ``` Output: ```text Apple Banana Mango ``` Don't worry about arrays deeply yet. There's a complete Arrays chapter later. For now, just notice how the loop moves through each item. --- # Why Do Arrays Usually Start at `0`? The first item is at index: ```text 0 ``` So: ```javascript fruits[0] ``` means: ```text Apple ``` Then: ```javascript fruits[1] ``` means: ```text Banana ``` That's why loops over arrays often start with: ```javascript let i = 0; ``` More on this in the Arrays chapter. --- # Nested Loops 🪆 A loop can exist inside another loop. Example: ```javascript for (let row = 1; row <= 3; row++) { for (let column = 1; column <= 3; column++) { console.log(`Row ${row}, Column ${column}`); } } ``` Output begins like: ```text Row 1, Column 1 Row 1, Column 2 Row 1, Column 3 Row 2, Column 1 ... ``` The inner loop completes all its iterations for every iteration of the outer loop. Think: ```text Outer loop ↓ Inner loop Inner loop Inner loop ↓ Outer loop again ``` Nested loops are useful for things like: * Tables * Grids * Matrices * Certain algorithms But be careful. Lots of nested loops can make code harder to understand and sometimes slower. --- # The `while` Loop 🔄 A `while` loop repeats code **while a condition remains truthy**. Syntax: ```javascript while (condition) { // repeated code } ``` Example: ```javascript let count = 1; while (count <= 5) { console.log(count); count++; } ``` Output: ```text 1 2 3 4 5 ``` --- # How `while` Works JavaScript checks: ```javascript count <= 5 ``` before each iteration. As long as it is true: ```text Run the code ↓ Check again ↓ Run again ``` Once it becomes false: ```text STOP 🛑 ``` --- # `for` vs `while` 🤔 Both can often solve the same problem. This: ```javascript for (let i = 1; i <= 5; i++) { console.log(i); } ``` could also be written: ```javascript let i = 1; while (i <= 5) { console.log(i); i++; } ``` Same result. So which one should you use? --- ## Use `for` When: You know how many iterations you need. Example: ```text Repeat 10 times ``` or: ```text Go through every item in this list ``` --- ## Use `while` When: The number of iterations depends on a condition. Conceptually: ```text Keep trying while user is not logged in Keep loading while more data exists Keep running while condition is true ``` The key difference is often **readability**, not capability. --- # Be Careful With Infinite Loops 🚨 Look at this: ```javascript let count = 1; while (count <= 5) { console.log(count); } ``` Spot the problem? `count` never changes. So: ```javascript count <= 5 ``` will always stay true. The loop keeps running forever. ```text 1 1 1 1 1 1 1 ... ``` This is called an: # Infinite Loop ♾️ Infinite loops can freeze your page or consume huge amounts of CPU. The correct version: ```javascript let count = 1; while (count <= 5) { console.log(count); count++; } ``` Always make sure your loop has a realistic way to stop. 🛑 --- # The `do...while` Loop 🔁 `do...while` is similar to `while`. But there's one major difference: > A `do...while` loop always runs its body at least once. Syntax: ```javascript do { // code } while (condition); ``` Example: ```javascript let count = 1; do { console.log(count); count++; } while (count <= 5); ``` Output: ```text 1 2 3 4 5 ``` Looks similar to `while`. But here's where the difference appears. --- # `while` May Run Zero Times Example: ```javascript let number = 10; while (number < 5) { console.log('Runs'); } ``` Nothing happens. The condition: ```javascript number < 5 ``` is already false. --- # `do...while` Runs Once Anyway 👀 ```javascript let number = 10; do { console.log('This runs once!'); } while (number < 5); ``` Output: ```text This runs once! ``` Why? Because `do...while` follows this order: ```text Run code ↓ Check condition ↓ Repeat if true ``` Whereas `while` follows: ```text Check condition ↓ Run code if true ``` --- # Easy Way to Remember 🧠 ```text while CHECK → RUN ``` ```text do...while RUN → CHECK ``` That's the main difference. --- # The `for...of` Loop ✨ Modern JavaScript gives us a cleaner way to loop through values in iterable collections. For example: ```javascript const colors = ['Red', 'Green', 'Blue']; ``` Instead of: ```javascript for (let i = 0; i < colors.length; i++) { console.log(colors[i]); } ``` we can write: ```javascript for (const color of colors) { console.log(color); } ``` Output: ```text Red Green Blue ``` Much cleaner. 😌 --- # How to Read `for...of` ```javascript for (const color of colors) ``` Read it like: > For each `color` inside `colors`... Then execute: ```javascript console.log(color); ``` Simple. --- # When Should You Use `for...of`? Use it when you care about the **values** rather than their numeric indexes. Example: ```javascript const languages = [ 'JavaScript', 'Python', 'Java' ]; for (const language of languages) { console.log(language); } ``` Output: ```text JavaScript Python Java ``` --- # `for...of` Works With Strings Too 🔤 Strings are iterable. So: ```javascript for (const character of 'Hello') { console.log(character); } ``` Output: ```text H e l l o ``` Pretty neat. 👀 --- # Getting the Index With `for...of` Sometimes you want both: ```text Index + Value ``` You can use: ```javascript .entries() ``` Example: ```javascript const colors = ['Red', 'Green', 'Blue']; for (const [index, color] of colors.entries()) { console.log(`${index}: ${color}`); } ``` Output: ```text 0: Red 1: Green 2: Blue ``` You don't need to deeply understand `.entries()` yet. We'll revisit these ideas in the Arrays chapter. --- # The `for...in` Loop 🔑 `for...in` works differently. Instead of giving you values, it gives you **property keys**. Example: ```javascript const user = { name: 'Alex', age: 25, city: 'Dubai' }; for (const key in user) { console.log(key); } ``` Output: ```text name age city ``` --- # Getting Object Values With `for...in` We can use the key to access its value: ```javascript const user = { name: 'Alex', age: 25, city: 'Dubai' }; for (const key in user) { console.log(`${key}: ${user[key]}`); } ``` Output: ```text name: Alex age: 25 city: Dubai ``` We'll cover object properties properly in the Objects chapter. For now, remember: ```text for...of → values for...in → keys ``` --- # Don't Use `for...in` as Your Default Array Loop 🚫 Technically, you can write: ```javascript const colors = ['Red', 'Green', 'Blue']; for (const index in colors) { console.log(colors[index]); } ``` But generally prefer: ```javascript for...of ``` or an appropriate array method when working with arrays. Why? Because `for...in` is designed around **enumerable property keys**, not array values. Simple rule: ```text Array / String → for...of ✅ Object keys → for...in ``` Later, you'll also learn methods such as: ```javascript Object.keys() Object.values() Object.entries() ``` which often provide cleaner ways to work with objects. --- # `break` — Stop the Loop Immediately 🛑 Sometimes you don't want a loop to finish every iteration. Suppose we're searching for the first number greater than `10`. ```javascript const numbers = [3, 5, 8, 14, 20]; for (const number of numbers) { if (number > 10) { console.log(`Found: ${number}`); break; } } ``` Output: ```text Found: 14 ``` Once JavaScript reaches: ```javascript break; ``` the loop stops completely. It never checks `20`. --- # How `break` Works Think: ```text Loop ↓ Loop ↓ Found what we need ↓ break 🛑 ↓ Exit loop ``` This is useful when continuing would just waste work. --- # `continue` — Skip This Iteration ⏭️ `continue` behaves differently. It doesn't end the whole loop. It only skips the [rest](/courses/expressjs) of the **current iteration**. Example: ```javascript for (let i = 1; i <= 5; i++) { if (i === 3) { continue; } console.log(i); } ``` Output: ```text 1 2 4 5 ``` `3` disappears. Why? When: ```javascript i === 3 ``` JavaScript reaches: ```javascript continue; ``` and jumps directly to the next iteration. --- # `break` vs `continue` 🧠 Easy rule: ```text break ↓ Stop the entire loop 🛑 ``` ```text continue ↓ Skip this iteration ⏭️ ``` Example: ```javascript const values = [2, -5, 7, -1, 10]; for (const value of values) { if (value < 0) { continue; } console.log(value); } ``` Output: ```text 2 7 10 ``` Negative values were skipped. --- # Nested Loops + `break` Suppose: ```javascript for (let row = 1; row <= 3; row++) { for (let column = 1; column <= 3; column++) { if (column === 2) { break; } console.log(row, column); } } ``` `break` exits only the **innermost loop**. So the outer loop continues. This is important. --- # Labeled Loops 🏷️ JavaScript also supports **labels** that can let `break` or `continue` target an outer loop. Example: ```javascript outerLoop: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (i === 1 && j === 1) { break outerLoop; } console.log(i, j); } } ``` Here: ```javascript break outerLoop; ``` exits both loops. You'll rarely need labeled loops in everyday web development. So for now: > Know that they exist, but don't make them your default approach. Cleaner code structures are usually easier to maintain. --- # Which Loop Should I Use? 🤔 Here's the beginner-friendly version: | Situation | Good Choice | | ----------------------------------- | ------------ | | Repeat known number of times | `for` | | Repeat while something remains true | `while` | | Must execute at least once | `do...while` | | Loop through values | `for...of` | | Loop through object keys | `for...in` | And remember: > Pick the loop that makes your intention easiest to understand. Readable code beats clever code. 🏆 --- # Real-World Example: Shopping Cart 🛒 Suppose: ```javascript const prices = [10, 25, 5, 20]; ``` We want the total. ```javascript let total = 0; for (const price of prices) { total += price; } console.log(total); ``` Output: ```text 60 ``` Let's follow what happens: ```text total = 0 + 10 → 10 + 25 → 35 + 5 → 40 + 20 → 60 ``` Loops let us process each value one by one. You'll see this pattern constantly as you learn arrays. --- # Real-World Example: Find the First Match 🔍 ```javascript const numbers = [3, 7, 12, 18, 25]; for (const number of numbers) { if (number > 10) { console.log(`First match: ${number}`); break; } } ``` Output: ```text First match: 12 ``` There was no reason to keep checking after finding the answer. So `break` saves unnecessary work. --- # 🧪 Mini Challenge Predict the output: ```javascript for (let i = 1; i <= 5; i++) { console.log(i * 2); } ``` Think before running it. 👀 ### Answer ```text 2 4 6 8 10 ``` Each iteration multiplies `i` by `2`. --- # 🧪 Challenge 2 What gets printed? ```javascript for (let i = 1; i <= 6; i++) { if (i === 4) { continue; } console.log(i); } ``` ### Answer ```text 1 2 3 5 6 ``` `4` gets skipped. --- # 🧪 Challenge 3 What happens here? ```javascript let count = 3; while (count > 0) { console.log(count); count--; } console.log('Done! 🚀'); ``` ### Answer ```text 3 2 1 Done! 🚀 ``` Once: ```javascript count > 0 ``` becomes false, the loop ends. --- # Common Loop Mistakes 🚨 ## 1. Forgetting to Update the Counter Bad: ```javascript let i = 0; while (i < 5) { console.log(i); } ``` Infinite loop. ♾️ Correct: ```javascript let i = 0; while (i < 5) { console.log(i); i++; } ``` --- ## 2. Wrong Boundary Suppose: ```javascript const colors = ['Red', 'Green', 'Blue']; ``` This is wrong: ```javascript for (let i = 0; i <= colors.length; i++) { console.log(colors[i]); } ``` Why? `colors.length` is: ```text 3 ``` but the indexes are: ```text 0 1 2 ``` So normally you'd use: ```javascript i < colors.length ``` Correct: ```javascript for (let i = 0; i < colors.length; i++) { console.log(colors[i]); } ``` This is one of the classic beginner bugs. 🐛 --- ## 3. Using the Wrong Loop If you only need array values: ```javascript for (const item of items) ``` is often easier to understand than manually managing an index. Don't choose a more complicated loop just because it looks more advanced. --- # 🧠 Quick Recap ## `for` Best when the iteration pattern is known. ```javascript for (let i = 0; i < 5; i++) { // repeat } ``` --- ## `while` Runs while the condition remains truthy. ```javascript while (condition) { // repeat } ``` --- ## `do...while` Runs at least once. ```javascript do { // repeat } while (condition); ``` --- ## `for...of` Loops over values. ```javascript for (const item of items) { console.log(item); } ``` --- ## `for...in` Loops over object keys. ```javascript for (const key in object) { console.log(key); } ``` --- ## `break` Stops the loop completely. ```javascript break; ``` --- ## `continue` Skips the current iteration. ```javascript continue; ``` --- The main idea: > **Loops let you repeat work without repeating code. 🔁** Once you understand that idea, the different loop syntaxes become much easier. --- # 🚀 What's Next? So far, you can: ```text Store data 📦 ↓ Build expressions ⚡ ↓ Make decisions 🔀 ↓ Repeat code 🔁 ``` Now there's one major problem. What if you write useful logic and want to reuse it again and again? You don't want to copy this: ```javascript const price = 100; const tax = price * 0.05; const finalPrice = price + tax; ``` everywhere in your application. You need a way to package reusable logic. That's exactly what comes next: # Functions in JavaScript 🧩 [Functions](/javascript/functions-in-javascript) are one of the most important concepts in the entire language. --- # Keep Learning With asif.to 🚀 Don't try to memorize every loop. Instead, ask: ```text What am I repeating? When should it stop? Do I need the index? Do I need the value? Can I stop early? ``` If you can answer those questions, choosing the right loop becomes much easier. At **asif.to**, the goal is: > **Understand → Practice → Build → Repeat. 🔁** 🌐 **asif.to** Follow **asif.to** on social media for: * ⚡ Quick JavaScript tips * 🧠 Beginner-friendly explanations * ⚛️ [React](/courses/reactjs) & [Next.js](/courses/nextjs) learning * 💻 Practical coding tutorials * 🎯 Interview preparation * 🚀 New developer resources **One concept at a time. One level higher every day. 🚀** ### See you in the Functions chapter 👋 ```javascript // for Loop // ─── Basic for loop ───────────────────────────────────── for (let i = 0; i < 5; i++) { console.log(`Iteration ${i}`); } // Iteration 0, 1, 2, 3, 4 // ─── Count down ────────────────────────────────────────── for (let i = 10; i >= 1; i--) { process.stdout.write(i + ' '); } console.log('🚀 Launch!'); // ─── Loop through array with index ────────────────────── const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']; for (let i = 0; i < fruits.length; i++) { console.log(`${i + 1}. ${fruits[i]}`); } // ─── Iterate in steps ─────────────────────────────────── for (let i = 0; i <= 100; i += 10) { console.log(i); // 0, 10, 20, ..., 100 } // ─── Nested loops — multiplication table ───────────────── for (let row = 1; row <= 5; row++) { let line = ''; for (let col = 1; col <= 5; col++) { line += `${(row * col).toString().padStart(3)}`; } console.log(line); } // 1 2 3 4 5 // 2 4 6 8 10 // 3 6 9 12 15 // ... // ─── Loop over string characters ──────────────────────── const word = 'JavaScript'; let vowelCount = 0; for (let i = 0; i < word.length; i++) { if ('aeiouAEIOU'.includes(word[i])) vowelCount++; } console.log(`'${word}' has ${vowelCount} vowels`); ``` ```javascript // while & do...while // ─── while loop ────────────────────────────────────────── let n = 1; while (n <= 10) { if (n % 2 !== 0) console.log(n); // odd numbers only n++; } // 1, 3, 5, 7, 9 // ─── while with unknown iterations ────────────────────── function toBinary(decimal) { if (decimal === 0) return '0'; let binary = ''; let num = Math.abs(decimal); while (num > 0) { binary = (num % 2) + binary; // prepend remainder num = Math.floor(num / 2); } return binary; } console.log(toBinary(10)); // '1010' console.log(toBinary(255)); // '11111111' // ─── Infinite loop with break ──────────────────────────── let input = 0; while (true) { input++; if (input === 5) break; // exits when input reaches 5 } console.log('Stopped at:', input); // 5 // ─── do...while — runs at least once ──────────────────── // Even if condition is false from the start let executed = false; do { console.log('This runs at least once'); executed = true; } while (false); // condition is false, but body already ran // ─── do...while practical: password retry ──────────────── const correctPassword = 'js2024'; let attempt = 0; let passwords = ['wrong', 'nope', 'js2024']; // simulated input let index = 0; do { const entered = passwords[index++]; attempt++; if (entered === correctPassword) { console.log(`Logged in on attempt ${attempt}`); break; } console.log('Wrong password, try again...'); } while (attempt < 3); ``` ```javascript // for...of and for...in // ─── for...of — iterate over iterable values ──────────── const colors = ['red', 'green', 'blue', 'purple']; for (const color of colors) { console.log(color.toUpperCase()); } // RED, GREEN, BLUE, PURPLE // for...of with index using .entries() for (const [index, color] of colors.entries()) { console.log(`${index}: ${color}`); } // for...of on a string for (const char of 'Hello') { console.log(char); } // H, e, l, l, o // for...of on a Map const scores = new Map([ ['Alice', 95], ['Bob', 87], ['Charlie', 92] ]); for (const [name, score] of scores) { console.log(`${name}: ${score}`); } // for...of on a Set const unique = new Set([1, 2, 3, 2, 1]); for (const val of unique) { console.log(val); // 1, 2, 3 (duplicates removed) } // ─── for...in — iterate over object keys ──────────────── const person = { name: 'Alice', age: 25, city: 'London', job: 'Developer' }; for (const key in person) { console.log(`${key}: ${person[key]}`); } // Check own properties vs inherited const child = Object.create(person); child.hobby = 'Reading'; for (const key in child) { if (Object.hasOwn(child, key)) { // only own properties console.log(key); // hobby } } ``` ```javascript // break, continue & Labeled Loops // ─── break — exit the loop ────────────────────────────── const numbers = [4, 8, 15, 16, 23, 42]; let found = -1; for (let i = 0; i < numbers.length; i++) { if (numbers[i] > 20) { found = numbers[i]; break; // stop searching } } console.log('First number > 20:', found); // 23 // ─── continue — skip current iteration ────────────────── const data = [1, -3, 5, -2, 8, -1, 4]; const positives = []; for (const num of data) { if (num < 0) continue; // skip negatives positives.push(num); } console.log(positives); // [1, 5, 8, 4] // ─── Labeled break — for nested loops ─────────────────── // Label marks a loop so break/continue can target it specifically outer: for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { if (i + j === 5) { console.log(`Breaking outer at i=${i}, j=${j}`); break outer; // exits BOTH loops } console.log(`i=${i}, j=${j}`); } } // ─── Labeled continue ──────────────────────────────────── outer: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (j === 1) continue outer; // skip to next i iteration console.log(`i=${i}, j=${j}`); } } // Only j=0 for each i (j=1 triggers continue outer) ```