Deep JavaScript Foundations, v3

OLOO Pattern

Kyle Simpson

Kyle Simpson

You Don't Know JS
Deep JavaScript Foundations, v3

Check out a free preview of the full Deep JavaScript Foundations, v3 course

The "OLOO Pattern" Lesson is part of the full, Deep JavaScript Foundations, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle demonstrates how to implement a new design pattern involving linked objects.


Transcript from the "OLOO Pattern" Lesson

>> Kyle Simpson: We understand prototypes, we understand the syntactic sugar on top of them which is the class system. But let's look at another way of using this prototype system, which I believe will uncover more potential future exploration within JavaScript. I believe there's more things that we can accomplish, and I think we can do it in a simpler way.

So I want us to simplify. I have a different style of approaching the way we use objects, and the prototype language between them and I call this style of coding OLOO, Objects Linked to Other Objects. I needed some kind of catchy term to contrast with OO and the sad reality is that object oriented is actually the best term.

If you think about it, class oriented languages should never have really called themselves object oriented languages. They should have called themselves class oriented. But they took on that object oriented moniker, and now it's stuck and we can't re-purpose the meaning of object oriented. But if you really think about it there are two languages in existence, JavaScript being one of them, OLOO being the other.

Two languages in existence to my knowledge where in you can create an object without any class. So when you really think about it, the only two truly object oriented languages are OLOO and JavaScript. But that ship has sailed. We can't use OO, so let's call it OLOO, Objects Linked to Other Objects.

And that is trademarked, so you need to pay me lots of money if you want to use it. I'm kidding. So let's look at how OLOO approaches things. Remember the class syntax. This is what we talked about a little bit before. Classes are a way of patterning some relationship between different entities and instantiating them.

But under the covers, remember, that that class is actually implying all of this gunk right? It's actually implying all of these prototypes. So what if we could do a style of coding that accomplishes the same thing but without any of the baggage of thinking or designing with classes, needing to worry about prototypes, or super, or any of that other stuff, and certainly never needing to use the new key word again.

What if we could just make objects link to other objects? Here's the OLOO style representation of that code. What I want you to see here is that I have only objects now. Workshop is not a function. It's not a class. It's just an object. AnotherWorkshop is just an object.

I am linking it via Object.create the workshop but it is just an object. And the JSRecentParts is just an object that is linked to another workshop. So when I call JSRecentPart.setteacher, it doesn't have that method but it goes to another workshop who doesn't have that method, but it goes to this workshop.

And then it finds set teacher, and it uses this binding of the call site to set a property on JSRecentPart's. So we're getting the same benefits of a class system. But notice what is missing now. We don't have any more .prototypes, we don't have any more constructor functions, and we don't have any more new keywords.

We just have objects linked to other objects, and the magic trick here is that we use this little thing called object.create to make and link our objects. So object.create, I obviously didn't invent that. That was added to the language back in ES5. That was actually proposed for JavaScript by our good friend Doug Crockford.

He came up with the idea for object.create and he got it pushed through the committee and added to ES5. Great idea Doug. Fantastic. This is one of my favorite features in JavaScript. As a little sad side note, Doug Crockford has since disowned object.create and no longer thinks that we should use it at all, which makes me a cry a little tear.

I love this feature because I love being able to make objects and link them together without any of the nonsense of new, and prototypes, and constructors, and classes, and extends, and all of that other stuff. I love just being able to take full advantage of the objects oriented system in JavaScript.

>> Kyle Simpson: Not only do I argue that this is a simpler style and if you looked line by line comparison, there is essentially very little syntactic difference between this and the class equivalent. It's not that class equivalent is just massively more sugary or something. They're essentially very close in equivalence.

But where this one is exposing to you directly instead of pretending with an artifice that it's something that it's not, it's exposing to you directly, these are just objects linked to other objects.
>> Kyle Simpson: Now, how does object.create do that magic? Well this is an old polyfill for object.create.

We don't need polyfills mostly for pre-ES5 anymore. But this was the pre-ES5 polyfill for object.create. And look at what it does, is it literally makes an empty function. Cuz we don't even care what the function is. It sets its prototype to sum O, and it calls new on that who cares whatever function to give us the newly created object.

So, in other words, the way object.create does the magic of OLOO, is we take all of those constructor functions that nobody cares about and all those .prototypes that nobody wants to write, and all those new keywords that are just confusing. And we hide them inside of object.create, okay, leaving in our code just this clean, simple linkage between objects.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now