DEV Community

Cover image for Embrace the beauty of map, filter and reduce
pardeepr08
pardeepr08

Posted on

Embrace the beauty of map, filter and reduce

It’s rare that you are not asked any questions related to these in your UI interviews. In this post, I am going to discuss the various aspects and importance of these methods and how they can create a shift in your coding style.

Since we work with arrays most often to collect related data together, many scenarios require operating on arrays, which includes transforming the array, applying filters, or deriving some data out of it.

These methods rescue us from doing so in many ways in a cleaner and concise way with no side effects involved.

Before we truly embrace the beauty of these methods, let’s first do these operations in a conventional way we were used to before these landed.

*Scenario *: Given an array having the radius of circles, derive two arrays: one having the circle area and the other having the circumference.

Formulas used:
PI value = 3.14
Area of a circle = PI * radius * radius
Circumference = 2 * PI * radius

Old school method using for loop:

// calculating circle area
const radius = [1, 2, 3, 4, 5];
const area = [];
for (let i = 0; i < radius.length; i++) {
  area.push(Math.PI * Math.pow(radius[i], 2));
}
Enter fullscreen mode Exit fullscreen mode
// calculating circle circumference
const circumference = [];
for (let i = 0; i < radius.length; i++) {
  circumference.push(2 * Math.PI * radius[i]);
}
Enter fullscreen mode Exit fullscreen mode

Using map:

const radius = [1, 2, 3, 4, 5];
const area = radius.map(r => Math.PI * r * r);
const circumference = radius.map(r => 2 * Math.PI * r);
Enter fullscreen mode Exit fullscreen mode

As you can observe, when using the for-loop approach, there is only one change in calculating area and circumference — that is the formula itself, and the iteration part is common and repeating.

That’s the essence of using map as it abstracts away the iteration part for you, and all you need to focus on is the transformation logic. So your many lines of code are squeezed into just two lines. Isn't it like a magic wand?

Summarizing the benefits of using map over its counterpart for-loop:

  • Highly readable and concise as it aligns well with functional programming.

  • Doesn’t mutate the original array but returns a new array with transformed values.

  • Inbuilt iteration capability; all I need to care about is passing my transformer function.

  • Supports chaining with other array methods like filter, reduce, etc.

Filter and reduce provide similar advantages as map, but these two cater to different use cases as below:

Filter: It iterates over the array elements and returns only those elements which pass the filter logic.

// Filter only even numbers from the given array
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(n => n % 2 === 0);
Enter fullscreen mode Exit fullscreen mode

Reduce: It can be used to derive some data from an array based on the logic passed.

// Calculate the sum of array elements
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num);
Enter fullscreen mode Exit fullscreen mode

Also created some related interview questions as youtube shorts on my channel. Please check if these helps you understand more.

https://youtube.com/shorts/-nb7UCukk1A?feature=share
https://youtube.com/shorts/EvBhdYyFlyc?feature=share

Top comments (3)

Collapse
 
adriens profile image
adriens

Nice post . Adding a picture for your post's cover would make it look sexier ;-p

Collapse
 
pardeepr08 profile image
pardeepr08

Thanks adriens for your comments

Collapse
 
adriens profile image
adriens

UR welcome ;-p