Chaining and function composition with lodash / underscore

Chaining and function composition with lodash / underscore. Talk presented on June 23rd, 2015 at Backbone.js Paris S01E07 meetup.

1. FUNCTIONS FUNCTIONS CHAININGCHAINING AND AND
COMPOSITIONCOMPOSITION WITH _ WITH _

2. @NICOESPEON@NICOESPEON
http://nicoespeon.com

3. BEFORE WE BEFORE WE DIVE INDIVE IN
> A QUICK CHECK-UP> A QUICK CHECK-UP

4. WHEN I SAY WHEN I SAY __
I personally use (v3.0+)
Works with too — for the most part \o/
lodash
underscore

5. FUNCTIONAL PROGRAMMING?FUNCTIONAL PROGRAMMING?
First-class functions
Higher order functions
Pure functions
Recursion
Immutability
≠ imperative programming
but !≠ OOP

6. FUNCTIONS FUNCTIONS CHAININGCHAINING
> WHAT IS THAT FOR?> WHAT IS THAT FOR?

7. A CONCRETE CASE : MULTIPLE OPERATIONS (0)A CONCRETE CASE : MULTIPLE OPERATIONS (0)
this.set( "items", [
{ id: "ae213aa4", cepage: "merlot", type: "juice", quantity: 3 },
null,
{ id: "ebaaa82e", cepage: "gamay", type: "grape", quantity: 2 },
{ id: "ee2bcc12", cepage: "viognier", type: "grape", quantity: 0 }
] );

8. A CONCRETE CASE : MULTIPLE OPERATIONS (1)A CONCRETE CASE : MULTIPLE OPERATIONS (1)
function getItems() {
return _.compact( this.get( "items" ) );
}
getItems();
// =>
// [
// { id: "ae213aa4", cepage: "merlot", type: "juice", quantity: 3 },
// { id: "ebaaa82e", cepage: "gamay", type: "grape", quantity: 2 },
// { id: "ee2bcc12", cepage: "viognier", type: "grape", quantity: 0 }
// ]

9. A CONCRETE CASE : MULTIPLE OPERATIONS (2)A CONCRETE CASE : MULTIPLE OPERATIONS (2)
function getItems() {
return _.reject( _.compact( this.get( "items" ) ), { quantity: 0 } );
}
getItems();
// =>
// [
// { id: "ae213aa4", cepage: "merlot", type: "juice", quantity: 3 },
// { id: "ebaaa82e", cepage: "gamay", type: "grape", quantity: 2 }
// ]

10. A CONCRETE CASE : MULTIPLE OPERATIONS (3)A CONCRETE CASE : MULTIPLE OPERATIONS (3)
function getItems() {
return _.filter(
_.reject(
_.compact( this.get( "items" ) ),
{ quantity: 0 }
),
{ type: "juice" }
);
}
getItems();
// =>
// [
// { id: "ae213aa4", cepage: "merlot", type: "juice", quantity: 3 }
// ]

11. A CONCRETE CASE : MULTIPLE OPERATIONS (3)A CONCRETE CASE : MULTIPLE OPERATIONS (3)
// Better, really?
function getItems() {
var compactedItems = _.compact( this.get( "items" ) );
var positiveCompactedItems = _.reject( compactedItems, { quantity: 0 } );
return _.filter( positiveCompactedItems, { type: "juice" } );
}
getItems();
// =>
// [
// { id: "ae213aa4", cepage: "merlot", type: "juice", quantity: 3 }
// ]

12. _.CHAIN(_.CHAIN( VALUE VALUE ))
Creates a lodash object that wraps value with explicit
method chaining enabled.
_.chain( this.get( "items" ) );
// => returns `LodashWrapper`
_.chain( this.get( "items" ) ).compact();
// <=> `_.compact( this.get( "items" ) );`
// BUT… returns `LodashWrapper` too!
// And so we can do ->
_.chain( this.get( "items" ) )
.compact()
.reject( { quantity: 0 } )
.filter( { type: "juice" } )
// …
.map( doSomething );

13. _.CHAIN(_.CHAIN( VALUE VALUE )) … … .VALUE().VALUE() ! !
Executes the chained sequence to extract the
unwrapped value.
_.chain( this.get( "items" ) )
.compact()
.reject( { quantity: 0 } )
.filter( { type: "juice" } )
// Hum… still return `LodashWrapper` >_<
.value();
// And voilà \o/
// =>
// [
// { id: "ae213aa4", cepage: "merlot", type: "juice", quantity: 3 }
// ]

14. A CONCRETE CASE : MULTIPLE OPERATIONS (4)A CONCRETE CASE : MULTIPLE OPERATIONS (4)
function getItems() {
return _.chain( this.get( "items" ) )
.compact()
.reject( { quantity: 0 } )
.filter( { type: "juice" } )
.value();
}
getItems();
// =>
// [
// { id: "ae213aa4", cepage: "merlot", type: "juice", quantity: 3 }
// ]
function getItems() {
return _( this.get( "items" ) ) // _( value ) === _.chain( value )
.compact()
.reject( { quantity: 0 } )
.filter( { type: "juice" } )
.value();
}
getItems();
// =>
// [
// { id: "ae213aa4", cepage: "merlot", type: "juice", quantity: 3 }
// ]

15. WHAT WAS ALL THE WHAT WAS ALL THE FUSSFUSS ABOUT? ABOUT?
> ADVANTAGES OF CHAINING> ADVANTAGES OF CHAINING

16. PIPELINE / FLOWPIPELINE / FLOW
function getItems() {
return _( this.get( "items" ) )
.compact()
.reject( isEmpty )
.filter( isJuice )
.map( parseText )
// … we construct the pipeline
// flow is clear, readable!
.value();
}
Does that ring a bell?

17. PIPELINE / FLOWPIPELINE / FLOW
function makeItemAvailable( userID, index ) {
return _findOneItem( userID, index )
.then( doSomethingClever )
.then( updateStatusAs( "available" ) )
.then( res.ok )
.catch( res.serverError );
}
// You get the same idea with promises.

18. function getBottles( options ) {
// Ensure default options.
options = _.defaults( {}, options, { isAppellationOnly: false } );
var bottlesWrapper = _( this.get( "bottles" ) ).map( parseText );
// …
// Dynamically build the pipeline.
if( options.isAppellationOnly ) {
bottlesWrapper = bottlesWrapper.pick( [ "appellation" ] );
}
// Nothing have been computed so far!

return bottlesWrapper.value(); // evaluates when needed only!
}
function getParsedBottlesWrapper () {
return _( this.get( "bottles" ) ).map( parseText );
}
function getBottles( options ) {
// Ensure default options.
options = _.defaults( {}, options, { isAppellationOnly: false } );
var bottlesWrapper = getParsedBottlesWrapper.call( this );
// Dynamically build the pipeline.
if( options.isAppellationOnly ) {
bottlesWrapper = bottlesWrapper.pick( [ "appellation" ] );
}
// Nothing have been computed so far!

return bottlesWrapper.value(); // evaluates when needed only!
}
LAZYLAZY EVALUATION EVALUATION

19. LAZYLAZY EVALUATION EVALUATION
To learn more about this >
http://filimanjaro.com/blog/2014/introducing-lazy-evaluation/

20. COMPOSITIONCOMPOSITION AND OTHER TRICKS AND OTHER TRICKS
> TO BUILD > TO BUILD EFFICIENTEFFICIENT PIPELINES PIPELINES

21. COMPOSITION ?COMPOSITION ?
(f⋅g)(x)=f(g(x))
function add10( value ) { // f
return 10 + value;
}
function times3( value ) { // g
return 3 * value;
}
add10( times3( 10 ) ); // (f ∘ g)( 10 )
// => 10 + ( 3 * 10 )
// => 40

22. COMPOSITION ?COMPOSITION ?
function add10( value ) { // f
return 10 + value;
}
function times3( value ) { // g
return 3 * value;
}
var times3AndAdd10 = _.compose( add10, times3 ); // f ∘ g
times3AndAdd10( 10 );
// => 40
times3AndAdd10( 0 );
// => 10
function add10( value ) { // f
return 10 + value;
}
function times3( value ) { // g
return 3 * value;
}
var times3AndAdd10 = _.flowRight( add10, times3 ); // f ∘ g
times3AndAdd10( 10 );
// => 40
times3AndAdd10( 0 );
// => 10

23. _.FLOWRIGHT(_.FLOWRIGHT( [FUNCS] [FUNCS] ))
Create a function that will return the result of every
funcs invoked with the result of the preceding function,
from the right to the left (= compose).

24. _.FLOW(_.FLOW( [FUNCS] [FUNCS] ))
function add10( value ) { // f
return 10 + value;
}
function times3( value ) { // g
return 3 * value;
}
var times3AndAdd10 = _.flow( times3, add10 ); // f ∘ g
times3AndAdd10( 10 );
// => 40
times3AndAdd10( 0 );
// => 10
If _.flowRight is not of your taste.

25. PARTIAL APPLICATION: PARTIAL APPLICATION: _.PARTIAL()_.PARTIAL()
function greet( greeting, name ) {
return greeting + " " + name;
}
var sayHelloTo = _.partial( greet, "Hello" );
// returns a function with params partially set.
sayHelloTo( "Backbone" );
// → "Hello Backbone"

26. PARTIAL APPLICATIONPARTIAL APPLICATION
function _isCepageInRecipe( cepage, bottle ) { … }
function _areBuildingsPartOfRecipe ( buildings, bottle ) { … }
function hasMatchingBottles( cepage, buildings ) {
var isCepageInRecipe = _.partial( _isCepageInRecipe, cepage );
var areBuildingsPartOfRecipe = _.partial( _areBuildingsPartOfRecipe, buildings );
return _( this.get( "bottles" ) )
.filter( isCepageInRecipe )
.any( areBuildingsPartOfRecipe );
}
So you can chain in real life…

27. function greet( greeting, name ) {
return greeting + " " + name;
}
var greetBackbone = _.partialRight( greet, "Backbone" );
// returns a function with params partially set.
greetBackbone( "Hello" );
// → "Hello Backbone"
_.PARTIALRIGHT()_.PARTIALRIGHT()

28. // Not so smart params order here…
function _isCepageInRecipe( bottle, cepage ) { … }
function _areBuildingsPartOfRecipe ( bottle, buildings ) { … }
// Not so smart params order here…
function _isCepageInRecipe( bottle, cepage ) { … }
function _areBuildingsPartOfRecipe ( bottle, buildings ) { … }
function hasMatchingBottles( cepage, buildings ) {
// Use `_` as a placeholder for not-yet-defined params!
var isCepageInRecipe = _.partial( _isCepageInRecipe, _, cepage );
var areBuildingsPartOfRecipe = _.partial( _areBuildingsPartOfRecipe, _, buildings );
return _( this.get( "bottles" ) )
.filter( isCepageInRecipe )
.any( areBuildingsPartOfRecipe );
}
// Not so smart params order here…
function _isCepageInRecipe( bottle, cepage ) { … }
function _areBuildingsPartOfRecipe ( bottle, buildings ) { … }
function hasMatchingBottles( cepage, buildings ) {
// Use `_` as a placeholder for not-yet-defined params!
var isCepageInRecipe = _.partialRight( _isCepageInRecipe, cepage );
var areBuildingsPartOfRecipe = _.partialRight( _areBuildingsPartOfRecipe, buildings );
return _( this.get( "bottles" ) )
.filter( isCepageInRecipe )
.any( areBuildingsPartOfRecipe );
}
PARTIAL APPLICATION: THE SWISS ARMY KNIFEPARTIAL APPLICATION: THE SWISS ARMY KNIFE

29. COMPOSITION COMPOSITION VS.VS. CHAINING ? CHAINING ?
_.flow is a tool to build higher order functions
It can eventually replace simple chaining…
… but is not meant to replace _.chain
function getJuices( items ) {
return _( items )
.compact()
.reject( { quantity: 0 } )
.filter( { type: "juice" } )
.value();
}
// Flow equivalent
var getJuices = _.flow(
_.partialRight( _.filter, { type: "juice" } ),
_.partialRight( _.reject, { quantity: 0 } ),
_.compact
);

30. BUT WAIT, THERE'S BUT WAIT, THERE'S MOREMORE
> FEW > FEW SUBTLETIESSUBTLETIES AND OTHER CLASSICS AND OTHER CLASSICS

31. NOTNOT EVERYTHING IS CHAINABLE EVERYTHING IS CHAINABLE
Some methods are: _.keys, _.map, _.push, _.pluck,
_.union, …

Others are not — by default: _.find, _.isNumber,
_.reduce, _.sum, …

32. NON-CHAINABLES METHODSNON-CHAINABLES METHODS
function getJuiceTotalQuantity () {
return _( this.get( "items" ) )
.compact()
.filter( isJuice )
.pluck( "quantity" )
.sum();
// => return the sum
// no need for `.value()` -> implicitly called
}
More in the doc > https://lodash.com/docs#_

33. _.PROTOTYPE.PLANT(_.PROTOTYPE.PLANT( VALUE VALUE ))
Create a clone of the chain with the given value
var wrapper = _( [ 1, 2, null, 3 ] ).compact();
var otherWrapper = wrapper.plant( [ "a", null, "b", undefined ] );
wrapper.value();
// => [ 1, 2, 3 ]
otherWrapper.value();
// => [ "a", "b" ]

34. _.PROTOTYPE.COMMIT()_.PROTOTYPE.COMMIT()
Execute the chain and return a wrapper.
var array = [ 1, 2, 3 ];
var wrapper = _( array ).push( 2 );
console.log( array );
// => [ 1, 2, 3 ]
// Nothing executed, nothing changed.
wrapper = wrapper.commit();
console.log( array );
// => [ 1, 2, 3, 2 ]
// Chain executed
// `_.push()` mutated the original `array`
wrapper.without( 2 ).value();
// => [ 1, 3 ]

35. _.TAP(_.TAP( VALUE, INTERCEPTOR, [THISARG] VALUE, INTERCEPTOR, [THISARG] ))
Invoke interceptor and return value.
_( [ 1, 2, null, 3 ] )
.compact()
.tap( function ( value ) {
console.log( "tapped ->", value );
} )
.push( 1 )
.value();
// => "tapped -> [ 1, 2, 3 ]"
// => "[ 1, 2, 3, 1 ]"
"Tap" into the chain = very useful for debug!

36. _.TAP(_.TAP( VALUE, INTERCEPTOR, [THISARG] VALUE, INTERCEPTOR, [THISARG] ))
To log an intermediate value
_( [ 1, 2, null, 3 ] )
.compact()
// Can use `console.log`, just don't forget to bind the context!
.tap( console.log.bind( console ) )
.push( 1 )
.value();
// => "[ 1, 2, 3 ]"
// => "[ 1, 2, 3, 1 ]"

37. _.THRU(_.THRU( VALUE, INTERCEPTOR, [THISARG] VALUE, INTERCEPTOR, [THISARG] ))
Invoke interceptor and return the value of interceptor.
_( [ 1, 2, null, 3 ] )
.compact()
.thru( function ( value ) {
console.log( "tapped ->", value );
// Don't forget to return a value for the chain.
return value.reverse();
} )
.push( 0 )
.value();
// => "tapped -> [ 1, 2, 3 ]"
// => "[ 3, 2, 1, 0 ]"

38. THANKS!THANKS! ANY QUESTION? ANY QUESTION?