The full video and many others like it are all available as part of our Frontend Masters subscription.

Brian Lonsdorf

Brian Lonsdorf has taught several workshops and training courses on functional programming with javascript. He'a a regular speaker at conferences and helps organize/host FP events around the Bay Area.

Brian Lonsdorf

SFJS Co-Organizer

Brian steps through the solution for exercise 4 which requires you to use Maybe in place of an if statement. While solving exercise 4 he jumps into an attendee's JSBin to help them solve the exercise.
- Problem:
- Solution:

Get Unlimited Access Now

Brian Lonsdorf: All right, this one's pretty great. So here's what you're going to see in your normal code. This is like what you're going to see on your day to day. And we're going to say if we have a number, we want to parse the end. Okay, well I know how to write that.

I could say, well, I have parseInt. Okay, and what do I want to do? I want to compose that with first put it in maybe, right? Because it may or may not be there. But then I have to map parseInt over it, and see if this works. Hey, hey it worked.

Let's make it weird. Things got weird, then they got real weird. Come on, run it. There it goes. Expected 4 equals 43. I just like to fail it sometimes just to know we're on the right track. It's a good little tip. You can just like mess with the test so you know that you did it right.

Speaker 2: Hey, Brian.
Brian Lonsdorf: Yo.
Speaker 2: We're getting asked for a more step by step breakdown of how you're coming up with the solutions.
Brian Lonsdorf: Sure.
Speaker 2: Having some trouble following.
Brian Lonsdorf: Okay, sure. So, with this example 4, I've recognized a pattern that says if this value is here, I guess you more likely see this if it's not equal, equal, null, && it's not equal equal.

But n is not equal equal undefined and we'll see this every day in JavaScript code. People write this over and over and over again. Then we want to do this. And we're saying like, okay, I know that there's a pattern that captures this. I know that's called maybe.

If I have an null check and I want to run something if it's there, I will use maybe. Well how do I use maybe? Well I know I want to put my value in it. That's an important part. Functions don't go to maybes, values go into maybes. So if I have a Maybe (2), then if I can't parseInt the Maybe (2), I have to map parseInt the Maybe (2).

Then all of put a string and we're going to Maybe (2). So I was just kind of pushed into this solution because I said I have to put n in a maybe because it might not be there. My value goes in the maybe, in that container, and then when I map this function over it, it checks it.

I realize that the value's in the container now so I have to map this function over it. Now the composition of these two things, putting it in the maybe then mapping parseInt over it, is kind of what we're looking for to gain a function instead of just running it immediately.

But you're going to see this a lot in your code, because most your code is going to be making functions like that. You're not just going to be running things left and right inside other functions. You going to be composing and combining things into new functions. All right. So that was 4.

Brian Lonsdorf: All right. How are we doing? Was that a better breakdown?
Speaker 2: I'll ask.
Brian Lonsdorf: Break it down.
Speaker 3: Create the logging function again. And I threw a log between the map pareseInt and maybe and there was no output.
Brian Lonsdorf: Really? Right here? Let's do it. So here's our log function.

I think in other ones I've defined this for you just to help a little bit. We'll return to x so it counts a log and return it. Now then we log in the middle. Yeah, this big junk. What is this thing? This is the JS Bin specific version of an output of an object that I've never seen in any other interpreter.

But it says our value is 4 and it's inside this giant object. So see, if I call toString on this it'll look a lot nicer. There it is. So is it maybe the return x, or?
Speaker 3: No, I got that.
Brian Lonsdorf: Do you make any adjustment?
Speaker 3: Sure.

Brian Lonsdorf: All right, let's do it.
Brian Lonsdorf: Get this guy. Okay, what's the letters?
Speaker 3: K-U-M-A-Q.
Brian Lonsdorf: K-U-M-A-Q.
Brian Lonsdorf: Yeah, there it goes. Fixes it. It's got some value.
Speaker 4: I created a arbitrary
Brian Lonsdorf: Okay, perfect. So exercise 5 says, so we're going to log. Yeah, looks very close, like exactly what I have.

Let's see. Exercise 5. Log. I'm calling exercise 4. Sorry, man. That's a bummer.
Speaker 4: That's why you shouldn't grade exercise five.
Brian Lonsdorf: Actually, when I was naming these, I was like these are horrible names. Every time we rearrange it, I have to rename every exercise.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now