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
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:
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:
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:
map-operator we can write the same like this:
The map operator accepts three values in the callback function, namely:
While this is a very easy example, there are some key improvements in our code readability when we use the
map, we don’t have to manage the state of our for-loop.
Mapreturns 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
Let’s say that we want array of only the animals which are small. Using a for-loop we would write something like this:
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.
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:
reduce-operator we can write the same like this:
The parameters in the callback function work a bit different than
filter. It works as follows:
o. This could be any value though.
Again we have all the readability improvements of the
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
After these easy examples you should have a better understanding of how
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.
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.