Array Iteration Methods

🚀 Array Iteration Methods: Your Magic Toolbox for Lists

The Story of the Helpful Robots 🤖

Imagine you have a toy box full of toys. Now imagine you have 5 special robot helpers, each with a unique superpower to help you with your toys!

• forEach Robot → Looks at each toy one by one
• map Robot → Changes each toy into something new
• filter Robot → Picks only the toys you want
• reduce Robot → Combines all toys into one thing
• every/some Robots → Checks if toys meet your rules

Let’s meet each robot!

🔄 The forEach Method

What is it?

The forEach robot walks through your toy box and does something with each toy. It doesn’t give anything back—it just does the job.

Think of it like this:

You ask your friend: “Please say ‘hello’ to each guest at my party.”

Your friend goes to each guest, says hello, and that’s it. No report back!

Simple Example:

const fruits = ["apple", "banana", "cherry"];

fruits.forEach(function(fruit) {
  console.log("I love " + fruit + "!");
});

// Output:
// I love apple!
// I love banana!
// I love cherry!

Real-Life Uses:

• Print each item in a shopping list
• Send a message to each friend
• Add a click event to each button

💡 Key Point:

forEach returns nothing (undefined). It just does things!

🎨 The map Method

What is it?

The map robot takes each item and transforms it into something new. It gives you back a brand new list!

Think of it like this:

You have 3 plain cupcakes. You ask your friend: “Please put frosting on each cupcake.”

Your friend gives you back 3 frosted cupcakes. New cupcakes!

Simple Example:

const numbers = [1, 2, 3];

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);
// Output: [2, 4, 6]

Another Example:

const names = ["ali", "bob", "cat"];

const shoutingNames = names.map(function(name) {
  return name.toUpperCase();
});

console.log(shoutingNames);
// Output: ["ALI", "BOB", "CAT"]

💡 Key Point:

map always returns a new array with the same length!

🎯 The filter Method

What is it?

The filter robot is like a picky eater. It only keeps items that pass your test!

Think of it like this:

You have a box of red, blue, and green balls. You say: “I only want red balls.”

The filter robot gives you a new box with only red balls!

Simple Example:

const ages = [5, 12, 17, 21, 30];

const adults = ages.filter(function(age) {
  return age >= 18;
});

console.log(adults);
// Output: [21, 30]

Another Example:

const words = ["cat", "elephant", "dog", "butterfly"];

const longWords = words.filter(function(word) {
  return word.length > 4;
});

console.log(longWords);
// Output: ["elephant", "butterfly"]

💡 Key Point:

filter returns a new array that might be shorter or even empty!

🧮 The reduce Method

What is it?

The reduce robot is the ultimate combiner. It takes all your items and squishes them into ONE single value!

Think of it like this:

You have 5 coins: 1¢, 2¢, 3¢, 4¢, 5¢. You want to know the total.

The reduce robot adds them up: 1+2+3+4+5 = 15¢!

Simple Example:

const coins = [1, 2, 3, 4, 5];

const total = coins.reduce(function(sum, coin) {
  return sum + coin;
}, 0);

console.log(total);
// Output: 15

Breaking it down:

Start with sum = 0
Step 1: sum = 0 + 1 = 1
Step 2: sum = 1 + 2 = 3
Step 3: sum = 3 + 3 = 6
Step 4: sum = 6 + 4 = 10
Step 5: sum = 10 + 5 = 15 ✓

Another Example - Finding the biggest:

const scores = [45, 92, 38, 67];

const highest = scores.reduce(function(max, score) {
  return score > max ? score : max;
}, 0);

console.log(highest);
// Output: 92

💡 Key Point:

reduce turns an array into any single value: number, string, object, or even another array!

🔙 The reduceRight Method

What is it?

Same as reduce, but starts from the END of the array!

Think of it like this:

Instead of reading a book from page 1 to 100, you read from page 100 to 1!

Simple Example:

const letters = ["a", "b", "c", "d"];

const backward = letters.reduceRight(function(result, letter) {
  return result + letter;
}, "");

console.log(backward);
// Output: "dcba"

When to use it?

• Building strings backwards
• Processing nested data right-to-left
• Math operations where order matters

✅ The every Method

What is it?

The every robot is a strict inspector. It checks if ALL items pass your test!

Think of it like this:

A teacher asks: “Did EVERYONE finish their homework?”

• If ALL students finished → true ✓
• If even ONE student didn’t → false ✗

Simple Example:

const ages = [25, 30, 19, 42];

const allAdults = ages.every(function(age) {
  return age >= 18;
});

console.log(allAdults);
// Output: true (everyone is 18+)

Another Example:

const scores = [85, 92, 45, 78];

const allPassed = scores.every(function(score) {
  return score >= 60;
});

console.log(allPassed);
// Output: false (45 is below 60)

💡 Key Point:

every returns true only if ALL items pass the test!

🔍 The some Method

What is it?

The some robot is the hopeful finder. It checks if AT LEAST ONE item passes your test!

Think of it like this:

You ask: “Does anyone have a blue pen?”

• If at least ONE person has it → true ✓
• If NO ONE has it → false ✗

Simple Example:

const numbers = [1, 3, 5, 8, 9];

const hasEven = numbers.some(function(num) {
  return num % 2 === 0;
});

console.log(hasEven);
// Output: true (8 is even!)

Another Example:

const fruits = ["apple", "banana", "cherry"];

const hasMango = fruits.some(function(fruit) {
  return fruit === "mango";
});

console.log(hasMango);
// Output: false (no mango here!)

💡 Key Point:

some returns true if at least ONE item passes!

🎭 Quick Comparison

graph TD
    A["Array Methods"] --> B["forEach"]
    A --> C["map"]
    A --> D["filter"]
    A --> E["reduce/reduceRight"]
    A --> F["every/some"]

    B --> B1["Does action<br/>Returns nothing"]
    C --> C1["Transforms items<br/>Returns new array"]
    D --> D1["Picks items<br/>Returns shorter array"]
    E --> E1["Combines items<br/>Returns single value"]
    F --> F1["Checks items<br/>Returns true/false"]

🎪 Using Arrow Functions (Shorter Way!)

Modern JavaScript lets you write these methods more cleanly:

const nums = [1, 2, 3, 4, 5];

// forEach
nums.forEach(n => console.log(n));

// map
const doubled = nums.map(n => n * 2);

// filter
const big = nums.filter(n => n > 2);

// reduce
const sum = nums.reduce((a, b) => a + b, 0);

// every & some
const allPositive = nums.every(n => n > 0);
const hasThree = nums.some(n => n === 3);

🏆 You Did It!

Now you know all 5 robot helpers:

Remember: These robots never change your original array—they’re always helpful and non-destructive! 🎉