When working on projects you inevitably come across situations where you have to do some data manipulation. You can always use a to get the desired result, but can quickly become a bit messy and large. Most of the times it can be much easier to use the , or operator. Your code stays cleaner and is easier to read. At least, if you understand how they work and when you should use them. Javascript for-loop for-loops map filter reduce 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 we would write something like this: for-loop Using the we can write the same like this: map-operator The operator accepts three values in the callback function, namely: map 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 Using the , we don’t have to manage the state of our for-loop. map We don’t have to use the index of the for-loop to access the correct item in the array. We don’t have to create a new array and push our values into it. returns the finished array in one go, so we can simply assign it to a variable. Map There is very important thing which you may never forget when using the map. Use a statement, otherwise your array will end up with all items as . return 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 we can write the same like this: filter-operator 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 also has the same other benefits as the . We also have to use the again to make the work properly. But this time we have to make sure that the returns a boolean value. If you don’t do this the filter will always return false. filter-operator map return filter return The reduce operator Let’s say that we want to calculate the combined weight of all the animals in our array. Using a we can write something like this: for-loop Using the we can write the same like this: reduce-operator The parameters in the callback function work a bit different than and . It works as follows: map filter 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 . This could be any value though. o 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 and . We also need to use the again. This time it’s important the we return the end value, the first parameter, at the end of each function. map filter return reduce Conclusion After these easy examples you should have a better understanding of how , and 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. map filter reduce Looking for a job in Amsterdam? I work for 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. Sytac 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 and i’m happy to tell you more. luuk.gruijs@sytac.io

Too Long; Didn't Read

Making security fun one episode at a time

Understanding map, filter and reduce in Javascript

Too Long; Didn't Read

Luuk Gruijs

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Understanding map, filter and reduce in Javascript

Too Long; Didn't Read

Luuk Gruijs

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES