Hello, in this JavaScript video, I am going to show you modules, modules allow you to essentially make your code a lot neater, have lifted functions in different files. And instead of you know, having the source includes right here, these tags will have, you know, something similar, but the type will be slightly different. So it'll be not all immediately been available, you can just import very similar to like in C or c++ where you do a hash include of what you want in that file. So the reason I'm doing the on an online ID compared to something a bit more local is that the import and export module functionality isn't like quite fully supported in web browsers yet, but it's still very, you know, important these often come in. And the one of the best ideas too is code sandbox. io.
I love it because you can easily just create stuff, it's free, you can sign in and get more functionality. You won't be an upside stuff. But also, I can easily create extra files, Doug got these two JS files created, they just got the use script tag, nothing new nothing Apart from that, what I need is, I also need to include the include custom j s file, do that by doing SRC, and perform SRC dot j s. The only difference is you can you know, sometime prototype or text JavaScript for this, I haven't bothered. But the type of this is module, so bear that in mind, this needs to be a module type. And now, in custom j s, I'm going to create a function. I want to call it Hello, world.
And in here, I'm gonna do a simple console log Hello And in index js, if I were to just call that function, let's see what happens, says, Hello world is not fine. And even though we've defined it here, and we've put this line before this line, because it's a module, unless we import it, it will not work. So the key thing that we need to do to import it, firstly, to export it from here, so let's do export. The beauty of this, you know, sort of route is anything, let's say, that's part of this file, but you may not want it you know, you have all the files, you just don't export. So export. And, you know, save that.
In here, we need to import it. import the bracket, where the word important is hello world, gone. And that is the file or the file location, and it's in the same folder, index dot j s, we can just put custom dot j Yeah, and this still won't work. Let's say could not find dependency. And the reason is you need to do dot forward slash always. And now as you can see that is working that out, it doesn't show it.
But if I do that, we don't have this hello world function implemented anywhere in here is in the custom j. s file. That's just something to bear in mind. If you're importing multiple modules, even as comma, then, you know, name to name two or three, for example, things that having to do multiple lines. For modules, they're all from the same file, you can either do something like Asterix as well, which we'll, we'll do it something along the lines like that. But again, it's not fully supported in everything. And you can think of every single thing but hello world, that's how you use the import and export modules.
So just bear in mind that it's a cool thing to use, but it's not fully supported, but I think it's something With knowing exactly part of the new e es six JavaScript, PR any questions, feel free to drop me a message and as usual on a forward to seeing you in the next tutorial