Map, Filter and Reduce in TypeScript with Examples

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!