Check out a free preview of the full Deep JavaScript Foundations course:
The "Challenge 5: Module, Part 3" Lesson is part of the full, Deep JavaScript Foundations course featured in this preview video. Here's what you'd learn in this lesson:

Kyle introduces the third part of the challenge, where students clean up the UI and data operations.

Get Unlimited Access Now

Transcript from the "Challenge 5: Module, Part 3" Lesson

[00:00:00]
>> Kyle: All right, part three, now that hopefully you're feeling a little bit more confident. And by the way, if you didn't get part two finished, just grab the fixed version and make that your starting point. Fixed being, make that your starting point for part three. But in part three, we go one more step in terms of encapsulation.

[00:00:17] We really wanna hammer home how modules can start to help us. The main thing that I can observe, if I look at this fixed code here, is that in my app code, let me go down to app. In my app code, there's a bunch of mixing in the data model between project entries and work data entries, or work entries.

[00:00:39] And that mixing can get a bit complex. And also if you think about it, there are some operations that conceptually are performed at the project abstraction level. So why don't we go one step further and make a module instance for each project and have an API that represents the data that we wanna do, the operations that we wanna interact with each individual instance of projects?

[00:01:07] So this last step is to say, instead of all this project entry data stuff that's getting passed around, make a project module that can be, it's a factory, right? Capital P, project factory function, that can churn you out instances of projects and then give it some methods that allow you to interact more cleanly with that part of the data model.

[00:01:29] So instead of keeping track in your app of all these different project entry data objects like we're doing, keep track of a list of project instances.