JavaScript Array Methods (JS-08)

Track: JavaScript Basics
Lesson: JS-08 / JS-10

🎯 Lesson Goal

By the end of this lesson, you will be able to use modern JavaScript array methods such as forEach, map, filter, and reduce to process data efficiently and write clean, professional code used in real-world applications.

---

📌 Prerequisites

• JS-01: Variables and Data Types
• JS-02: Operators and Expressions
• JS-03: Conditional Statements
• JS-04: Loops
• JS-05: Functions
• JS-06: Arrays
• JS-07: Objects

You should be comfortable with:

• Arrays
• Functions
• Objects

---

📘 Why Array Methods Are Important

Modern JavaScript avoids manual loops whenever possible.
Array methods:

• Make code shorter and cleaner
• Improve readability
• Are heavily used in React, Node, APIs, MERN
• Reduce bugs

If you know map, filter, and reduce, you are already thinking like a professional developer.

---

🔹 forEach() – Loop Through an Array

Executes a function for each element.

Syntax

array.forEach(function(item) {
  // code
});

Example

let numbers = [10, 20, 30];

numbers.forEach(function(num) {
  console.log(num);
});

✔ Used when you want to perform an action, not return data.

---

🔹 map() – Transform Data

Creates a new array by modifying each element.

Example

let numbers = [1, 2, 3, 4];

let squares = numbers.map(function(num) {
  return num * num;
});

console.log(squares);

✔ Output:

[1, 4, 9, 16]

---

map() with Arrow Function

let prices = [100, 200, 300];

let updatedPrices = prices.map(price => price + 50);

---

🔹 filter() – Select Data

Returns a new array containing elements that satisfy a condition.

Example

let marks = [35, 78, 90, 45, 60];

let passed = marks.filter(mark => mark >= 40);

console.log(passed);

✔ Output:

[78, 90, 45, 60]

---

🔹 reduce() – Combine Data (Very Important)

Used to reduce an array to a single value.

Syntax

array.reduce(function(accumulator, currentValue) {
  return updatedValue;
}, initialValue);

Example: Sum of numbers

let numbers = [10, 20, 30];

let total = numbers.reduce(function(sum, num) {
  return sum + num;
}, 0);

console.log(total);

✔ Output:

60

---

reduce() with Arrow Function

let total = numbers.reduce((sum, num) => sum + num, 0);

---

🔹 Real-World Example (Objects + Methods)

let students = [
  { name: "Aman", marks: 85 },
  { name: "Riya", marks: 92 },
  { name: "Karan", marks: 38 }
];

Get names of passed students

let passedNames = students
  .filter(student => student.marks >= 40)
  .map(student => student.name);

console.log(passedNames);

✔ This method chaining is very common in React & MERN.

---

🔹 find() – Find One Element

Returns the first matching element.

let topper = students.find(student => student.marks > 90);
console.log(topper);

---

🔹 some() and every()

some() – checks if any element satisfies condition

let hasFail = students.some(student => student.marks < 40);

every() – checks if all elements satisfy condition

let allPassed = students.every(student => student.marks >= 40);

---

⚠️ Common Mistakes

• Expecting forEach() to return a value
• Forgetting return inside map() or reduce()
• Modifying original array unintentionally
• Confusing map() with filter()

---

🧠 Practice Tasks

1. Use map() to double all numbers in an array
2. Use filter() to get even numbers
3. Use reduce() to calculate total marks
4. Use find() to get a specific object
5. Chain filter() and map() together

---

🧪 Mini Coding Challenge

let orders = [
  { id: 1, amount: 1200 },
  { id: 2, amount: 450 },
  { id: 3, amount: 800 }
];

Tasks:

• Get orders above 500
• Extract their amounts
• Calculate total amount using reduce()

---

📝 Summary

• forEach() → perform action
• map() → transform data
• filter() → select data
• reduce() → combine data
• Method chaining is powerful and professional

---

➡️ Next Lesson

JavaScript DOM Manipulation (JS-09)
(Connecting JavaScript with HTML)

---

🏅 Quiz & Badge

Quiz and badges will be enabled soon.