main.js file, but it would be nice to break those out into separate files and import only what we needed in the files that we needed it. Now first, let's create a separate file to hold what we want to import, like a users array. So let's go ahead and create a new file, and we'll just call it users.js. And in here, keeping with the theme of the entire series, we'll create a users array, consisting of a couple objects. And we'll also define a simple variable as well, and we'll call it currentUser. And we'll set it to something like 2. So it should be this user here. Now this is the file that we're going to be importing into our main.js file and other js files as well, potentially. So how do we get out the users and the currentUser from this file into another file? We do that by using export. And it expects an object consisting of the items from this file that we want to expose to the module system, or those that we want to be able

into another file? We do that by using export. And it expects an object consisting of the items from this file that we want to expose to the module system, or those that we want to be able to be imported from other files. In our case, that's everything in here. So we just specify users and currentUser. So now if we go back to our main.js file, we can import both of those by calling the import statement, followed by curly brackets as well, and specifying which of those, if not all of them, we want to import from the file. So we can specify users and currentUser. And then we use from and specify the file we're importing from. In our case, that's just users.js. So okay, how do we go ahead and use this? Well, we use it just like we would if the users and the currentUser variables were in this code, were in this file. So we get output to the DOM, the users' currentUser, and their name. So let's head into our browser and see this working.

the currentUser variables were in this code, were in this file. So we get output to the DOM, the user's currentUser, and their name. So let's head into our browser and see this working. Nope, we're not seeing anything. And in the console log, we get this error, cannot use import statement outside a module. And that's because we need to make one distinct addition. So back in our source code, if we open up our index.html file, where we're importing our main.js script, we need to specify that the type is a module. This tells our browser to use the module system and allow importing of scripts into our main.js file. All we have to do is save and then back in our browser. Oh, we're still getting one more error. And that's because I just said users.js. But I need to prefix it with the actual relative directory. So from the current directory users.js.

Oh, we're still getting one more error. And that's because I just said users.js. But I need to prefix it with the actual relative directory. So from the current directory users.js. Okay, one more time in our browser. Now we can see that the name of our second User is appearing here as expected. One more great thing with modules is that if we're only exporting one thing from it, we can specify a lot less. So let's create another file that we'll be exporting something from. And we'll call this helper.js. So let's say we have a function called helper. And what it does is just take in an array. And it just returns that array with all of the elements uppercase. So we can use map for that and specify that each item is to uppercase. Instead of having to export helper and then import it in our main.js file, we can instead just specify export default helper. Specifying the default as our helper function.

Instead of having to export helper and then import it in our main.js file, we can instead just specify export default helper. Specifying the default as our helper function means that we don't need to specify each individual attribute since only one is being exported. So back in our main.js file, if we want to use that, we just call import helper from helper.js. So no curly brackets needed, because we're exporting default as just the one function. And because what we exported was a function, we can use it like a function. In order to demonstrate that, let's pull all the emails out of this users array that we're importing from the users JavaScript file. So userEmails is equal to users.map(user => user.email). And then we can just output this to the DOM with what we have above. Comment out this line here. And in the browser we see we have our email addresses coming from our users and capitalize from that helper.

just output this to the DOM with what we have above. Comment out this line here. And in the browser we see we have our email addresses coming from our users and capitalize from that helper function that we created and imported into our main.js file. And actually we can clean that up even more. Because we're using export default and we're only exporting one function here, we can just call export default on the actual function. So export default, and then we just provide it the function in arrow notation. And this works just the exact same way. So I think that's about it for modules. It's nice to be able to break apart code and natively export and import pieces of it into other areas. In the next video, we'll wrap everything up that we've learned so far, and I'll provide you with some steps you can take to continue learning.