Check out a free preview of the full Hardcore Functional Programming in JavaScript course:
The "Other Functors: Exercise 1-5" Lesson is part of the full, Hardcore Functional Programming in JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Brian works through the solutions for the 5 exercises in this section. That latter exercises transition into his discussion about monads.

Get Unlimited Access Now

Transcript from the "Other Functors: Exercise 1-5" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian Lonsdorf: This is just like everything else. It's starting to get boring at this point. But I needed you guys to see all the cool stuff you can do with futures. So we're just gonna get the posts and map the title. Good title. I run that, works, so what's going to happen.

[00:00:23] If I show us a little log here. Keep defining this.
>> Speaker 2: Where does it get close to find.
>> Brian Lonsdorf: Down at the bottom of the page. So again, I can actually, let me just do log here. It's like a map log over that. And see how it's logging this object?

[00:00:50] It doesn't log it off the bat. So start one, start two, and then eventually logs it. So it gets past this and then comes back and does it. Cuz it's waiting for when this is ready to log that. It just says delay this for when you're here. And I get the post and it will show up there.

[00:01:06] So this is incredibly useful for API calls and such, to where you're actually getting things and then mapping over them without having to do all this callback stuff. And so I'll get the title here. Get back to normal. So we get the title from the post. Everything is good.

[00:01:27] Exercise two, same old same old, just going to, it says use one to extend the computation. That's a good point that I wanted to show. So I'll map render over that. I'm just doing this pattern over and over again, basically. But the idea is that this thing gets the post's title.

[00:01:49] And it doesn't do anything but return me a future that I can eventually fork, right? So, if I want to just extend it, I can. So, if you have a widget on a page and that page is gonna go make an API, call JSONP, whatever. And then come back with stuff, and then we do some IO and whatever.

[00:02:12] If your widget returns me and IO of a future. I could take your widget an extend it and build upon it without ever running or forking it. That would be awesome if more people knew how to do that, cuz I would be able to make bigger better widgets out of your widgets.

[00:02:25] But people don't do that. They're just gonna run, and blow up your page. So the idea is you're making these lazy computations that can be extended, and so we're extending our exercise one to put that title in a div. We did both of these, and then finally the third one, these are interesting, just to see over in our output here, I have to click it to run it.

[00:02:52] So let's go here it says, click the output and then click the div to run the test and all we're saying is, we wanna return a stream of the inner HTML. So it got these clicks, and I want to return a stream to the inner HTML. Well I got the e.target.innerHTML.

[00:03:10] What do I gotta do? Why don't I just get the e, or the target. And we'll the call, whoops, this is all backwards. Get the target. And then, I don't think I have a nice enter HTML function, do I? So, we'll probably just have to, what I'll do here instead, cuz I don't have a nice little function, is to say clicks.map, and I'll have our click or event.

[00:03:40] And I'm just going to grab the target on inner HTML. Great, don't forget to return. And now I have the inner HTML stream. So, whenever I do that, boom. Let me run it. It still works great. And the last thing is exercise four. Exercise five is bonus. You guys can play with that later.

[00:04:13] No, I have to do exercise five. Let's skip four and do five. Okay, [LAUGH] this video is just gonna be me mumbling to myself while I do this example. We can do four, it's just we're running low on time and it's the same as this one above, basically.

[00:04:33] So, five is a crazy one, you guys. Let's look at this. So the example is to say, get me, use safeGet, we've seen safeGet in other examples. It says, we're gonna safely get the address which returns of some maybe address. And then we wanna safely get the street, so I have to get the address then the street.

[00:05:00] And then it's name. I actually have to get the street name. That's gonna be intense. Okay, why not. All right, so I'll safeget the address. That's great. What do I have here right now, after I safely got the address? I have a maybe of this objects. Okay, are you guys seeing that?

[00:05:20] Once I safe get the address, I get a maybe of the address. No big deal. We've seen that million times. But when I safe get, or I have to map over that, right? I have to map over maybe. And if I safe get the street, what do I have here?

[00:05:38] Let's actually look at this. Let's go play with this. It expected a maybe, maybe Walnut Street, and I've got a maybe, maybe object. I've got a maybe and a maybe because the safe get gave me a maybe, and then I mapped over that maybe, which return me another maybe.

[00:05:59] So I have a maybe and a maybe, it's ridiculous.
>> Speaker 3: You have a maybe imposed?
>> Brian Lonsdorf: What was that?
>> Speaker 3: Or a map imposed?
>> Brian Lonsdorf: Well, you can't really squash these guys yet. We don't have any tools to make it one maybe, like flatten it. So what I wanna do is, I've got my safe get street.

[00:06:19] And now I could do my map walnut, or yeah, safe get, our name. There we go. We've got this going, wait no, that's a maybe and a maybe so I have to map map that, that's fine. We're getting there. We run it. I actually think I wrote the test wrong, you guys.

[00:06:40] Sorry about that. It's got three maybe to get the right answer. So three maybe, maybe, maybe. I'll fix that one. It was bound to happen, I'm not perfect. [LAUGH] All right. How do you solve that? What is going on here? We've got maybe, maybe, maybe. We've got this pattern of map, then map map, then this is super weird and gross.

[00:07:09] What's happening is we're, we've got three null checks going on. I don't know why this isn't equal, also a test problem. But we have three null checks going on. We can see that blatantly. If there are three possible things that could be you null, I'm getting three possible maybe's nested inside each other.

[00:07:29] This is a sequence, this is nesting. I said if not null do this, if not null do that, if not null do that, and keep nesting this giant gross nested and null check, that's what that is. That is a monad.