Map(), Filter(), Reduce() javascript array method

What Are These Methods?

map, filter, and reduce are methods that help you work with arrays in JavaScript. They are used to process and transform data in arrays without needing to write long for loops.

---

The map() Method

What does it do?

• The map() method creates a new array by applying a function to every element in the original array.
• It does not change the original array.

When to use it?

• Use map() when you want to transform every element in an array (e.g., doubling numbers, converting strings to uppercase).

Example:

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

// Double each number in the array
const doubled = numbers.map((num) => num * 2);

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

How it works:

1. The map() method loops through each element in the numbers array.
2. For each element, it applies the function (num) => num * 2.
3. It collects the results into a new array (doubled).

---

The filter() Method

What does it do?

• The filter() method creates a new array with only the elements that pass a certain condition.
• It does not change the original array.

When to use it?

• Use filter() when you want to select specific elements from an array (e.g., filtering even numbers, finding names that start with "A").

Example:

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

// Filter out only the even numbers
const evens = numbers.filter((num) => num % 2 === 0);

console.log(evens); // [2, 4]

How it works:

1. The filter() method loops through each element in the numbers array.
2. For each element, it checks the condition (num) => num % 2 === 0.
3. If the condition is true, it adds the element to the new array (evens).

---

The reduce() Method

What does it do?

• The reduce() method combines all the elements of an array into a single value.
• It does not change the original array.

When to use it?

• Use reduce() when you want to aggregate data (e.g., summing numbers, finding the maximum value).

Example:

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

// Sum all the numbers in the array
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 10

How it works:

1. The reduce() method takes two arguments:
   • A reducer function ((acc, num) => acc + num).
   • An initial value (0 in this case).
2. It loops through each element in the numbers array.
3. For each element, it updates the acc (accumulator) with the result of the reducer function.
4. At the end, it returns the final value of acc (sum in this case).

---

Key Differences Between map, filter, and reduce

Method	Input	Output	Purpose
map()	Array	New array	Transform each element
filter()	Array	New array	Select elements that meet a condition
reduce()	Array	Single value	Combine elements into one value

---

Combining These Methods

You can chain these methods together to perform complex operations on arrays.

Example:

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

// Step 1: Double each number (map)
// Step 2: Filter out numbers greater than 5 (filter)
// Step 3: Sum the remaining numbers (reduce)
const result = numbers
  .map((num) => num * 2) // [2, 4, 6, 8]
  .filter((num) => num > 5) // [6, 8]
  .reduce((acc, num) => acc + num, 0); // 14

console.log(result); // 14

---

Practice Time!

Let’s practice with a small exercise:

Problem:

You have an array of products:

const products = [
  { name: "Apple", price: 1.5 },
  { name: "Banana", price: 0.5 },
  { name: "Orange", price: 2 },
  { name: "Mango", price: 3 },
];

1. Use map() to create a new array with only the names of the products.
2. Use filter() to find products with a price greater than 1.
3. Use reduce() to calculate the total price of all products.

Solution:

// 1. Map to get product names
const productNames = products.map((product) => product.name);
console.log(productNames); // ["Apple", "Banana", "Orange", "Mango"]

// 2. Filter to find products with price > 1
const expensiveProducts = products.filter((product) => product.price > 1);
console.log(expensiveProducts);
// [{ name: "Apple", price: 1.5 }, { name: "Orange", price: 2 }, { name: "Mango", price: 3 }]

// 3. Reduce to calculate total price
const totalPrice = products.reduce((acc, product) => acc + product.price, 0);
console.log(totalPrice); // 7

---

Summary

• map(): Transform each element in an array.
• filter(): Select elements that meet a condition.
• reduce(): Combine elements into a single value.

More information about javascript array methods can be found in the React docs:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Leave comment if you have any questions or feedback.