Why should you master the trio of map, filter, and reduce in JavaScript?

Why should you master the trio of map, filter, and reduce in JavaScript?

Daily short news for you
  • For a long time, I have been thinking about how to increase brand presence, as well as users for the blog. After much contemplation, it seems the only way is to share on social media or hope they seek it out, until...

    Wearing this shirt means no more worries about traffic jams, the more crowded it gets, the more fun it is because hundreds of eyes are watching 🤓

    (It really works, you know 🤭)

    » Read more
  • A cycle of developing many projects is quite interesting. Summarized in 3 steps: See something complex -> Simplify it -> Add features until it becomes complex again... -> Back to a new loop.

    Why is that? Let me give you 2 examples to illustrate.

    Markdown was created with the aim of producing a plain text format that is "easy to write, easy to read, and easy to convert into something like HTML." At that time, no one had the patience to sit and write while also adding formatting for how the text displayed on the web. Yet now, people are "stuffing" or creating variations based on markdown to add so many new formats that… they can’t even remember all the syntax.

    React is also an example. Since the time of PHP, there has been a desire to create something that clearly separates the user interface from the core logic processing of applications into two distinct parts for better readability and writing. The result is that UI/UX libraries have developed very robustly, providing excellent user interaction, while the application logic resides on a separate server. The duo of Front-end and Back-end emerged from this, with the indispensable REST API waiter. Yet now, React doesn’t look much different from PHP, leading to Vue, Svelte... all converging back to a single point.

    However, the loop is not bad; on the contrary, this loop is more about evolution than "regression." Sometimes, it creates something good from something old, and people rely on that goodness to continue the loop. In other words, it’s about distilling the essence little by little 😁

    » Read more
  • Alongside the official projects, I occasionally see "side" projects aimed at optimizing or improving the language in some aspects. For example, nature-lang/nature is a project focused on enhancing Go, introducing some changes to make using Go more user-friendly.

    Looking back, it resembles JavaScript quite a bit 😆

    » Read more

The Problem

Data stored in a database often needs to be normalized to reduce size and improve query speed. Therefore, after retrieving data, it often needs to undergo multiple data transformations before it can be further processed.

In frontend programming, especially in programming based on modern frameworks such as Angular, React, Vue, creating objects to store the state of the application requires even more data manipulation capabilities. This is because these states constantly change depending on the display logic and user interactions.

Such data is often stored in objects or arrays, which is why the trio of map, filter, and reduce were introduced since ES5 to help us manipulate array data in a much more useful way.

map, filter, and reduce

The map function iterates over an array and returns a new array with the same number of elements. The elements are returned through the return statement.

Example:

const arr = [1, 2, 3];
const arr2 = arr.map(function (item) {
  return item + 1;
});
// [2, 3, 4]

The filter function also iterates over an array and returns a new array with elements that satisfy a true/false condition.

Example:

const arr = [1, 2, 3];
const arr2 = arr.map(function (item) {
  return item > 1;
});
// [2, 3]

Reduce iterates over an array and performs calculations in the callback function.

Example:

const arr = [1, 2, 3];
const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

reduce is a more advanced function, so it has a higher level of difficulty to start with. However, you can quickly master them through a few examples at Reduce Syntax.

The full syntax of reduce is:

reduce((accumulator, currentValue, currentIndex, array) => {
    /* … */
}, initialValue)

Where accumulator is the accumulated value, the initial accumulated value is equal to initialValue, currentValue is the element in the array at the current iteration, currentIndex is the position of the element, and array is the original array. initialValue is the initial value.

The output of map and filter is always an array, so if you see them, the output must be something that can be iterated over. This is very important because it helps create consistency and seamless integration when combining multiple functions for processing.

const arr = [];
arr.map().filter().map()...  

You can use filter immediately after map without worrying that the result of map returns null, undefined, or anything that "cannot be iterated" over.

Some Use Cases

There are many cases where you need to use this trio. Use map when you need to add/modify or change properties in an array. Use filter when you need to filter data in an array. Finally, use reduce when you want to aggregate a result from an array.

In summary, when working with array data, always think of this trio first, and gradually you will learn to use them masterfully. This helps you write shorter code.

One typical use case I use them for is when processing data received from an API. The data received from an API is "raw" data, so it needs to go through a few more steps of processing before it becomes "clean" data that can be displayed on a web page. At that time, we can use map, filter, or reduce to add, remove, modify, or filter data in the array.

Another use case is when retrieving data from a database. This data is optimized for storage, so while processing the logic, you still need to add or modify a lot to get the standard data. A typical example for this case is reformatting the data returned to the client through the API.

The third case is data created to serve the purpose of processing logic. This type of data is created during the process of solving a specific problem. Data transformation can occur frequently during computation. Mastering map, filter, and reduce can help you solve these problems with less code.

In addition, there are many array functions that JavaScript provides when operating on arrays such as find, findIndex, indexOf, etc. These functions can be completely replaced by the trio of map, filter, and reduce. However, if possible, use them to increase transparency in the code.

Conclusion

The trio of map, filter, and reduce is a powerful tool when working with array data. Knowing how to use them appropriately helps you save time writing code and makes your code more concise.

Premium
Hello

5 profound lessons

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

View all

Subscribe to receive new article notifications

or
* The summary newsletter is sent every 1-2 weeks, cancel anytime.

Comments (0)

Leave a comment...