Check out a free preview of the full Deep JavaScript Foundations course:
The "Challenge 5: Solution, Part 1" 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 walks through the solution to Challenge 5, Part 1.

Get Unlimited Access Now

Transcript from the "Challenge 5: Solution, Part 1" Lesson

[00:00:00]
>> Kyle Simpson: Let's talk about exercise five, part one. As you saw in the read me, the goal was to create a simple API around a simple module API, around the contents of our code, named app. And it should expose on that API these three methods, init, which is just basically the init UI function, should expose addProject and addWorkToProject.

[00:00:24] That third one is only there so that it's easier for us to test by calling the addWorkToProject from the outside. Also it makes mention here on line 20, that we wanna make sure not to call App.init or the data creation of App.addProject. We don't wanna make those calls inside the module.

[00:00:43] They need to be on the outside. So our code starts out with a bunch of variables hanging all out in the global space and functions hanging out in the global space. And naturally what we'd wanna do is basically wrap a module or definition on the entire content. So I could, for example, start by saying App =, and then just have a IIFE, maybe call it factory, that creates my module instance.

[00:01:10] Put all of this stuff indented one level, and finish my IIFE down at the bottom.
>> Kyle Simpson: So that's all I had to do to actually wrap this stuff up into a module definition except for a couple of details. For example, this stuff needs to be on the outside.

[00:01:30] So I'll grab it and move that down to the bottom. So it's on, it's after the module's already been created.
>> Kyle Simpson: This init function is gonna be now App.init,
>> Kyle Simpson: And these calls are gonna be App.addProject.
>> Kyle Simpson: And then the last step is to make an API for this module.

[00:02:04] So at the top here, I will declare an API, object called publicAPI,
>> Kyle Simpson: And return it.
>> Kyle Simpson: And then, on that API, we need to go back to the read me and so we need to expose three functions. We need an init function, that is the initUI, we need the addProject function to be exposed,

[00:02:40]
>> Kyle Simpson: And we need addWorkToProject to be exposed.
>> Kyle Simpson: And that's it.
>> Kyle Simpson: So that was some pretty low-hanging fruit, comparatively speaking. Cuz what we just did with that few six, seven, eight lines of code, what we just did, was take a code base which has a bunch of global stuff all hanging out.

[00:03:11] Very susceptible to collision and not very well organized, we just wrapped a simple definition around it and that improved the code. We now have an app module instance instead of a bunch of uncollected functions.
>> Kyle Simpson: Questions about part one of the exercise?
>> Kyle Simpson: Yes.
>> Speaker 2: Is it okay to shorthand notation there if the function-

[00:03:40]
>> Kyle Simpson: Yeah, the ES6 concise properties if you want to. That's an ES6 feature which we didn't really cover. But concise properties in ES6 means if they're the same name in both places, you don't need to list them twice.