Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Apply multiple functors as arguments to a function (Applicatives)

    Brian LonsdorfBrian Lonsdorf

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

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss