Apply multiple functors as arguments to a function (Applicatives)

Brian Lonsdorf
InstructorBrian Lonsdorf

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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

[00:00] We have here Either left A2. I've made a little jQuery stub here that just finds a selector, and pops it in an Either with a fake DOM node here. That just is for demonstration purposes here. Maybe in the real world, you'd want to use a task.

[00:14] Here, we have our getScreenSize function that just takes a screen, and header, and footer, and subtracts their height so we have the main screen size. We want to work with two different Eithers in passing them in to get screen size. Applicatives are a great fit for this.

[00:26] Let's go ahead and get our header. Then what we could normally do is map over this, and get our head here. Then we find our footer, and then we'd map over that, and get our footer. Of course, now that we are returning our head and Either inside this map, we'd have a nesting, so we have to change this to a chain.

[00:46] Finally, we get our screen size. It says 800 or so. We pass in our header and our footer. This would work, right? This is sequential, saying it will find the header first. After it is done, if it does find the header, we're going to find the footer, and then pass the footer into this.

[01:01] We can applicatives to run it all at the same time. Let's go ahead and do that. We'll say results is going to be, let's pop this in an Either, and we'll put in our getScreenSize. Now remember, we would have to say first take in a header, then take in a footer, and then call our getScreenSize, with our screen size, and our header, and our footer.

[01:19] Let's just go ahead and curry this function right off the bat, so it's nice and easy. We'll take the screen, and then that returns a function that takes the header, which returns function that takes the footer. Now, we could just partially apply this with 800.

[01:30] We'll go ahead and apply this to our header. Where is our header? There we are. Then apply that our footer. That's how you do it. We should have our results here, where we console.log it. Right here. This should be 780. There it is.

[01:51] Now, if we go ahead and switch this to the other syntax with our left A2, we have two applicatives, or two functors, we want to apply this to. We can say left A2, and then we don't need all this extra app noise around it, or the Either import as well, because it doesn't mention Either in the original of.

[02:11] This should be the same results -- there we are -- right, of 780. That's how we apply multiple functors as arguments to a function.

Tre' Codez
Tre' Codez
~ 2 years ago

I had no idea you can do this:

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

It's not just a computed prop, but what is it??

Tre' Codez
Tre' Codez
~ 2 years ago

Wait, looks correct in Plunkr, but I believe it is indeed incorrect in the Transcript.