 I'm not sure if you ever use the modules before. I mean, when I say module, we're talking about JavaScript modules. Okay. So I'm going to go here and create a unit five, and we'll do a module demo version. We'll go to node. So here, say I'm going to have a protocol modules, and I'm going to also have a file, just my usual index HTML. It is at a module, I have my main JavaScript. Okay. And then maybe I have another script here. Maybe this is for like your functions script. Okay. So let's build the index first. I'm using two JS files, and this is quite common when you have, let's say you're in your main script, it grows so huge, right? It's go really big. And so what you do is you break it into multiple files. You don't want to have a really big file to run. So you can break it into multiple files. So let's say that I like to separate all my functions and put functions into another file. Okay. So instead of putting my functions here, I'm going to put in the functions file. So a JS file in this case is, usually it's called a module, even though we just call it script. So let's take here the functions. I have a function called getName. And the inside here, I have a, you know, a name variable for my name here. Okay. And then this is going to be turned a name back. So now let me collapse this side. And let me split in two, you can see better. Okay. So one functions over here. And then over here is to my main JS file. And I can use that function here. But before we do that, let's go to the HTML. So if you want to use both of those scripts, you have to import them in here, right? Script and what is important, I want to get the functions first, so I can call it, like I use the functions and then also need my other one. So let's duplicate that, okay? Oh, shift down. And this is the main script. So my main script, right? Depends on the function script and then and so on. So now, because when I load these two scripts into this environment, this name space, all of these functions in encode are available, right? Lost my other file, sorry. Okay. So they're all available in the same space as if I just, you know, write them right in here if I had this correct order. So that means when I load it, I'm able to access the functions in the main module here. So I can, you know, let's do this first. Let's do H1, so you can see here, module or demo. And let's say you have a button here, just to show your name. And then we'll output the name writing here in H2, okay? Yeah, we'll give it an ID, so it's just easier. Fun would be, okay? And let me style my body just to make it center. Really simple script to, almost there. Okay, let's see. All right, let's run first. Okay, so here is the result of that. Okay, just really simple page. When I click the show name, I'm gonna, you know, load the function and then display the name right below this button here. So back to the main script. So you wanna wrap this with the unload, right? Because you wanna wait until the load, the script is loaded, using the arrow function again. And then now, once I run the page in the browser, the functions module would have been loaded. And then by that time, when the main is loaded, I would have access to this function already, right? Okay, so somewhere down here, I wanna call that function. But first, let's target the button and the output first. Let's be TN is document yet, use query selector, shorter query selector. The ID is, I think it's the show, okay? And the other one is output, document query selector. The ID is output, okay? So those are my two targets, okay? So now let's attach the event to the button, at the end, add again listener, right? Event is click event. And then here, we just use the anonymous function, okay? Again, the arrow function goes right in here. When we click the button, I wanna get the name function. Okay, so you can put here, say, the name is equal to get name. You see that it's available here, right? I just call that function, I got the name, and then now I just wanna display that to the output. So output, we can just put the inner HTML equals the name. All right, so very simple like that. So let's give it a try and see if this works. Back to my browser. Okay, so here it is, I'm gonna refresh it just in case, and I load, so here's my name, right? So that's how you usually do, right? We have a lot of scripts and you want to load them. You wanna load them in the order that they come in. If this one is depending on the other one, so make sure that it loads first. Again, depends how you create your data. If it's a function like the way I have here, it doesn't really matter. Well, yeah, but usually you put in that order, right? So imagine if you have like 10 scripts, you need them. So you're gonna, it's gonna grow, right? A lot, okay? So instead of doing this way, you can use what's called modules. So with module, you have a single entry into all your JS files. What module does is it allows you to export this function or at least code to another module. So by the way, every script here you see here is self-contained only in this file. They are not available to this file. The way it's available here is because I expose it here. Okay, so the HTML, you know, expose all the function or the code inside its function so that this can access it if I did not have that in here, like that, okay? And if I go back and rerun my script again and you're gonna see that it doesn't work. And if you try the F12, it will tell you that getName is not defined, okay? So it's not available in this case, it's hidden. So how do you make it work? Well, one way is you put it here, right? And this will grow I showed you earlier. The second way is to make this into a module and you export this out. So whatever I have in here in this functions file, if I want to expose anything to the outside world, I use the export directive, okay? Export here takes an object and whatever I pass to this export will be accessible to the other module in where I can import them in. So here I'm gonna export the getName function and any other things I want. So here I'm exporting the function called getName due to export. And then on the main function, if I want to use it, I will just import it through the import directive. And then where is it coming from? So it would import something, something from and then here is a string that goes to that directory. So it would go to the functions directory and then the name would be just the functions of I think they're in the same file, same directory. If it's in a different directory, you would call, dot slash directory name, directory name slash function JS, whatever it is. Okay, so my script is called function JS. This dot slash, if you are not aware, it just means the current directory. If you don't do this dot slash, it treats it very differently. Okay, so the current directory, the file because they are in the same directory. Okay, so now I import what I need to import. Well, you have to know what you need. I need the get name. So whatever is placed in study export here, only those names will be accessible in here. Otherwise, you can't access them. So I have to want it as a get name. I use the same name. Now this name here has to be exactly the same name as this one here. If you call a name, if you call it X, it could be X, whatever it is, okay? And if you want to change it to something else, you can change it here too. Instead of just get name, you can just say use that as just get, right? If you do that, then this is the alias for this. So it's a shortcut. So instead of get name, I just say, you know, yeah. Okay, so let's see if this thing works. And it should not work because one step is missing. And I need to tell you why, but I just want to show you anyway. As you can see, it says, can I use import statement outside a module and the main JS one? What this means is that when you use a module in your script, it is the main module and you want to export this or use this in your HTML, then this script here, you have to change to the type call module. That's the requirement. If your main JS imports other scripts into your main JS file and you must change it to a module, otherwise it won't work. Okay. So now I don't need this anymore, right? Because I imported here. And let's see if this still works. As you can see, the error goes away. Let me refresh this and there it is. Okay. You see that it worked just like before. So now you see how powerful modules can be. I can have one single entry file and I can have tons of other files and I can import them in. I can import exactly name as is or I can rename it to something else. Okay. And if you have like two of them, say you have a constant pi 3414. I want to explore that too, which is put right in here, call it pi. Okay. So your main library, if I need pi two, you put here pi. Okay. And then now I can use pi as well. And just for fun, we could just say get name with a name plus space and then plus pi. And I should be able to show them both here. Okay. So export, export all you need. You can use some private. If pi is only used only inside this module, you don't need to expose that. It don't export it. What do we export it out? We'll be accessible from in other modules. You can also put the export directly here like that too. Especially different ways how to export your objects. If I do that, I don't need to do the here again. Okay. So this is useful for if you export multiple, this is for only individual ones like inline export. Here you export a list of all these objects. So either way you do it, it's fine.