Module pattern

- [Instructor] We'll start covering patterns that help you organize your code in this chapter. And the first one is the module pattern. The module pattern is probably the one pattern where if you're not aware that you're using it, you'll be like, oh yes, I know this one. The module pattern is used everywhere in our code especially if you use any frameworks. Whenever you encapsulate a block of code into a singular function or pure function as it is sometimes referred to, you're creating a module. The idea behind using module is to organize your code in pure functions so if you have code to debug, it is much easier to find where the error is.

We often use modules too with the keyword, import or export, so when we compile our code, we only use the code we need. In the exercise files, you'll find a resource folder and then a note folder. So what I want you to do is copy and paste that folder wherever you want or you can work from that, that's going to folder here, I'm simply going to do option click and drag it into my desktop. And then what I'm going to do is go back to vs code and stop the live server.

Instead of using those files here, I'm going to drag and drop node into the S code. So we work off this guy. First thing we'll do is install all the dependencies so click on View, Terminal and let's do NPM install. And while it does this we'll create a new file inside of that folder which we'll call calc.js.

And what we'll do, we'll create a simple function inside of that file here so let's go ahead and do Const calc equal... And we're not passing any values and that looks very familiar if you remember what we've done in the previous videos, we've done exactly that function. But we'll do one thing differently this time. We'll export that function. So what we'll do is export, default and then calc.

So what we've done here is basically export that function available to be used anywhere in our code in this directory. So what we could do is literally go into index and import it so that's the idea behind a module. We have a file, we have a module. So sometimes what you'll see is have a file with multiple modules being exported and usually what they would do is something like this and then most likely they would export the function here like this. And then instead of having one function, they would have multiple functions but we're not going to do that, we're simply going to export one function.

Alright, so now that all of our modules and dependencies have been installed, let's go and do NPM start. And if you see any issues here, it's most likely because you're missing the babel RC file. That means that when you went into the exercise files and look into the note folder, if you didn't see this that means your system doesn't show hidden files. So we need to be able to see this file and copy it into the server. So once the server is started, let's go and do localhost 3000.

And that's fine, that's usually an icon thing and we see node an express server is running on port 3000. So what we're going to do now is change the message that we see here with the module we just created. So what we're going to do is go inside of our index and again use the import of our module calc from the file that we had. And then what we'll do is create a variable call aNumber which equals to calc which is the function that we just imported.

And then in the message here, instead of saying all this we'll say something like, Showing number and then we'll pass. And this is template strings by the way, this is ES6 Syntax aNumber. So we're passing this value. So in theory we're importing this function inside of index, we're returning 12 from this calculation which we're passing as a value inside of aNumber and then we're inserting aNumber 12 inside of our template strings.

And then we can continue this with our port. Alright, so let's save that and then go back here showing number 12 on port 3,000. So basically what we've done here is leverage the module pattern where we exported a block of code which is pure and then imported it inside of our main server and then used it to show number 12 inside of our server.