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

Hardcore Functional JS

Brian reintroduces objects in a different light. In his definition of objects, they are containers/wrappers for values. The have no methods and are not nouns. The first object he demonstrates in a Container object.

Get Unlimited Access Now

Brian Lonsdorf: I just wanted to tell you guys, we're using a pattern from Category Theory and Category Theory can tell you a lot about your programs. If you're composing them like this. You don't need to know so much of that, I'm not going to give you a test on category theory later.

I just wanted you guys to know that that's an important concept, and if you learn it, it's like learning more about add. You're like I didn't know multiplication distributed over it. I don't need to know that to write my app, but it was cool to have it there, so let's talk about this.

So, we basically built up apps like Legos with functions combining with functions and data combining with functions and composing everything right. Building new things from simpler smaller things, what about null checks or about callbacks? What about error handling, and side effects? The list goes on, I could probably list this like 50 things.

Things we have to deal with every single day. So we're going to reintroduce objects, but not in the way you think of them. So we're going to think of them as containers or wrappers for values. Like, we're going to take a number or a string or a whatever and put it inside an object and it's just going to wrap that value.

So we'll see that, we're not going to have methods. That sounds stupid but okay, we're going to have methods. I'm lying but think of it as not having methods and we're not going to think about these nouns. We're not going to have a user object, we're not going to have a blog object.

We're going to have different kinds of things that capture a behavior and then number 4, you will be making your own very often. I'm going to say that now because you probably won't for a while and once you get into the heavier architecture design stuff you can start doing this.

But, you can get very very far for very long without ever having to define your own functor or something like that. So don't worry about the implementation details or how do I make my own functors, just be like here's some standard ones and they'll probably capture everything I need anyway.

Okay, so Container, this is a convention I'm going to use throughout and we've got this _Container, that's an actual object. And then I've got a helper function that creates it by calling new. And the whole point of that is that we don't forget new and two because container is a composable function now.

It's just a constructor, so I don't have to drop new in the middle of a compose somehow. I can just call a container as a function, so dang that Jamaican food was good you guys. Anyway down to the bottom so, what I want you to see is that container of 3.

That is literally what it is like you are looking at a wrapper around the number 3. There is no like function call to return something crazy or it's not going as a property of an object and then it's going to have different names for it stuff. We're really just putting container around 3 and it's literally acting like a wrapper container of it.

It takes a little bit to kind of get used to looking at that literally not in an object oriented sense, but down to the bottom is what you'd see kind of in the console. Like we were assigning three to an arbitrary property called val and we get our actual container back but the container 3 part is important.

Don't worry about the 3, I just picked a random. Does anyone have any questions about this part? Online or our video froze, it's because I blew the minds of too many people with my container. Sorry, is everybody good? I saw a lot of people who didn't have object or an experience in JavaScript and so it may look a little foreign to you.

That the top thing is a constructor function if you call it with new words it really is just a constructor function and then our object comes out, okay. So we're going to go into, all right, so what if I capitalized flame thrower. And I get a capitalized flame thrower, that's great.

I've got a function called capitalize, I can use it all day long. I've got all these little functions I've made based on other little functions, is it still frozen.? Okay, cool, so based on other little functions, and I want to use those functions everywhere. They're like my main jam, and the point is that, is this red?

Student: It locked up.
Brian Lonsdorf: Why did I do? I hit it and my, all right when I said main jam I was like. So, but what if I try to capitalize a container of a flamethrower? It's not going to work, right? Capitalize works on a string not a container.

Functions don't take objects, they take standard values usually or maybe this one takes an object but obviously it doesn't because it takes a string right above it. So we want to capitalize or flamethrower but we can't when we put it in a container that's a bummer. Now you might be asking yourself why would I put in a container that sounds crazy, but we'll get to that just hang with me for a few more slides.

We'll talk about why we're putting flamethrower in a container, why would you put your flamethrower.

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