Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
WHO ELSE HEARS GABE FROM THE OFFICE?!?! 😅
bro how to print those values in html page ??
bro how to print that values in index page ???
Awasome! thx!
Thank you so much for these
you are the best in the game!
that rare thing – a tutorial about modules which doesn't assume I already know how to use modules
many thanks for sharing your knowledge; totally got me up and running
subbed
Thanks man!
Thanks big onion. Good vid brother.
thank you so much♥
Angular pretty much does this we'll , structured and wondering how module l.ts handles it ah
These are the best tutorials on the internet, you are a talented natural teacher.
thank you soo much!
This channel is really great
Thank you! Very well explained! 💛
Great explanation
Man…. how does anyone get this knowledgeable. I've only been doing JavaScript for a month really intensively, but it's all getting mixed up in my mind. Does it get any easier? I'm really getting depressed with how little I know, but I'm not giving up!
Thank you!
Thanks for the hard work
Thanks man. This was helpful.
Neat and simplified Explanation :). Thanks.
Can we call any of the exported functions directly from within the index.html file? I tried and it doesn’t work 😢
Do all functions in user.js have to be exported?
teaching wrong. for isntance what u said in 2:30 wrong. it is best practice, it is not a must. it seems you are not familier with node's midule resolution system (ESM)
I get a same-origin error. SO says it does only work when using on servers. Did they change something?
Edit: I just tried it and with live-server it works
Great Explanation! Just a little question. while importing other function which are not exported by default are we destructuring objects? as we know everything in JavaScript exists as an Object. so does this mean these files are also imported as Objects?
Does this not work anymore? Not including type = "module" leads to an "import declarations may only appear at top level of a module" error, and including type = "module" leads to an "ambiguous indirect export: default" error?
You are always king 👑. Your teaching style is very organized!
it's ok kyle you just been watching too much stranger things bro
how to use export default for an array?
And how can I run the module from a normal script? For example, I want to execute "user" from "<script src="script.js">"?
But we could just add another script tag with src=user.js> and we dont have to use the import/export syntax. Everything will be available in the main.js?!
I've come to the conclusion that this guy is the worst teacher ever seen. He explains like a monkey with brain damage and whover says "HEY IS SIMPLE BEST TUTORIALZZZZZ" apparently is a mediocre dev that is satisfied by incomplete and mediocre explanations
As always, thank you so much.
+1 because you are so spontaneous that you include your own faults and recognize them. That places you and we at the same level, not better, not worse, but in different stages.
From the TOP project, I came!
isnt there necesary in html set scr type = "module"???