Deep JavaScript Foundations, v3

Module Exercise

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" 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 module pattern.


Transcript from the "Module Exercise" Lesson

>> Kyle Simpson: Let's dive into an exercise to practice this module pattern that we've just learned about. In this exercise, you are gonna be refactoring some code that manages the enrollment records for a workshop. You're not gonna be changing the functionality, but you are gonna be rearranging the code, to use what we learned about the classic or the revealing module pattern.

As a bonus, by the way, feel free to also try re-writing this using the ES6 module syntax, after you've done the original version of the exercise. So, your instructions are laid out here, it should be fairly straightforward but your instructions include defining a module factory function called defineWorkshop, that's going to make and return those object instances that represent the public API's.

These five methods or functions are what needs to be exposed on the public API, and you're going to end up defining those functions. So these are ones that don't exist. You're gonna expose them in the public API and then define them. And you're going to move the currentEnrollment and studentRecords arrays into the module, but they need to be empty arrays inside of the module.

And then you're going to from the outside use the addStudent and enrollStudent functions to push the data into your module instance, okay? So we're not gonna embed data into a module that doesn't make any sense, or hard code data into a module. So you'll change all of those assignments to the array into function calls here.

And then we're going to use that defineWorkshop to make a module instance called deepJS. Then we'll call deepJS.addstudent multiple times to add in the student records, we'll call deepJS.enrollStudent several times to enroll them. And then we will change the references to the other executables, to their counterparts on the deepJS module API.

So that's an overview of what you're doing. if you look at the EXJS file, this is what it looks like, the functions are at the bottom, and generally they are split out and hoisted. And you're simply taking this file not changing it's behavior per se, but formatting this as a module.

The take away that you're trying to get here is the advantages of the module pattern, are hiding details that aren't necessary to be exposed. It is not necessary for anybody to know that an array is what is tracking the current enrollments. Or that there's an array of objects tracking the current student records.

That is an implementation detail, and all manner of software engineering tells that ought to be hidden. So that it can be future refactored, so that it can't be abused. So the idea here is use the model pattern to hide the details that are necessary, only expose those public IP methods that's necessary.

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