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));
}

// calculating circle circumference
const circumference = [];
for (let i = 0; i < radius.length; i++) {
  circumference.push(2 * Math.PI * radius[i]);
}

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);

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);

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);

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

Comments

[adriens]

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

[pardeepr08]

Thanks adriens for your comments

[adriens]

UR welcome ;-p