JavaScript Modules with Import/Export Syntax (ES6) - JavaScript Tutorial

hey guys hey going in this video I want to talk you through and show you how to use native JavaScript modules so basically they allow you to split up your phone into JavaScript code into many simple components or modules which of course then allows for easier maintenance and better file organization so we've seen it before in other languages all tools such as nodejs with the require functionality or even something like web pack so now it's available natively on major browsers excluding Internet Explorer but aside from that the browser compatibility is actually quite good it's supported in Chrome Firefox Safari and edge so it's quite good but unfortunately you won't see many applications or websites actually taking advantage of a native JavaScript modules so in this video I'm going to show you how they work and of course how to actually use them in your own applications or projects so let's go inside the text editor right here I've got that index.html file and it's quite it's quite basic and not much going on so far so - of course a demonstrated JavaScript modules we're gonna need some JavaScript files so let's make a new directory inside here and call this one J s inside here we can make a file called main J s this main J's file is gonna be essentially the main entry point for the application and this one right here is going to be importing features or functionality from other JavaScript files so with that being said inside the index.html file we need to simply include a single javascript file and that is going to be the main J's file right there so we can say scripts source for dot /j us and then major jeaious so very importantly we need to also say type as being module without type module we won't be able to use the import and export statements which are essential to JavaScript module so make sure you have type equals module inside your script tag okay so now let's go inside this main J's file and import some functionality from other JavaScript files so we're going to need some other files to actually import so let's make a new file here called this one utils J s which is going to contain a few utility functions okay so for example let's define a function that called double it'll take in a number just like this it's going to simply return and the number multiplied by two so essentially it's gonna be doubling a number so how do we access this function right here from this main J's file it's actually quite easy we simply say export function double so now with this export keyword this is basically saying that any JavaScript file which imports the utils J's file is going to be able to use the double function so basically the double function is going to be accessible by any importing file with that being said we can go inside this main J's file and of course import that function so I can say import then use curly braces and I can say double so specifying the function name double from duck ford slash utils dot J's so a few things to note here of course the use of braces right here also I'm using the forward slash for the actual path name and as of 2019 in July this is essential to native JavaScript modules also along with that is the dot J's extension you might be used to seeing something like a utils from Nijs but unfortunately in the native JavaScript modules you need to actually specify the Jas file extension so now this one here means that the double function has been successfully imported from the utility is far so now I can simply say for example console dot log can call the double function as normal but I can say for example 5 so 5 times 2 is 10 so if I save this and refresh we should see turn the console refresh this and of course we get 10 right there so it's working just fine and that what there is basically how JavaScript modules work you simply export some features and then you import them in a separate file ok so you can also export other things like for example if I was to because to say export console name equals dumb it's going to work just fine so you can export constants regular variables functions classes objects basically whatever you want ok so now I can then say here I can say comma and then specify name and now of course I can then say console blog name and it's going to work just fine I'm gonna save this and refresh and of course we get Dom right there ok now a different way to export your features is you can actually get rid of these to export right here and you can instead say for example export then using the curly braces once again you can say name comma W so now with the single export statement you're able to export these two features right here and this basically does the exact same thing as the previous example so now this code should work just fine I'm gonna save this and refresh it once again and we get the same result alrighty so back inside here and you can also rename your import or give them aliases so for example if I want to use the double function as something else I can say ads then I can say utils double and this helps you of course eliminate duplicate function names if you have multiple imports or multiple modules being imported ok and then I can simply change this to be utils double instead of double I'm gonna save this now and refresh one more time and we get here done the same result of course and if all to try and use the double function from earlier it's not gonna work so I'm gonna save this and refresh once again and now we get here double is not defined okay so that is how to rename your import now you're also able to import all of your exports at once without specifying obviously the name multiple times so for example if your module exports like 50 things you don't want to have to say comma this then comma this come of this you can simply export everything or so I'll import everything at once by simply saying import asterisk as utils for example so now basically you tells is its society our utils is its own sort of like namespace containing all of the exports from this utils module so now I can simply just say here utils then dot so we can see here I've changed this flap to double so now we can see it's actually quite clear where this function is coming from obviously it's the utils import up here so I'm gonna save this now and refreshed and we get the same result and personally I like this style of importing the best because it's actually obviously are quite clear where the functions or your constants or whatever is actually coming from okay so and that is that one right there I now want to talk about what's called a default exports so let's go back inside the module and let's give it of all this stuff and we're gonna instead say export deep or function we can say for example say name this will simply just console.log and I'll say name like that so this export default means that this function is the default export for this module so now to actually use this function horse also by the way you can only have a single default export down in a single module so only one of these but of course multiple exports okay so so actually use this function in this file we have two options we can say import default as then for example a nice a name well this is say something like a bottle make it different right so default as bottle from utils jeaious and now bottle is that function so I can say for example bottle just like this so I'm gonna save this and refresh and we get of course in the console done okay now more commonly you'll see this instead you will see let's just say for example bottle from utility so now we're saying import bottle from utility is bottle is taking you know the place of the default so now bottle is the same thing so bottle is the function right there I'm going to save this and refresh and we get done right there so those are your two alternatives for doing your default exports so essentially this import bottle from utility is it's the same thing as saying import default as bottle okay so I hope that makes sense cool so that is basically you know the main features or you know how to use modules in JavaScript and I now want to talk about one more thing and that is called aggregate modules well how to aggregate your modules so aggregating basically means you want to sort of have multiple modules available from a single module so for example I'm making new module right here I'm gonna call this module helper jeaious so now inside help of a jeaious i want to export a few things just like normal for example I'm gonna say export function let's just call this one water this will just say console.log just like this so we have this this export in this help Raj is our then I'm gonna go into this utils a J's file I'm gonna then say here export okay export water from Duff boss slash helper J s so this is different because of course we're saying export then using like an import style syntax so essentially we are making this water an export of this utils J s file and the water is coming from the help address okay so now inside this main Janus it works the same way I can then say import water from utils jeaious and that right there is aggregate modules or aggregating modules we're essentially making a bridge between you know this man jeaious and this helper through this utils jeaious we're taking the export from this file and making an export of this file okay I hope that makes sense and now I can then say water and it's gonna work just fine I'm gonna save this and refresh for one last time in this video and they get water right there and that is the basics of how to use JavaScript modules thanks for watching guys and I'll see you later

Channel: dcode

Views: 71,194

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, into, english, with, example, examples, developer, lecture, recording, how, to, web, website, app, application, js, javascript, es6, new, features, import, export, module, modules, library, libraries, require, default, function, object, class, classes, native, alias, importing, .mjs, commonjs, webpack, front, end, front-end, browser, compatible, compatibility

Id: s9kNndJLOjg

Length: 12min 37sec (757 seconds)

Published: Mon Jul 08 2019