Loops and Array Iteration

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What is a Loop? Why do we use Loops? Different types of loops Array Iteration Methods When to use each method Interview questions What is a Loop? A loop is used to execute the same block of code multiple times. Simple Definition: A loop saves you from writing the same code repeatedly. Without Loop ❌ console . log( "Hello" ); console . log( "Hello" ); console . log( "Hello" ); console . log( "Hello" ); console . log( "Hello" ); With Loop ✅ for ( let i = 1 ; i <= 5 ; i ++ ) { console . log( "Hello" ); } Output Hello Hello Hello Hello Hello Real-Life Example 📦 Imagine you have 100 boxes . Without a loop, you'd check each one manually. With a loop, you tell the worker: "Check every box." That's exactly what a loop does. Types of Loops 1. for Loop Use when you know how many times you want to repeat. for ( let i = 1 ; i <= 5 ; i ++ ) { console . log( i ); } Output 1 2 3 4 5 2. while Loop Runs while a condition is true. let i = 1 ; while ( i <= 5 ) { console . log( i ); i ++ ; } Output 1 2 3 4 5 3. do...while Loop Runs at least once , even if the condition is false. let i = 6 ; do { console . log( i ); i ++ ; } while ( i <= 5 ); Output 6 4. for...of Loop Best for iterating over arrays. const fruits = [ "Apple" , "Banana" , "Mango" ]; for ( const fruit of fruits ) { console . log( fruit ); } Output Apple Banana Mango 5. for...in Loop Used to iterate over object properties . const user = { name: "Ajay" , age: 30 }; for ( const key in user ) { console . log( key , user [ key ]); } Output name Ajay age 30 ⚠️ Avoid using for...in for arrays because it iterates over property names (indexes), not values. Array Iteration Methods Instead of loops, JavaScript provides built-in methods to work with arrays. 1. forEach() Runs a function for each array element. const numbers = [ 1 , 2 , 3 ]; numbers . forEach( num => { console . log( num ); }); Output 1 2 3 📌 Use when: You only want to perform an action (e.g., logging, updating the UI). It does not return a new array. 2. map() Creates a new array by transforming each element. const numbers = [ 1 , 2 , 3 ]; const doubled = numbers . map( num => num * 2 ); console . log( doubled ); Output [2, 4, 6] 📌 Use when: You want to transform data and return a new array. 3. filter() Returns only the elements that match a condition. const numbers = [ 1 , 2 , 3 , 4 , 5 ]; const even = numbers . filter( num => num % 2 === 0 ); console . log( even ); Output [2, 4] 📌 Use when: You want to keep only certain items. 4. find() Returns the first matching element . const numbers = [ 5 , 10 , 15 , 20 ]; const result = numbers . find( num => num > 10 ); console . log( result ); Output 15 📌 Use when: You need the first matching item. 5. some() Checks if at least one element matches. const numbers = [ 1 , 3 , 5 , 8 ]; const hasEven = numbers . some( num => num % 2 === 0 ); console . log( hasEven ); Output true 6. every() Checks if all elements match. const numbers = [ 2 , 4 , 6 ]; const allEven = numbers . every( num => num % 2 === 0 ); console . log( allEven ); Output true 7. reduce() Combines all elements into a single value. const numbers = [ 1 , 2 , 3 , 4 ]; const sum = numbers . reduce(( total , num ) => total + num , 0 ); console . log( sum ); Output 10 📌 Use when: You want a single result (sum, total, grouped object, etc.). Loop vs Array Methods Loop/Method Best Use for Fixed number of iterations while Unknown number of iterations do...while Run at least once for...of Iterate array values for...in Iterate object keys forEach() Perform an action for each item map() Transform array filter() Filter items find() Find first matching item some() Check if at least one matches every() Check if all match reduce() Produce a single value Real-Life Example 🛒 Suppose you have product prices. const prices = [ 100 , 200 , 300 ]; Total Price const total = prices . reduce(( sum , price ) => sum + price , 0 ); console . log( total ); Output 600 Discounted Prices const discounted = prices . map( price => price * 0.9 ); console . log( discounted ); Output [90, 180, 270] Expensive Products const expensive = prices . filter( price => price > 150 ); console . log( expensive ); Output [200, 300] Interview Question What is the output? const numbers = [ 1 , 2 , 3 ]; const result = numbers . map( num => num * 2 ); console . log( result ); Output [2, 4, 6] Reason: map() creates and returns a new array . Key Points ✅ Loops repeat code multiple times. ✅ for is the most common loop. ✅ for...of is best for arrays. ✅ for...in is best for objects. ✅ map() transforms data. ✅ filter() removes unwanted items. ✅ find() returns the first matching item. ✅ reduce() combines array values into one result. 🧠 Easy Formula Need to repeat code? │ ▼ Loop Need to transform array? │ ▼ map() Need to filter items? │ ▼ filter() Need one value (sum, total)? │ ▼ reduce() Remember: Loops are for repeating code. Array iteration methods are for working with arrays in a cleaner, more readable way.