Jul 16
[JavaScript] map(), filter(), and reduce()
The three functions are important when doing functional programming in JS. Recently I am working on the “JavaScript Algorithms and Data Structures” course provided by FreeCodeCamp. However, the three are a bit confusing, so here are the notes for the learning.
In the Functional Programming(FP) world, those functions are widely used to replace for loop and while loop to implement changes on each item in an array or something like that. I found a great talk about the concept of FP worth watching. Highly recommend it to anyone who just gets started.
Before diving into the functions, here is an interesting figure I would like to share — a funny way to illustrate map and reduce.
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)Take an example:
// 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;
It will return an array [false, false, true, true, true] because here all the items will be compared with 3, and if it’s larger than 3, return true.
It is one of the basic formats, and map() can do more than that. The Syntax copied from mdn shown as below.
// 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)
elementThe current element being processed in the array.
indexThe index of the current element being processed in the array.
The example of using map() to reformat object in an array confuses me the most. In my opinion, the case is confusing because of its keys, “key” and “value”. If we changed the the kvArray to this,
const kvArray = [{ k: 1, v: 10 },
{ k: 2, v: 20 },
{ k: 3, v: 30 }];
const reformattedArray = kvArray.map(({ k, v}) => ({ [k]: v }));, and it can work well. The output is [ { ‘1’: 10 }, { ‘2’: 20 }, { ‘3’: 30 } ].
Between the curly brackets {k, v} , the value of the two keys “k” & “v” are assigned into a new format, where the value of “k” (eg. 1) is set as the first key in the new array, and the value of “v” (eg. 10)as the value of “1”.
Hope it can make this easy to understand, and I guess…that is how it works. The original code is attached below.
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)Take a simple example, and it would be like that:
// 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);
The output would be [ 5, 7, 9 ]. Only the items that pass the filter will be kept.
The Syntax copied from mdn shown as below.
// 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: 10sum is taken as an accumulator, in each call the sum plus the current item, num, and return a valus back as a new sum. Just like when doing for loop:
sum+=num;The Syntax from mdn:
// 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
FreeCodeCamp: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/
