Hi Everyone,
If you work with arrays in TypeScript (or JavaScript), you'll run into map, filter, and reduce pretty often. These methods make it easy to manipulate data without writing messy loops. But knowing when and how to use them will take your coding game to the next level!
Let’s break down these methods step-by-step with examples and see when each one is useful.
What are map, filter, and reduce?
These three are array methods that allow you to,
- Transform data with a map
- Filter out unwanted elements with a filter
- Crunch down an array into a single value using a reduce
They’re all about functional programming—writing clean, readable code by working with immutable data (meaning they don’t change the original array).
Map - Transform Your Data
The map method creates a new array by applying a function to every element of the original array.
When to use a map?
Use a map when you want to transform each element of an array and return a new array with the transformed values.
Example. Doubling numbers in an array.
const numbers: number[] = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]
What happened? We took each number in the original numbers array and doubled it. map returned a new array: [2, 4, 6, 8].
Filter. Keep Only What You Need
The filter method creates a new array with only the elements that pass a certain condition.
When to use a filter?
Use a filter when you need to remove elements that don’t match a given condition.
Example. Finding even numbers.
const numbers: number[] = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
What happened? We used a filter to keep only the even numbers. The result is a new array [2, 4].
Reduce - Crunch Data Into a Single Value
The reduce method reduces an array to a single value by accumulating results over time.
When to use reduce?
Use reduce when you need to accumulate values (like summing up numbers) or transform an array into something else (like an object).
Example. Summing all numbers.
const numbers: number[] = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // Output: 10
What happened?
- We started with total = 0 (the initial value).
- Then, we added each element of the array to the total.
- The final result is 10.
When should we use map, filter, or reduce?
| Method |
Use It When |
| map |
You want to transform every element in an array (e.g., double numbers, format strings). |
| filter |
You need to remove certain elements (e.g., filter even numbers and remove null values). |
| reduce |
You want to aggregate or summarize the data (e.g., sum values, calculate averages). |
How do you Combine map, filter, and reduce for Complex Tasks?
You can chain these methods together to solve more complex problems. Let’s say you have a list of numbers, and you need to:
- Filter the even numbers
- Square them
- Find the sum of those squares
Here’s how you can do it.
Example. The sum of squares of even numbers.
const numbers: number[] = [1, 2, 3, 4, 5, 6];
const sumOfSquares = numbers
.filter(num => num % 2 === 0) // Step 1: Keep even numbers
.map(num => num * num) // Step 2: Square them
.reduce((total, square) => total + square, 0); // Step 3: Sum the squares
console.log(sumOfSquares); // Output: 56 (2² + 4² + 6²)
What happened?
- We filtered out only the even numbers [2, 4, 6].
- We squared them to get [4, 16, 36].
- Finally, we added the squares together to get 56.
Conclusion
The map, filter, and reduce methods are fundamental tools for working with arrays in TypeScript. They allow you to write clean, efficient, and maintainable code by focusing on what needs to be done rather than how. These methods promote a functional approach to programming, making code easier to read and debug.
- The map helps transform elements in an array.
- filter removes unwanted elements based on conditions.
- reduce condenses an array into a single value, perfect for summarizing data.
Once you master these tools, you’ll find yourself relying less on traditional loops and more on functional programming techniques, which will greatly enhance your productivity.
Happy coding!