Map, Filter & Reduce in JavaScript

Map

This function returns a new array with a callback function acting upon every element within the array. Map will run a callback function that takes 3 arguments. The first being the “current item” in the array (this is a required argument), the second being the “index” within the array of the current item (this is an optional argument), finally, the last argument in the callback is the entire array itself (this is also an optional argument).

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'}
]
var movieName = favouriteMovies.map(function(currItem){return currItem.name});

Filter

Filter does exactly what it says on the tin, it will take in an array and filter out elements of the array depending on the criteria you set, i.e. numbers over 20, strings not equal to “david” etc. Filter works the same way as map in that it takes a callback as its first argument and that callback has 3 arguments (first is current item, second is current index, third is the whole array), filter will run the callback on every element within the array and return a new array that contains only elements which have returned true for the callback criteria, an example is below.

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
})

Reduce

Reduce as its name suggests reduces, however, to put it more professionally, the reduce function takes in all of the array elements and “reduces” them into a single value, furthermore, reduce differs from map and filter in that it supports 4 arguments within its callback (first being the current value, second being the previous value, third being the current index and finally the fourth is the array you are looping over). Reduce gives you the option to set the initial previous value (Which you can do by writing a comma and then the value after the closing “}”)as on the first loop iteration there isn’t a previous value present and is the reason as to why you can pass an initial value to reduce. The most basic usage of reduce is to sum a list of numbers.

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)

Software Developer in the UK. With a keen passion for React Native & C#. Blog — https://cowboycode.co.uk/

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