JavaScript ES6 Modules

yes six modules are the greatest thing that's come to JavaScript in a long time for keeping your clothes clean and maintainable and today you're going to learn everything you need to know to get started using them now the main idea behind modules is allowing you to import and export different sections of code from different files into other files which allows you to break apart your code into more smaller grained files which makes your code easier to understand and reason with later on when you have to change it so to start I have a simple class called user that has a bunch of information about a user it has a user class and two functions for printing the user's name and printing the users page now what we want to do is export the different information about the user so that we can use it instead of our main CAS function right here which is being imported inside of our index.html file as you can see here so if we go into our users file there's two different types of exports we can use there's a default export and then there's a standard export so what we want to do is export this class of user as the export default and there's two different ways to export things the first way is to define it at the end of your file here for example so we can say export default user and this is going to export the user object as our default thing for our user J's file and then we can also use the normal export down here so we say export and then inside of curly brackets we put other things we want to export so for example we can export print name and we can export print age and now this file is exporting this user class as well as these two functions but the syntax is a little bit clunky for how to export things and I prefer to export things in line so for example before we define our class we can just put export default if I can spell it properly export default and that will actually default the export the user class without us needed to do it at the end of the file and we can do the same thing for our functions we just put normal export instead of export default and there we go everything in our file is being properly exported you just never remember that you can only default export one thing so usually it's going to be the class that your file is defining if you are defining a class in your file so now let's actually import these objects in our main CAS all we need to use is the import syntax so we say import and then we say the name of the default thing that we want to import in our case it is user and then we just say we want to import it from so we can say from user J s but when you're importing things in JavaScript you need to make sure that you put in front of it a dot slash if you're wanting to use relative paths or just a single slash if you want to use an absolute path so we're just going to use an absolute path in our case either one would work and if you save that you'll notice we get a problem and it says that we have uncaught syntax error unexpected identifier and it's saying that it doesn't know what import is even though it should know it import is because import is part of the JavaScript syntax in the newer versions but we need to tell our index.html that we're using modules so in our script tag we just need to put type equal module here and now if you say that we see our error goes away and this tells our browser that we're using modules inside of this javascript file and by defining the type of module it also defaults our file to use the defer attribute for loading it and if you don't know about d4 and async attributes for loading make sure to check out my JavaScript video on d4 and a sync which is going to be linked in the cards in the description below so now that we have that working let's actually use that user object that we imported so we can just create a user we can set it equal to a new user and we can just pass it a name and an age which are the only two parameters it needs so let's say Bob is 11 and then just to make sure this is working let's just log out that user and as you can see we get a user age of 11 and name of Bob and we didn't actually define the user class inside this main file we've defined it in this user J's file which is not even being imported anywhere in our HTML but it's being imported in our JavaScript so we're able to actually use it and the great thing is if we don't want to call this user let's say we just want to call it U for example we can just change the name in our import statement to be U and then where we use a user just change it to you as well and if you save that it still works we still get a user being printed out this import allows us to change the name of the default imported objects but let's say that we wanted to import our functions instead or in addition to this class that we have for the default so to import non default things what we need to do is we need to put them inside of curly brackets as we did when we exported them so let's say we want to use we want the print name function and we want the print function so we just have to list the name of what we want to export or what we want to import and it has to be the same name as what it's exported as in this case if we wanted to change the name we would need to follow it by AZ and then the name we want so we can change this to be print username for example and now we can call the method using print username instead of print name so let's do that what's called print username pass it our user object and if you save that it will say user's name is 11 which as we both know is incorrect so I just need to change this to be user name instead of user dot age that's my fault so now that's working properly it says user's name is Bob and it's using that print username function that we aliased it as up here using as and then we can also use print age give it the user and you'll see user is 11 years old and that's working exactly as we want it to but if we don't want to import this default thing for example what we would do is we would just remove it completely and just put the other things we want to import inside of the brackets like this and that will work properly but we don't actually have a user object to print out so we don't really have a good way to test it but just trust me on this this is how you use the syntax to import things that don't have a default or if you don't actually want the default and that's all there is to using imports and exports they're not very well supported in modern browsers though only about 80 percent of browsers at the time of recording this which is at the beginning of 2019 support import and export features so what most people do is they use a tool such as babel to convert their import and export statements and other modern JavaScript features into older JavaScript so that it can be used in browsers that don't support these newer features since this type module is not defined in older browsers they older browsers will just completely ignore this script tag so it won't even render it if your browser doesn't support modules so there is another attribute you can use which is called no module and this no module attribute tells the modern browsers that support modules to completely ignore this script but older browsers that don't know about modules will run this script so it allows you to import different scripts based on if the browser supports modules or not so for example if we had another script that included all code from Maine jeaious and all the code from user jeaious into one file we could import that in here using this no module attribute and that would run in older browsers such as Internet Explorer 11 that don't support modules by default my advice though would be to use something like Babel if you want to use modules because Babel makes using modules so much easier and it's so straightforward because it will automatically do the conversions for you and you don't have to rewrite your code twice so I hope you guys enjoyed this video on es6 modules and learn how they can be used to break apart your code and make it easier to write and maintain in the future if you did enjoy this video make sure to check out my other videos on es6 related topics linked over here and subscribe to my channel for more videos just like this thank you guys very much for watching and have a good day

Channel: Web Dev Simplified

Views: 194,981

Rating: 4.9585218 out of 5

Keywords: webdevsimplified, javascript modules, javascript es6 modules, javascript import, javascript export, javascript es6, javascript es6 modules tutorial, javascript modules tutorial, javascript modules explained, javascript modules import export, javascript import export, javascript import export tutorial, javascript modular code, javascript modules easy, simple javascript modules, javascript modules example, javascript, es6, js modules, js import, js es6, js module, js

Id: cRHQNNcYf6s

Length: 7min 38sec (458 seconds)

Published: Sat Jan 26 2019