Map, Filter & Reduce in JavaScript

Map

Here is an example of an array of objects I have created which contains a few of my favourite movies (Don’t judge me!), each with their movie name and the name of the actresses/actors who starred in them.

var favouriteMovies = [
{'name':'aliens','mainStar':'Sigourney Weaver'},
{'name':'Predator','mainStar':'Arnold Schwarzenneger'},
{'name':'Godzilla','mainStar':'Bryan Cranston'},
{'name':'Blade','mainStar':'Wesley Snipes'},
{'name':'Prometheus','mainStar':'Noomi Rapace'}
]

For this example I will just be extracting the movie name from the object of arrays using map and to do this is seen below.

var movieName = favouriteMovies.map(function(currItem){return currItem.name});

As you can see I have created a variable called “movieName” and set it to equal to “map” over the “favouriteMovies” array with one parameter defined (the mandatory parameter which represents the current item in the array) and I am returning the key “name” from the “favouriteMovies” array, copy and paste both the map function and object of arrays into a code editor such as https://playcode.io and look at the result, or create your own :).

Below is the result from the console.

Image for post
Image for post

However you can write your own function and insert it into the parameter of the map function as seen below.

Image for post
Image for post

This will produce the exact same output as above however it is just some nice “syntatic sugar”.

Filter

var icecreams = [
{'flavour':'chocolate','rating':'5'},
{'flavour':'vanilla','rating':'9'},
{'flavour':'strawberry','rating':'8'},
{'flavour':'salted caramel','rating':'9'}
]
var filterIcecreams = icecreams.filter(function(currItem){
return currItem.rating >8
})

As you can see from the above, we have created an array of objects pertaining to an ice cream flavour as well as its rating, I have then performed a filter operation on the array to only return ice creams that have a rating greater than 8. The output can be seen below which will be the flavours “vanilla” and “salted caramel”

Image for post
Image for post

NOTE: One thing to remember when using map, reduce and filter is that within the callback function it must use the “return” keyword, otherwise your variable will return “undefined”.

Reduce

var myNumbers = [9,8,7,6,5,4,3,2,1];
var sumOfMyNumbers = myNumbers.reduce(function(previous,current,myIndex,myArray){
console.log(previous)
console.log(current)
return previous+current
},0);
console.log(sumOfMyNumbers)

As you can see from the example above I have an array of numbers and return the sum of the previous value adding to the current value, in addition, I have also set an initial value of 0, so the reduce will begin from 0. The first value of “previous” is 0, and the first value of “current” is 9, however, if I change the initial value to be 5 and not 0, then the first “previous” value is 5 and the total then becomes 50, not 45 because I have told the reduce to begin from 5 and not 0. You could also reduce to find the average of a group of numbers too

All in all, these 3 methods are a great way to implement list operations within JavaScript, however, this tutorial is a basic example of this and implements them using ES5 not ES6, with ES6 you can use more shorthand features such as arrow functions.

Hope you enjoyed this article, I will continue to learn and share my knowledge, any feedback is thoroughly appreciated :)

Software Developer in the UK. With a keen passion for React Native.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store