Understanding map, filter and reduce in Javascript

When working on Javascript projects you inevitably come across situations where you have to do some data manipulation. You can always use a for-loop to get the desired result, but for-loops can quickly become a bit messy and large. Most of the times it can be much easier to use the map, filter or reduce operator. Your code stays cleaner and is easier to read. At least, if you understand how they work and when you should use them.

The rule of thumb i use to determine which operator i should use is as follows:

• If i already have an array and i want to do the exact same operation on each of the elements in the array and return the same amount of items in the array, use the map.
• If i already have an array but i only want to have items in the array that match certain criteria, use the filter.
• If i already have an array, but i want to use the values in that array to create something completely new, use the reduce.

These rules might seem a little vague, so let’s dive into some examples. For our examples we use a small animals array that looks like this:

The map operator

Let’s say we want to have an array with just the names of all the animals. Using a for-loop we would write something like this:

Using the map-operator we can write the same like this:

The map operator accepts three values in the callback function, namely:

• The current item of the array
• The current index of the current item
• The entire array

While this is a very easy example, there are some key improvements in our code readability when we use the map:

1. Using the map, we don’t have to manage the state of our for-loop.
2. We don’t have to use the index of the for-loop to access the correct item in the array.
3. We don’t have to create a new array and push our values into it. Map returns the finished array in one go, so we can simply assign it to a variable.

There is very important thing which you may never forget when using the map. Use a return statement, otherwise your array will end up with all items as undefined.

The filter operator

Let’s say that we want array of only the animals which are small. Using a for-loop we would write something like this:

Using the filter-operator we can write the same like this:

The filter operator accepts the same parameters (current item, index and entire array) in the callback function. But since we don’t use the index and the entire array, i’ve left them out. The filter-operator also has the same other benefits as the map. We also have to use the return again to make the filter work properly. But this time we have to make sure that the return returns a boolean value. If you don’t do this the filter will always return false.

The reduce operator

Let’s say that we want to calculate the combined weight of all the animals in our array. Using a for-loop we can write something like this:

Using the reduce-operator we can write the same like this:

The parameters in the callback function work a bit different than map and filter. It works as follows:

• The first parameter is the current value of the end value. We have to set the initial value at the end of the function. In this case we set it to o. This could be any value though.
• The second parameter is the current item in the array.
• The third is the index again.
• The last is the full array.

Again we have all the readability improvements of the map and filter. We also need to use the return again. This time it’s important the we return the end value, the first parameter, at the end of each reduce function.

Conclusion

After these easy examples you should have a better understanding of how map, filter and reduce work. These operators will shine even more when your code or data get’s more complex. I would advice you to play with them if you don’t use them regularly already. It can really make your code much easier.

Looking for a job in Amsterdam?

I work for Sytac as a Senior front-end developer and we are looking for medior/senior developers that specialise in Angular, React, Java or Scala. Sytac is a very ambitious consultancy company in the Netherlands that works for a lot of renowned companies in banking, airline, government and retail sectors. You can think of companies like ING, KLM, Deloitte, Ahold Delhaize, ABN AMRO, Flora holland and many more.

From a personal opinion Sytac really sets itself apart with their client portfolio, but also with how they take care of their employees. They do really care about the wellbeing of their employees. Apart from a good salary (50K-75k), you will notice this in regular meetings with the consultant managers but also by the amount of events they organise and all the other perks they offer to keep all employees happy.

If you think you have what it takes to work with the best, send me an email on [email protected] and i’m happy to tell you more.