From 6b1f05f3554444bf357edd1ab33b105e84f420df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Val=C3=A9ry?= Date: Wed, 17 Feb 2016 11:38:26 +0100 Subject: [PATCH 1/6] | --- .../2016-xx-xx-reduce-function-usage-recap.md | 123 ++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 _posts/en/2016-xx-xx-reduce-function-usage-recap.md diff --git a/_posts/en/2016-xx-xx-reduce-function-usage-recap.md b/_posts/en/2016-xx-xx-reduce-function-usage-recap.md new file mode 100644 index 00000000..799f307c --- /dev/null +++ b/_posts/en/2016-xx-xx-reduce-function-usage-recap.md @@ -0,0 +1,123 @@ +--- +layout: *post + +title: Reduce usage +tip-number: xx +tip-username: darul75 +tip-username-profile: https://twitter.com/darul75 +tip-tldr: reduce function is part of js swiss knife, use it for accumalation, concatenation or as a reducer powerful function + +categories: + - en +--- + +As written in documentation the reduce() method applies a function against an accumulator and each value of the array (from left-to-right) +to reduce it to a single value. + +reduce() function accepts 2 parameters (M: mandatory, O: optional): + +- (M) a callback **reducer function** to be applied that deals with a pair of previous (result of previous computation) and next element until end of the list. +- (O) an **initial value** to be used as the first argument to the first call of the callback. + +So let's see a common usage and later a more sophisticated one. + +### Common usage (accumulation, concatenation) + +We are on Amazon website (prices in $) and our caddy is quite full, let's compute total. + +```javascript +// my current amazon caddy purchases +var items = [{price: 10}, {price: 120}, {price: 1000}]; + +// our reducer function +var reducer = function add(sumSoFar, nextPrice) { return sumSoFar + nextPrice.price; }; + +// do the job +var total = items.reduce(reducer, 0); + +console.log(total); // 1130 +``` + +Optional reduce function parameter was primitive integer type 0 in that first case, but it could have been an Object, an Array...instead of a primitive type, +but we will see that later. + +Now, cool I received a discount coupon of 20$. + +```javascript +var total = items.reduce(reducer,-20); + +console.log(total); // 1110 +``` + +### Advanced usage (combination) + +This second usage example is inspired by Redux [combineReducers](http://redux.js.org/docs/api/combineReducers.html) function [source](https://github.com/reactjs/redux/blob/master/src/combineReducers.js#L93). + +Idea behind is to separate reducer function into separate individual functions and at the end compute a new *single big reducer function*. + +To illustrate this, let's create a single object literal with some reducers function able to compute total prices in different currency $, €... + +```javascript +var reducers = { + totalInDollar: function(state, item) { + state.dollars += item.price; + return state; + }, + totalInEuros : function(state, item) { + state.euros += item.price * 0.897424392; + return state; + }, + totalInPounds : function(state, item) { + state.pounds += item.price * 0.692688671; + return state; + }, + totalInYen : function(state, item) { + state.yens += item.price * 113.852; + return state; + } + // more... +}; +``` + +Then, we create a new swiss knife function + +- responsible for applying each partial reduce functions. +- that will return a new callback reducer function + +```javascript +var combineTotalPriceReducers = function(reducers, initialState) { + return function(state, item) { + return Object.keys(reducers).reduce( + function(nextState, key) { + reducers[key](nextState, item); + return nextState; + }, + initialState + ); + } +}; +``` + +Now let's see how using it. + +```javascript +var bigTotalPriceReducer = combineTotalPriceReducers(reducers, {dollars: 0, euros:0, yens: 0, pounds: 0}); + +var totals = items.reduce(bigTotalPriceReducer); + +console.log(totals); + +/* +Object {dollars: 1005.11531904, euros: 1005.11531904, yens: 127514.24, pounds: 775.81131152} +*/ +``` + +I hope this approach can give you another approach of using reduce() function for your own needs. + +You reduce function could handle an history of each computation by instance as it is done in Ramdajs with [scan](http://ramdajs.com/docs/#scan) function + +[JSFiddle to play with](https://jsfiddle.net/darul75/81tgt0cd/) + + + + From d153ecc85467417af2ec9055646aaa1c4f9367ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Val=C3=A9ry?= Date: Wed, 17 Feb 2016 11:40:51 +0100 Subject: [PATCH 2/6] Update 2016-xx-xx-reduce-function-usage-recap.md --- _posts/en/2016-xx-xx-reduce-function-usage-recap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/en/2016-xx-xx-reduce-function-usage-recap.md b/_posts/en/2016-xx-xx-reduce-function-usage-recap.md index 799f307c..903fcc1d 100644 --- a/_posts/en/2016-xx-xx-reduce-function-usage-recap.md +++ b/_posts/en/2016-xx-xx-reduce-function-usage-recap.md @@ -5,7 +5,7 @@ title: Reduce usage tip-number: xx tip-username: darul75 tip-username-profile: https://twitter.com/darul75 -tip-tldr: reduce function is part of js swiss knife, use it for accumalation, concatenation or as a reducer powerful function +tip-tldr: some recaps about reduce builtin function usage categories: - en From 624012be0eeba9559f62df4a7cc4d5649159cceb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Val=C3=A9ry?= Date: Wed, 17 Feb 2016 11:46:32 +0100 Subject: [PATCH 3/6] Update 2016-xx-xx-reduce-function-usage-recap.md --- _posts/en/2016-xx-xx-reduce-function-usage-recap.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_posts/en/2016-xx-xx-reduce-function-usage-recap.md b/_posts/en/2016-xx-xx-reduce-function-usage-recap.md index 903fcc1d..0f5ab7c5 100644 --- a/_posts/en/2016-xx-xx-reduce-function-usage-recap.md +++ b/_posts/en/2016-xx-xx-reduce-function-usage-recap.md @@ -1,11 +1,11 @@ --- layout: *post -title: Reduce usage +title: Reduce builtin function usage tip-number: xx tip-username: darul75 tip-username-profile: https://twitter.com/darul75 -tip-tldr: some recaps about reduce builtin function usage +tip-tldr: some reminders about using the reduce function categories: - en @@ -112,9 +112,9 @@ Object {dollars: 1005.11531904, euros: 1005.11531904, yens: 127514.24, pounds: 7 */ ``` -I hope this approach can give you another approach of using reduce() function for your own needs. +I hope this approach can give you another idea of using reduce() function for your own needs. -You reduce function could handle an history of each computation by instance as it is done in Ramdajs with [scan](http://ramdajs.com/docs/#scan) function +Your reduce function could handle an history of each computation by instance as it is done in Ramdajs with [scan](http://ramdajs.com/docs/#scan) function [JSFiddle to play with](https://jsfiddle.net/darul75/81tgt0cd/) From 9e839d5d888002daeca799aa0bd2693c7ea4e98a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Val=C3=A9ry?= Date: Wed, 17 Feb 2016 11:49:53 +0100 Subject: [PATCH 4/6] Rename 2016-xx-xx-reduce-function-usage-recap.md to 2016-xx-xx-reminders-about-reduce-function-usage.md --- ...cap.md => 2016-xx-xx-reminders-about-reduce-function-usage.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename _posts/en/{2016-xx-xx-reduce-function-usage-recap.md => 2016-xx-xx-reminders-about-reduce-function-usage.md} (100%) diff --git a/_posts/en/2016-xx-xx-reduce-function-usage-recap.md b/_posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md similarity index 100% rename from _posts/en/2016-xx-xx-reduce-function-usage-recap.md rename to _posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md From 2f8a935f462a9956248cb13ed3d8b38106b991e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Val=C3=A9ry?= Date: Wed, 17 Feb 2016 12:26:19 +0100 Subject: [PATCH 5/6] fix --- ...16-xx-xx-reminders-about-reduce-function-usage.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/_posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md b/_posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md index 0f5ab7c5..11f693d0 100644 --- a/_posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md +++ b/_posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md @@ -101,14 +101,18 @@ var combineTotalPriceReducers = function(reducers, initialState) { Now let's see how using it. ```javascript -var bigTotalPriceReducer = combineTotalPriceReducers(reducers, {dollars: 0, euros:0, yens: 0, pounds: 0}); +var firstPrice = items[0].price; + +var initialState = {dollars: firstPrice, euros:firstPrice, yens: firstPrice, pounds: firstPrice}; + +var bigTotalPriceReducer = combineTotalPriceReducers(reducers, initialState); var totals = items.reduce(bigTotalPriceReducer); console.log(totals); /* -Object {dollars: 1005.11531904, euros: 1005.11531904, yens: 127514.24, pounds: 775.81131152} +Object {dollars: 1130, euros: 1015.11531904, yens: 127524.24, pounds: 785.81131152} */ ``` @@ -117,7 +121,3 @@ I hope this approach can give you another idea of using reduce() function for yo Your reduce function could handle an history of each computation by instance as it is done in Ramdajs with [scan](http://ramdajs.com/docs/#scan) function [JSFiddle to play with](https://jsfiddle.net/darul75/81tgt0cd/) - - - - From 5d6d9a66fcd71592a5a9fda759cc1e902d10e067 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Val=C3=A9ry?= Date: Wed, 17 Feb 2016 12:45:28 +0100 Subject: [PATCH 6/6] fix --- ...x-xx-reminders-about-reduce-function-usage.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/_posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md b/_posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md index 11f693d0..21844588 100644 --- a/_posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md +++ b/_posts/en/2016-xx-xx-reminders-about-reduce-function-usage.md @@ -85,14 +85,14 @@ Then, we create a new swiss knife function - that will return a new callback reducer function ```javascript -var combineTotalPriceReducers = function(reducers, initialState) { +var combineTotalPriceReducers = function(reducers) { return function(state, item) { return Object.keys(reducers).reduce( function(nextState, key) { - reducers[key](nextState, item); - return nextState; + reducers[key](state, item); + return state; }, - initialState + {} ); } }; @@ -101,13 +101,11 @@ var combineTotalPriceReducers = function(reducers, initialState) { Now let's see how using it. ```javascript -var firstPrice = items[0].price; +var bigTotalPriceReducer = combineTotalPriceReducers(reducers); -var initialState = {dollars: firstPrice, euros:firstPrice, yens: firstPrice, pounds: firstPrice}; +var initialState = {dollars: 0, euros:0, yens: 0, pounds: 0}; -var bigTotalPriceReducer = combineTotalPriceReducers(reducers, initialState); - -var totals = items.reduce(bigTotalPriceReducer); +var totals = items.reduce(bigTotalPriceReducer, initialState); console.log(totals);