Last active
April 17, 2017 11:16
-
-
Save christiearcus/eb2dc285d1e78a34bbe73366cb8d8257 to your computer and use it in GitHub Desktop.
array reduce method - egghead tutorial
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var data = [15,3,20]; | |
// accumulator is the item of the array state last time it fired. | |
var reducer = function(accumulator, item) { | |
console.log(accumulator); | |
console.log(item) | |
return accumulator + item; | |
}; | |
var initialValue = 0; | |
var total = data.reduce(reducer, initialValue); | |
console.log('total:', total); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// make new transformed array smaller (only add even numbers) | |
var data2 = [1,2,3,4,5,6]; | |
var evens = data2.reduce(function(acc, value) { | |
if(value % 2 === 0) { | |
acc.push(value); | |
} | |
return acc; | |
}, []); | |
console.log(evens); | |
// the same as the filter method! | |
var filteredEvens = data2.filter(function(value) { | |
return (value % 2 === 0); | |
}); | |
console.log(filteredEvens); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var data = [[1,2,3], [4,5,6], [7,8,9]]; | |
var flattenData = data.reduce(function(acc, value) { | |
return acc.concat(value); | |
}); | |
console.log(flattenData); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function reducer(accumulator, value) { | |
return accumulator + value; | |
} | |
var data = [1,2,3,4,5,6,7]; | |
var sum = data.reduce(reducer, 0); | |
console.log(sum / data.length); | |
// this is a code smell, because we get the sum from the reducer function, then we have to operate on it after that to get the mean value. The functional programming approach should be able to return the fully transformed value. | |
// there are two extra signature arguments of reduce for the index. | |
// using these extra arguments allows you to operate on the actual array itself inside the function, so you can get a fully testable returned value from this function. | |
function reducer2(accumulator, value, index, array) { | |
var intermediaryValue = accumulator + value; | |
if (index === array.length -1) { | |
return intermediaryValue / array.length; | |
} | |
return intermediaryValue | |
} | |
var data2 = [1,2,3,4,5,6,7]; | |
var sum = data2.reduce(reducer2, 0); | |
console.log(sum); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// you have one array, and you need to transform it in to another array of the same size and operate on the values within that array. | |
var data = [1,2,3]; | |
var doubled = data.reduce(function(acc, value) { | |
acc.push(value * 2); | |
return acc; | |
}, []); | |
console.log(doubled); | |
// same as map! | |
var doubleMapped = data.map(function(item) { | |
return item * 2; | |
}); | |
console.log(doubleMapped); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var votes = [ | |
'angular', | |
'react', | |
'ember', | |
'ember', | |
'vanilla', | |
'react', | |
'react', | |
'angular' | |
]; | |
// turn array in to object to tally votes. | |
var initialValue = {}; | |
// tally is whatever was the last item when it was last called. | |
var reducer = function(tally, vote) { | |
// if there is not a key with that name, then create it and set the first vote value to one. | |
if(!tally[vote]) { | |
tally[vote] = 1; | |
} | |
else { | |
tally[vote] = tally[vote] + 1; | |
} | |
return tally; | |
} | |
var result = votes.reduce(reducer, initialValue); | |
console.log(result); |
Always return the accumulator.
You can also use array.reduceRight()
to begin from the 'end' of the array.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ALWAYS PASS IN AN INITIAL VALUE! The bugs you'll find are extremely hard to understand.