Chaining and function composition with lodash / underscore

FUNCTIONS FUNCTIONS CHAININGCHAINING AND AND COMPOSITIONCOMPOSITION WITH _ WITH _

@NICOESPEON@NICOESPEONhttp://nicoespeon.com

http://twitter.com/nicoespeon

http://nicoespeon.com/

http://metidia.com/

http://beta.vinoga.com/

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

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

lodashunderscore

https://lodash.com/

http://underscorejs.org/

FUNCTIONAL PROGRAMMING?FUNCTIONAL PROGRAMMING?First-class functionsHigher order functionsPure functionsRecursionImmutability≠ imperative programmingbut !≠ OOP

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

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 }] );


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 }// ]


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 }// ]

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 }// ]

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" } );}


_.CHAIN(_.CHAIN( VALUE VALUE ))Creates a lodash object that wraps value with explicitmethod 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 );

_.CHAIN(_.CHAIN( VALUE VALUE )) … … .VALUE().VALUE() ! !Executes the chained sequence to extract theunwrapped 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 }// ]

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();}


function getItems() { return _( this.get( "items" ) ) // _( value ) === _.chain( value ) .compact() .reject( { quantity: 0 } ) .filter( { type: "juice" } ) .value();}


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

PIPELINE / FLOWPIPELINE / FLOWfunction 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?

PIPELINE / FLOWPIPELINE / FLOWfunction 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.

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

LAZYLAZY EVALUATION EVALUATIONTo learn more about this >

http://filimanjaro.com/blog/2014/introducing-lazy-evaluation/

http://filimanjaro.com/blog/2014/introducing-lazy-evaluation/

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

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

COMPOSITION ?COMPOSITION ?



var times3AndAdd10 = _.compose( add10, times3 ); // f ∘ g

times3AndAdd10( 10 );// => 40

times3AndAdd10( 0 );// => 10



var times3AndAdd10 = _.flowRight( add10, times3 ); // f ∘ g

times3AndAdd10( 10 );// => 40

times3AndAdd10( 0 );// => 10

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

_.FLOW(_.FLOW( [FUNCS] [FUNCS] ))



var times3AndAdd10 = _.flow( times3, add10 ); // f ∘ g

times3AndAdd10( 10 );// => 40

times3AndAdd10( 0 );// => 10

If _.flowRight is not of your taste.

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"

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…

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()

// 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 );



function hasMatchingBottles( cepage, buildings ) { // Use `_` as a placeholder for not-yet-defined params! var isCepageInRecipe = _.partialRight( _isCepageInRecipe, cepage ); var areBuildingsPartOfRecipe = _.partialRight( _areBuildingsPartOfRecipe, buildings );


PARTIAL APPLICATION: THE SWISS ARMY KNIFEPARTIAL APPLICATION: THE SWISS ARMY KNIFE

COMPOSITION COMPOSITION VS.VS. CHAINING ? CHAINING ?_.flow is a tool to build higher order functionsIt 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 equivalentvar getJuices = _.flow( _.partialRight( _.filter, { type: "juice" } ), _.partialRight( _.reject, { quantity: 0 } ), _.compact);

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

NOTNOT EVERYTHING IS CHAINABLE EVERYTHING IS CHAINABLESome methods are: _.keys, _.map, _.push, _.pluck,_.union, … Others are not — by default: _.find, _.isNumber,_.reduce, _.sum, …

NON-CHAINABLES METHODSNON-CHAINABLES METHODSfunction 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#_

https://lodash.com/docs#_

_.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" ]

_.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 ]

_.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!

_.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 ]"

_.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 ]"

THANKS!THANKS! ANY QUESTION? ANY QUESTION?

Internet

Chaining and function composition with lodash / underscore