Transcript from the "Modules" Lesson
[00:07:15] But in doggo fetch, since we have this module, I'm not able to access any of these variables that I declare in here, they are local to the scope of the module. So again it's kind of like that module is like this limo with tinted windows that Bart Simpson can't see into.
[00:07:35] So one of the other differences, other than top level await between modules and scripts is scope. Now, I said earlier that the whole reason modules exist is so that we can split our code up into multiple files. But if we can't see into the scope of a module, how can we use code from another file in our file?
[00:08:16] So export from a module is sort of like exposing a variable or a value, whatever it may be. It may be a constant value, might be a function that you want people to be able to use, might be data, it might be all kinds of stuff. So export what it does is it says, hey, from this module, I wanna pop some values up the roof of the limo here so that other people can see them if they need to.
[00:08:45] And once we have a module with some code where we've exported something, we can in another module, import something that the first module has exported. So that's how we can sort of take advantage of code that is written in some other module. And we use our curly braces this looks very much like the kind of destructuring syntax that we saw before.
[00:09:14] Because when we export something, we're going to name certain value, certain variables essentially. Essentially what we're doing is creating an object of exports that has some properties on it. In this case, it has a property veryUsefulFunction that points at a function that doesn't do a ton, but is there.
[00:09:35] And when we import, we sort of do a kind of destructuring on that, and we say which variables, which properties, or which exported things from the other module we would like to pull in to this module that I meant. So what we end up with, is a way to kind of talk between modules via this import and export statement, sort of opening up the sunroof of our tinted windows limo and our scope here.
[00:10:33] So let's take a look at this. Even in our local Doggo Fetch that we were working in, we had one big module. That's how we were able to use top level await. But in this version, if I inspect what's going on here, I'll notice that now in this version, I have two script tags.
[00:10:56] Let's take a look at the codes. So I'm going to save this as modular, and go over to my editor and open it up. So we can take a better look here. Okay, so this is the same program, it's doing the same thing, I still have my functionality that I had before.
[00:11:21] But if we scroll down we notice that there's something a little bit different. So now I have two script tags in my file here. And one is the same that we had before, but this time I don't have any of my kind of little helper functions there that were pulling in random elements from an array or shuffling an array.
[00:11:47] They're no longer in the module that's written in my DoggoFetch.html file, what I'm doing is I'm actually importing them. What I'm doing is actually importing them from another module. In this case, it's called 3-utilities.js. And I'm getting that involved here via this other script tag that's saying, hey, there's another module that I care about for this program.
[00:12:45] And what we're doing is exporting the things that we want people to be able to use from this other utilities file, just because we don't want them to have to be cluttering up our main program. These are utilities, they're not super important, we just wanna be able to use their functionality.
[00:13:06] We don't want to have so much code in our one module. So what we're doing is we're exporting three of these functions, getRandomElement, shuffleArray and getMultipleChoices from this utilities module. And then in my main Duggo Fetch module, I am importing those using that destructuring kind of syntax and this special import statement.
[00:13:32] And so now I'm able to call those functions like getRandomElement for example. Or shuffleArray or getMultipleChoices I'm able to call those functions from within my module so the whole thing still works. So this is how you might see code split up in different places. So now there's a few more things we could say about modules, for example, the reason that I'm showing you these files hosted on anjana.dev here, is that if we were to try to do this in a local file, the browser won't allow it.
[00:14:17] And this is because of some browser security policies around how one file of code is able to load in information from another file. So if I were to try to do this in my local file, in my DoggoFetch.html that I'm just opening at a file URL in my browser, loading another module wouldn't work.
[00:14:44] It only works, if we're hosting them both from the same place on the interwebs, let's say. So this is another difference between modules and scripts. And there are a lot of other things that we could say about modules, and of course, MDN has a whole bunch more information about them.