[JavaScript] map(), filter(), and reduce()

Learning Functional Programming with JavaScript
Source: https://clojurebridgelondon.github.io/workshop/functions/map-reduce-sandwich.html

map()

.map(), or Array.prototype.map(), is a function that can interact with all items in an array and return an array at the end. Firstly, take the most understandable way to use map() as an example.

const newArray= originalArray.map(itemInArray=>action)
// original array
const arr = [1,3,5,7,9]
// newArr is the new array
// a can be anything
// just like when you doing for ...in while programming Python script
// here is to compare every item with 3 and return boolean
const newArr = arr.filter(a=>a>3);
return newArr;
// Arrow function
map((element) => { /* ... */ })
map((element, index) => { /* ... */ })
map((element, index, array) => { /* ... */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function(element) { /* ... */ })
map(function(element, index) { /* ... */ })
map(function(element, index, array){ /* ... */ })
map(function(element, index, array) { /* ... */ }, thisArg)
const kvArray = [{ k: 1, v: 10 },
{ k: 2, v: 20 },
{ k: 3, v: 30 }];

const reformattedArray = kvArray.map(({ k, v}) => ({ [k]: v }));
const kvArray = [{ key: 1, value: 10 },
{ key: 2, value: 20 },
{ key: 3, value: 30 }];

const reformattedArray = kvArray.map(({ key, value}) => ({ [key]: value }));

// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}],

// kvArray is still:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]

filter()

.filter(), or Array.prototype.filter(), is a intuitive function, which can filter the items qualified from an array and return them as a new array. Firstly, the most understandable way to use filter() is Array function.

const newArray= originalArray.filter(itemInArray=>condition)
// original array
const arr = [1,3,5,7,9]
// newArr is the new array
// a can be anything
// just like when you doing for ...in while programming Python script
// if a>3, a will be kept in the new array
const newArr = arr.filter(a=>a>3);
console.log(newArr);
// Arrow function
filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )
// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)
// Inline callback function
filter(function(element) { /* ... */ })
filter(function(element, index) { /* ... */ })
filter(function(element, index, array){ /* ... */ })
filter(function(element, index, array) { /* ... */ }, thisArg)

reduce()

.reduce(), or Array.prototype.reduce(), this function will return only one item at the end. .reduce() is different from the two we mentioned above. Instead of returning an array, reduce is more like to generate a summary of the information put in. Take sum of array as an example:

const numbers = [1,2,3,4];
// calculate the sum and store it in sumOfNums
const sumOfNums = numbers.reduce((sum, num) =>sum + num);
console.log(sumOfNums);
// output: 10
sum+=num;
// Arrow function
reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )

reduce((previousValue, currentValue) => { /* ... */ } , initialValue)
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } , initialValue)
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

// Inline callback function
reduce(function(previousValue, currentValue) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ })

reduce(function(previousValue, currentValue) { /* ... */ }, initialValue)
reduce(function(previousValue, currentValue, currentIndex) { /* ... */ }, initialValue)
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue)

Reference

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

--

--

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