Module Pattern

[00:00:00]
>> So first up, we have the module pattern, which is a very useful pattern to split your code up into multiple, smaller and reusable pieces. Now, if you've only been using JavaScript pretty recently, or at least after ES15, this may seem very obvious to you, but it didn't really used to be that way in JavaScript.

[00:00:16]
It was pretty normal to just create one big file that contained all the methods and all the values that we needed to use, and then execute that. But with the module pattern, we can actually split this up into modules, and only export the values, so making them accessible to other files when we explicitly export these values with the export keyword.

[00:00:36]
And we can then import them in other modules with the import keyword. So it's nice that when values aren't explicitly exported, they're actually private to that module. For example, here if we have the secret variable, since we didn't export it, it's only available within that module. We cannot import it in other modules, it will just stay in there, so it's encapsulated.

[00:00:59]
We kind of have an idea of having private variables within that module. Now, normally when we used to work with JavaScripts, maybe we would import a script like this. So we have a math.js scripts or a file that contains some mathematical methods. And then we also have the index.js file, which then uses these.

[00:01:20]
And this is totally fine, this is how JavaScript works. And we can first import this math.js file and then the index.js file, and index automatically has access to everything that was written in a math.js file. That happened because JavaScript uses something called an implied global. So anything that we defined in this file, for example, divide, is actually also accessible on the window.

[00:01:44]
We can just do divide 1 and 2. Now, if we had any secret values, it was just hard to do that without modules. Now, ES15 or after ES15 we can actually use built-in modules, and we can use this in two ways. So if we're just using the HTML tag, we can add the type module to this, which then turns it into a module, meaning it encapsulates everything.

[00:02:08]
So you can see here that when we tried to use sum in the index here, it says sum is not defined. Because it's a module and it hasn't been exported from the module, it is private to just that file. Whereas if we didn't use the type module, you can see that it works just fine, but this is not always the expected behavior.

[00:02:25]
Besides HTML we can also use modules in node, and there are actually two ways that we can use this. Either we can use the mjs extension to a file that should be module or we can just use the type module in our package json. So for example here, you can see that we've added the type module to our package json, which allows us to use all this module specific syntax like import and then export from math.

[00:02:48]
So here if we now run index, you can see that we were able to use the sum, subtract, divide and multiply. It also shows that if we had a private variable here like com secret and we imported that in our index file, secret. And we again, run this node index, you will see that it throws an error because the requested module doesn't provide an export named secret.

[00:03:14]
So only within the module can we actually use that, we cannot use it in any other part of our application. Yeah, so the tradeoffs to the module pattern is that it's super easy to encapsulate all these values within just that module because we have those private values by not explicitly exporting them.

[00:03:31]
And then we also have these publicly available values by exporting them. It's also easier to reuse certain modules. If we want to reuse certain parts of the code, we don't have to repeat ourselves every time, we could just create a module and then import that. All right, so the first challenge is, we see this large index.js file that uses all these mathematical methods, and in here we're using it.

[00:03:55]
So the challenge is to split this up into two modules. So we have the math.js module and then the index.js module, which imports all these math methods in order to log them like this.