Looping and Iterating Over Arrays in JavaScript

Arrays are one of the most important parts of JavaScript. Often, we need to loop through arrays and perform some action — like doubling numbers, filtering values, or adding everything together.

JavaScript gives us some very useful methods:

• forEach()

• map()

• filter()

• reduce()

Let’s understand each one in detail with real-life examples.

---

1. forEach()

👉 forEach() is used to loop through an array and perform an action on each element.
👉 It does not return anything, it just runs the function for each item.

Syntax

array.forEach(item => {
   // action
});

Real-Life Examples

let numbers = [10, 20, 30, 40];

1. Print all numbers

numbers.forEach(num => console.log(num));

2. Print each number doubled

numbers.forEach(num => console.log(num * 2));

3. Say hello to each student

let students = ["Aman", "Riya", "Payal"];
students.forEach(name => console.log("Hello " + name));

4. Show prices with “Rs.” before them

let prices = [50, 100, 150];
prices.forEach(price => console.log("Rs." + price));

---

2. map()

👉 map() is used when you want to create a new array after applying some change/transformation to each element.
👉 It always returns a new array.

Syntax

let newArray = array.map(item => {
   return item * 2; // example transformation
});

Real-Life Examples

let numbers = [10, 20, 30, 40];

1. Double all numbers

let doubled = numbers.map(num => num * 2);
console.log(doubled); // [20, 40, 60, 80]

2. Convert temperatures (C to F)

let celsius = [0, 10, 20];
let fahrenheit = celsius.map(c => (c * 9/5) + 32);
console.log(fahrenheit); // [32, 50, 68]

3. Get name lengths

let names = ["Aman", "Riya", "Payal"];
let lengths = names.map(name => name.length);
console.log(lengths); // [4, 4, 5]

4. Add “Student: ” before names

let students = ["Aman", "Riya"];
let studentList = students.map(name => "Student: " + name);
console.log(studentList); // ["Student: Aman", "Student: Riya"]

---

3. filter()

👉 filter() is used to select specific elements from an array based on a condition.
👉 It always returns a new smaller array with only the matching values.

Syntax

let newArray = array.filter(item => condition);

Real-Life Examples

let numbers = [10, 20, 30, 40];

1. Numbers greater than 20

let filtered = numbers.filter(num => num > 20);
console.log(filtered); // [30, 40]

2. Even numbers only

let even = numbers.filter(num => num % 2 === 0);
console.log(even); // [10, 20, 30, 40]

3. Names longer than 3 letters

let names = ["Al", "Riya", "Aman", "Jo"];
let longNames = names.filter(name => name.length > 3);
console.log(longNames); // ["Riya", "Aman"]

4. Prices less than 100

let prices = [50, 150, 200, 80];
let cheap = prices.filter(price => price < 100);
console.log(cheap); // [50, 80]

---

4. reduce()

👉 reduce() is used when you want to combine all elements of an array into a single value (like sum, product, average, etc.).
👉 It takes two things:

• accumulator (the running total)

• current item

Syntax

let result = array.reduce((acc, item) => acc + item, 0);

Real-Life Examples

let numbers = [10, 20, 30, 40];

1. Find the sum of numbers

let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 100

2. Find the product of numbers

let product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product); // 240000

3. Find the biggest number

let max = numbers.reduce((acc, num) => acc > num ? acc : num);
console.log(max); // 40

4. Count total letters in names

let names = ["Aman", "Riya"];
let totalLetters = names.reduce((acc, name) => acc + name.length, 0);
console.log(totalLetters); // 8

---

📊 Comparison Table

---

✅ Key Points for Students

• Use forEach() if you only want to do something with each item (no return).

• Use map() if you want a new transformed array.

• Use filter() if you want a smaller selected array.

• Use reduce() if you want to combine everything into one value.

---

🍕 Funny Real-Life Analogies for Array Methods

1. forEach() → “Visiting Friends to Say Hi”

👉 Imagine you are visiting your 4 friends’ houses one by one. You just say “Hi” and move on. You don’t bring anything back.

friends.forEach(friend => console.log("Hi " + friend));

• You meet everyone ✅

• You don’t get anything in return ❌

⚡ Analogy: Like delivery boy knocking at each house to say “Pizza is here!” but not taking anything back.

---

2. map() → “Transform Everyone”

👉 Imagine you give each friend a hat. Now you come back with a new list of friends-with-hats.

let hats = friends.map(friend => friend + " 🎩");
console.log(hats);

• Same number of friends ✅

• Everyone looks different because of the hat 🎩

⚡ Analogy: Like in cricket – all players wear jersey numbers. Same 11 players, but new “transformed” version with jerseys.

---

3. filter() → “Only Keep Special Ones”

👉 Imagine you invite all friends for pizza, but only those who like cheese pizza actually come.
So you get a smaller group.

let cheeseLovers = friends.filter(friend => friend.likesCheese);

• Some friends are removed ❌

• Only matching ones stay ✅

⚡ Analogy: Like in shopping mall – filter jeans under ₹1000. Only the affordable ones remain in your list.

---

4. reduce() → “Everything Becomes One”

👉 Imagine you and your friends order pizzas 🍕🍕🍕🍕. At the end, you add all pizza slices together to see total slices.

let totalSlices = pizzas.reduce((acc, slices) => acc + slices, 0);

• Many items → One final result ✅

⚡ Analogy: Like in cricket – all players score runs individually, but the team’s total score is found using reduce().

---

🎯 Super Funny Recap Table

---

👉 This way, students can visualize pizza delivery / shopping / cricket and instantly connect with these methods.

---

🔔 Stay Connected

If you found this article helpful and want to receive more such beginner-friendly and industry-relevant Javascript notes, tutorials, and project ideas — 📩 Subscribe to our newsletter by entering your email below.

And if you're someone who wants to prepare for tech interviews while having a little fun and entertainment, 🎥 Don’t forget to subscribe to my YouTube channel – Knowledge Factory 22 – for regular content on tech concepts, career tips, and coding insights!

Stay curious. Keep building. 🚀