[Compose] 16. Apply multiple functors as arguments to a function (Applicatives)

We find a couple of DOM nodes that may or may not exist and run a calculation on the page height using applicatives.

 

For example we want to get the main content section size by reduce the height of header and footer, nomarlly we will do like this:

1. get the header height

2. get the footer height

3. Use screen height - header - footer.

 

const $ = selector =>
  Either.of({selector, height: 10})

const getScreenSize = (screen, header, footer) => screen - (header + footer);

$('header').chain(header => 
    $('footer').map(footer => 
        getScreenSize(800, header, footer)
    )   
)

 

This happens in sequential, we can use currey function to improve the code:

const getScreenSize = screen =>  header =>  footer => screen - (header + footer);

Either.of(getScreenSize)
    .ap($('header'))
    .ap($('footer'))

 

Or we can use:

const liftA2 = (f, fx, fy) =>
  fx.map(f).ap(fy)

const res = liftA2(getScreenSize(800), $('header'), $('footer'))