Deep JavaScript Foundations, v3

Module Exercise Solution

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 "Module 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 "Module Exercise Solution" Lesson

[00:00:00]
>> Kyle Simpson: All right, let's talk about this module's exercise, we'll walk through a solution to it. As the ReadMe lays out, you want to take these functions, the ones that are at the bottom, and essentially wrap them in one big function called define workshop. That'll be our module factory function.

[00:00:17]
So I'll start by doing that, I'll say defineWorkshop. And this one big function is going to include all of these inside of it. And so just like with the other ones, I'll keep those functions at the bottom of that scope. I'm gonna make and return a public API.

[00:00:48]
>> Kyle Simpson: And then I also need some data for this module to close over to use. And the data that I'm gonna be closing over is currentEnrollment and studentRecords, I need those two arrays Inside of here. So I will make and arrange called currentEnrollment,
>> Kyle Simpson: Another one called studentRecords,

[00:01:17]
>> Kyle Simpson: On my public API, I need to have according to the ReadMe, these five functions, addStudent and enrollStudents. So, let's do those first and define those.
>> Kyle Simpson: How do those work? Well, first, we have addStudent. It's gonna take the ID, the name and whether they're paid and create a record and stuff that in.

[00:01:43]
So, we're gonna take id, name, and paid as the input. And we're going to push into the studentRecords array,
>> Kyle Simpson: An object that includes id, name, and paid.
>> Kyle Simpson: EnrollStudent is similar, enrollStudent,
>> Kyle Simpson: Takes a student id, and it pushes that into the currentEnrollment array. I'm gonna do one extra check since this is an API now rather than being set up, it's I'm gonna do an extra check that makes sure that I'm not try to add duplicate IDs into the array.

[00:02:34]
So I will do if (!currentEnrollment.includes(id), and currentEnrollment.push(id). ReadMe then says we need a printCurrentEnrollment. So what would printCurrenEenrollment do?
>> Kyle Simpson: It doesn't take any inputs, it essentially takes the place of this call. This one is printing the currentEnrollment, so let's literally just copy that into our printCurrentEnrollment. We don't want them to provide their own list of IDs, because that's the whole purpose of the module is to abstract that detail and keep it as a hidden implementation, okay?

[00:03:30]
Next the readme says we need an enrollPaidStudents. Exactly the same, enrollPaidStudents is doing the same thing as this, which is to call paid students to enroll, and then update the current enrollment array with it. So, let's do,
>> Kyle Simpson: What's it called again, enrollPaidStudent.
>> Kyle Simpson: And then finally, we need a remindUnpaidStudents.

[00:04:23]
Again, that is basically taking the place, of calling remindUnpaid with our currentEnrollment. So we need that,
>> Kyle Simpson: And a function.
>> Kyle Simpson: So we've now hidden those implementation details inside of a module definition. We have,
>> Kyle Simpson: So, we expose five public API methods and we keep everything else private.

[00:05:14]
We keep the data private, and closure is how we maintain that state over time. Last step, then, is instead of,
>> Kyle Simpson: Setting up these arrays we need to actually make and instantiate, I guess is not the last step but the next step, is we need to instantiate our workshop.

[00:05:36]
So we're gonna call defineWorkshop, and we're gonna start using it. We'll first set up the student records, so I'm going to, because I'm super lazy, use some regular expression replacing to define those.
>> Kyle Simpson: I have one already written for myself so I don't have to rewrite it.
>> Kyle Simpson: I need to turn on regular expression mode.

[00:06:19]
All right, so now those are all my function calls.
>> Kyle Simpson: And then similarly here we're gonna call deepJS.enrollStudent. That's what I called it, right, enrollStudent?
>> Kyle Simpson: Yeah,
>> Kyle Simpson: All right, I'll just type these out.
>> Kyle Simpson: Now that stuff's done, and then all that's left is for us to update these calls to print,

[00:07:14]
>> Kyle Simpson: PrintCurrentEnrollment.
>> Kyle Simpson: I think I missed a detail there.
>> Kyle Simpson: I not only need to update it, but we need to print the records, so I missed that [INAUDIBLE]. Our enroll paid students needs to update the enrollment and print those records.
>> Kyle Simpson: We call deepJS.enrollPaidStudents. And then last but not least, ddeepJS.RemindUnpaidSstudents.

[00:08:07]
>> Kyle Simpson: And we're done. As I said at the outset, modules really is one of the most important code organization patterns in all of JavaScript, maybe in all of software, but certainly in all of JavaScript. So you're gonna get a lot of mileage out of thinking about this pattern, practicing it, trying to implement it more.

[00:08:25]
So I would strongly recommend everything in this course for sure but especially this. Try to go back and do some homework, if you will. Try to go back and look for some place in your code where that could use some better organization and see if there's a way to extract out a simple definition for a module.

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