JS 7

Excellent. This is one of the most important chapters in the entire course.

If you master these methods, you'll write JavaScript like a professional developer.

These methods are used daily in React, Node.js, and frontend interviews.

---

Chapter 7 — Array Methods (map, filter, find, some, every)

🎯 Goal (1 line)

Learn how to transform, search, and filter arrays without writing loops manually.

---

Before We Start

Suppose we have:

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

Instead of writing:

for (const number of numbers) {
  // do something
}

Modern JavaScript gives us built-in methods.

Think of them like special tools:

Tool	What it does
map()	Transform every item
filter()	Keep only matching items
find()	Find the first matching item
some()	Is at least one item a match?
every()	Do all items match?

These five methods cover 80% of real-world array work.

---

1. map() — Transform Every Item

Suppose you want to double every number.

const numbers = [1, 2, 3];

const doubled = numbers.map(number => number * 2);

console.log(doubled);

Output

[2, 4, 6]

New Syntax

number => number * 2

This is an arrow function.

It's a shorter way of writing:

function (number) {
  return number * 2;
}

Don't worry—you'll get comfortable with it quickly.

---

2. filter() — Keep Matching Items

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

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

Output

[2, 4]

Think:

Keep only items that match.

---

3. find() — Find the First Match

const users = [
  { name: "Alice" },
  { name: "Bob" },
  { name: "Charlie" }
];

const user = users.find(user => user.name === "Bob");

console.log(user);

Output

{ name: "Bob" }

It returns only the first match.

---

4. some()

Returns true if at least one item matches.

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

const hasEven = numbers.some(number => number % 2 === 0);

console.log(hasEven);

Output

true

---

5. every()

Returns true only if all items match.

const numbers = [2, 4, 6];

const allEven = numbers.every(number => number % 2 === 0);

console.log(allEven);

Output

true

---

MCQs

---

Q1

Which method transforms every item?

A. filter()

B. find()

C. map()

D. some()

✅ Answer

C

---

Q2

Output?

const nums = [1, 2, 3];

const result = nums.map(n => n + 1);

console.log(result);

A.

[1,2,3]

B.

[2,3,4]

C.

[3,4,5]

D. Error

✅ Answer

B

---

Q3

Which method removes unwanted items?

A. map()

B. filter()

C. every()

D. some()

✅ Answer

B

---

Q4

Output?

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

const result = nums.filter(n => n > 2);

console.log(result);

A.

[1,2]

B.

[3,4]

C.

[4]

D.

[2,3]

✅ Answer

B

---

Q5

What does find() return?

A. All matching items

B. The first matching item

C. A number

D. Nothing

✅ Answer

B

---

Q6

Output?

const users = [
  { name: "Tom" },
  { name: "Emma" }
];

const user = users.find(u => u.name === "Emma");

console.log(user.name);

A.

Tom

B.

Emma

C.

undefined

D. Error

✅ Answer

B

---

Q7

Which method answers:

"Does at least one item match?"

A. every()

B. some()

C. map()

D. find()

✅ Answer

B

---

Q8

Output?

const nums = [1,3,5];

console.log(
  nums.some(n => n % 2 === 0)
);

A. true

B. false

C. undefined

D. Error

✅ Answer

B

There are no even numbers.

---

Q9

Output?

const nums = [2,4,6];

console.log(
  nums.every(n => n % 2 === 0)
);

A. true

B. false

C. undefined

D. Error

✅ Answer

A

Every number is even.

---

Q10

Output?

const nums = [2,4,5];

console.log(
  nums.every(n => n % 2 === 0)
);

A. true

B. false

C. 5

D. Error

✅ Answer

B

5 is odd.

---

Q11

Which is better?

A.

for (...) {
   ...
}

B.

numbers.map(...)

(When transforming every item.)

✅ Answer

B

map() is shorter and more readable.

---

Q12

Output?

const prices = [100,200];

const result = prices.map(price => price * 2);

console.log(result);

A.

[100,200]

B.

[200,400]

C.

[300]

D. Error

✅ Answer

B

---

Q13

Output?

const nums = [5,10,15];

const result = nums.find(n => n > 8);

console.log(result);

A. 5

B. 10

C. 15

D. undefined

✅ Answer

B

find() stops at the first match.

---

Q14

Output?

const nums = [1,2,3];

const result = nums.filter(n => n < 3);

console.log(result.length);

A. 1

B. 2

C. 3

D. 0

✅ Answer

B

The filtered array is [1, 2].

---

Q15 (Hardest)

Predict the output.

const products = [
  { price: 100 },
  { price: 200 },
  { price: 300 }
];

const result = products
  .filter(product => product.price >= 200)
  .map(product => product.price);

console.log(result);

A.

[100,200,300]

B.

[200,300]

C.

[100]

D. Error

✅ Answer

B

Step 1:

filter()

[
 {price:200},
 {price:300}
]

Step 2:

map()

[200,300]

---

Mini Coding Challenge

const names = ["alice", "bob", "charlie"];

const upper = names.map(name => name.toUpperCase());

console.log(upper);

✅ Solution

Output

["ALICE","BOB","CHARLIE"]

---

Mini Project — Product Filter

const products = [
  { name: "Laptop", price: 70000 },
  { name: "Mouse", price: 500 },
  { name: "Keyboard", price: 2000 },
  { name: "Monitor", price: 15000 }
];

const expensiveProducts = products.filter(
  product => product.price >= 5000
);

console.log(expensiveProducts);

✅ Output

[
  { name: "Laptop", price: 70000 },
  { name: "Monitor", price: 15000 }
]

---

🚨 Common Beginner Mistakes

❌ Using map() when you want filter()

Wrong:

numbers.map(n => n > 5);

Output:

[false, false, true, true]

This transforms each item into true or false.

Correct:

numbers.filter(n => n > 5);

---

❌ Expecting find() to return multiple items

find()

Returns one item (or undefined if none match).

Use:

filter()

if you want all matches.

---

🧠 The 80/20 Cheat Sheet

// Transform
array.map(item => ...)

// Keep matching items
array.filter(item => ...)

// Find first match
array.find(item => ...)

// Any match?
array.some(item => ...)

// All match?
array.every(item => ...)

If you become comfortable with these five methods, you'll recognize them in a huge portion of React codebases and coding interviews.

---

📌 Next Chapter

Chapter 8 — Strings

You'll learn the string methods you'll use constantly:

• includes()

• slice()

• split()

• trim()

• replace()

• toUpperCase()

• toLowerCase()

These are essential for handling user input, search features, form validation, and text processing in real-world applications.