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

The "class Exercise" 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:

Students are instructed to refactor existing code to use the class pattern.

Preview
Close

Transcript from the "class Exercise" Lesson

[00:00:00]
>> Kyle Simpson: In our final exercise of this unit, we're gonna look at and practice with the class keyword. You're going to be refactoring a namespace object into using a class system. So if you had a namespace pattern with the this aware coding and you wanted to instead use the class syntax to try to organize that code, then we're gonna be refactoring it into that class syntax.

[00:00:26]
In particular, here, we're gonna take advantage of the class extends. So there are a couple of functions within the definition of this namespace that are not this aware. And there's no reason for them to be specifically on this particular object that we're calling workshop. They are essentially helpers.

[00:00:47]
So what we're gonna do is have a parent class called helpers. And then, we're gonna have a child class that extends helpers, and that child class is the one that's gonna be called workshop, and it will inherit those helpers. So in other words, it will compose through inheritance to have access to those helpers.

[00:01:06]
And those won't need to be this bound, because they aren't this aware. If you look at the EX JS, you'll notice that you have a namespaced object. All the methods with all the this dot references in front of them. And you do have some places where you have functions that are not this aware, so they're not bound.

[00:01:23]
But you have other places where they are bound, and you need to make sure that those are still working once you wire up a class system. So the idea here is instead of defining all these things on an object, you're gonna be defining all of these as methods in a class, and then instantiating that class and using it.

[00:01:41]
So that's the substance of the exercise on class. We'll be back in a few minutes to talk through that solution. As always, if you get stuck and you need a hint, you can check out the solution in the ex dot fixed file.
>> Speaker 2: So it sounds like for breaking down into this aware objects, the rationale is less about size and readability and more about the separation of concerns where you would want each, kind of-

[00:02:08]
>> Kyle Simpson: Yes.
>> Speaker 2: Okay, cool. You going back to the guiding logic of the structuring, where an object begins and ends for this composition.
>> Kyle Simpson: Yeah.
>> Speaker 2: This delegation.
>> Kyle Simpson: I think that's true entirely separate of whether you choose or you choose classes or you choose modules or you choose some other organization pattern.

[00:02:26]
I think you should be asking what logically fits together and try to have the smallest pieces. I mean, I don't necessarily always go to like the single responsibility principle, but that is a reasonable place to head towards, right? It's reasonable to think about that as like a guiding principle.

[00:02:51]
That if this thing is doing a bunch of different stuff, maybe that should just be several different things doing those different pieces.

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