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

The "class Exercise Solution" 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 live codes the solution to the exercise.

Preview
Close

Transcript from the "class Exercise Solution" Lesson

[00:00:00]
>> Kyle Simpson: So let's talk about this final exercise on classes. Remember, we were turning this name space object into a class. Most of the mechanisms inside of these methods are gonna be exactly the same, which is the good news. You didn't have to change a lot of the code inside of it, but we're essentially changing the organization around it.

[00:00:22]
So rather than having an object that holds these things, we're gonna have a class, and we're gonna call that class Workshop. And instead of having properties on it, we're gonna have to have a constructor that sets those up. So we'll make a constructor that says this.currentEnrollment equals the empty array and this.studentRecords equals the empty array.

[00:00:54]
Now all the rest of these are just methods now inside of our class definition so we can remove those commas.
>> Kyle Simpson: All right, so all of those should stand without any changes because they are all properly handling this context of our instance. But there was one little thing with the Readme mention, which was to pull out the functions that are not this aware, and there are two of them, the sortByName and the printRecord.

[00:01:33]
These two are not,
>> Kyle Simpson: This aware, and they're not really related to the Workshop specifically. And so we're gonna put them in a Helpers parent class. That Helpers parent class doesn't need a constructor. But now that we're defining a parent class, it does mean a little nuance, which is that we're gonna have to make sure to call super from our child constructor.

[00:02:03]
If you don't define a child constructor, it automatically does. But if you make a child constructor, you have to call super to invoke the parent constructor, and you have to do it first. So that there is a this object that has been constructed for you. Okay, so now we need to add the extends clause, extends Helpers.

[00:02:27]
And then the only other change that we should have to make is that we need to instantiate the deepJS object by calling deepJS equals new Workshop. And if I didn't miss something, hopefully this code should now work. Let's switch over to this environments and let's run this code and see what we got.

[00:02:55]
And there's our output.
>> Kyle Simpson: So there's our class-based definition rather than using a name space. It's our class-based definition for our Workshop management. Questions about using the class syntax to organize this code?
>> Speaker 2: Did you use new when you created deepJS from Workshop?
>> Kyle Simpson: Yep, and we have to use new when we're dealing with a constructor.

[00:03:29]
For example, when define Workshop was a module factory, that's just a regular function so we just called it. But since this is a class constructor, we actually need to invoke it with a new keyword like you would a normal class.

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