222 - Map, filter, and reduce (Javascript)

Functional Programming in JavaScript

Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data. JavaScript, as a versatile language, allows you to embrace functional programming principles, and three essential higher-order functions for this paradigm are map, filter, and reduce.

The Power of Map

The map function is a higher-order function that takes an array, applies a given function to each of its elements, and returns a new array with the results. It’s an excellent tool for transforming data without modifying the original array.


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

const doubledNumbers = numbers.map((num) => num * 2);

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

Filtering with Filter

The filter function is another higher-order function that creates a new array by filtering elements from an existing array based on a provided condition.


const scores = [75, 80, 92, 64, 88];

const highScores = scores.filter((score) => score >= 80);

console.log(highScores); // [80, 92, 88]

Reducing with Reduce

The reduce function accumulates values from an array into a single result. It takes a function that defines how to combine elements.


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

const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // 15

Functional Programming Benefits

These functions provide several benefits when applied in your JavaScript code:

Abstraction: They allow you to abstract common patterns and operations, making your code more concise and readable.
Reusability: Map, filter, and reduce enable you to reuse and compose functions, reducing duplication and promoting modularity.
Flexibility: You can customize behavior by passing different functions as arguments.
Functional Composition: Compose multiple functions to create more complex behaviors.
Declarative Code: These functions lead to more declarative code that describes “what” needs to be done rather than “how” it should be done.

Combining Map, Filter, and Reduce

One of the powerful aspects of these functions is that you can use them together to solve complex problems. For example, let’s say you have an array of numbers, and you want to calculate the sum of the squares of all even numbers:


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

const sumOfSquaresOfEvens = numbers
  .filter((num) => num % 2 === 0)  // Filter even numbers
  .map((num) => num ** 2)         // Square each number
  .reduce((sum, square) => sum + square, 0);  // Sum the squares

console.log(sumOfSquaresOfEvens); // 120

Conclusion

Map, filter, and reduce are fundamental tools in functional programming, enabling you to write cleaner, more efficient, and more maintainable JavaScript code. By understanding and effectively using these functions, you can tackle a wide range of data manipulation tasks with elegance and clarity.

222 – Map, filter, and reduce (Javascript)