Javascript Modules | Export Import Syntax for ES6 Modules

hello and welcome today we are exploring javascript modules that help you organize your code into reusable files let's get started hello and welcome today we're talking about javascript modules javascript modules were introduced with es6 in 2015. before we start typing some code we need to cover some basics about modules they're usually used to export different sections of code from one file to another and of course after that code is exported you import it into another file and these sections are usually functions or classes and we'll have examples of both today and to do this in a dev environment you need to have a local server running you can't just load your files from say a windows directory and have modules work so let's look at an example of that so i have the page open here and you can see i have loaded it directly from a folder on windows and you will get an error like this this is a course policy error and that is cross origin requests and they're only supported for protocol schemes like http and really that just means we need to have a server running so you can see i have a server running here and this has our local ip address 127.0.0.1 and the port number and then the html file and i'm doing that with the live server extension in visual studio code and you can see right here it's running on port 5500 and you can add the live server extension if you're not already using it by typing live server in visual studio code in the extensions and finding it right here and of course you can install it and then enable or disable and it's pretty much as easy as clicking a button to launch the server and after you've launched it of course you can click it again to close it and that will get you running with a local server for development and so that is what you need to do to use modules also looking at the html file in your script tag here we go where we load our main js file you also need to have type the type attribute type equals module and that lets javascript know we're going to be using modules now when you enable this type or module it does a couple of things one it automatically implies or applies the defer keyword so you don't need to defer a keyword this is when you say go ahead and load the dom and then go ahead and load the javascript so in the past we have loaded our script tag maybe right below or right before the closing body tag and that would let the rest of the page load first or we have put it up here and instead of having this module type we have had the keyword defer which accomplishes the same thing but what you want to do now is just have type equals module that will not only tell javascript that we're going to use modules but it will also say use defer at the same time without you having to add the defer keyword the other thing using modules does is immediately applies strict mode to your javascript and you could do that by typing use strict in quotes at the top of your file like this anytime you wanted however by using modules even without typing this in your file strict mode is applied in your javascript okay with that housekeeping out of the way let's go ahead and make a module so what we want to do is create another javascript file and i'm going to create one called guitars.js and in guitars.js i'm going to add a few functions very quickly we'll have a playguitar function and i'll create arrow functions here and this one's just going to return playing guitar after the play guitar function we'll have one called shredding this would be like loud rock guitar and will return shredding some licks when you're playing cool stuff on guitar they're called guitar licks and then at least in rock guitar now there's country licks too probably some other styles as well and then we'll go with plucking which is kind of the opposite of shredding this would be more like plucking the strings with your fingers or something like that and we'll say plucking the strings so now we have three functions in our guitar js and we can export these functions for use in another javascript file and every file can have or every module can have one default export so we can say export default and we'll choose our play guitar function and now it is the default export for this guitars js file but we can also export the other functions and we can do that by using curly braces saying shredding and plucking and this will export all the functions that we've just created but this is just one way of exporting those functions we can also do this in line when we create the functions and that would be done go ahead and comment these exports out that would be done by adding it directly in line with where we export the function now here i'm going to use the function keyword i have export default function and i'll go ahead and put that back because that's how javascript likes to do it when you have the default export however here i can just say export and go ahead and have const and export plucking now we have exported all of those inline and we get the same result again play guitar is the default export for this file and then shredding and plugging are also exported so now that we've shown how to export different functions let's go ahead and import those into our main js file now we can import the default that we set in our previous guitars.js file simply by doing this typing import and then name the default function let's play guitar from now i have dot slash and then you can see guitars pops up as an example here in vs code so i'll just choose that put js after it and that is a relative path if we eliminated the dot that would be an absolute path i always do it with the dot for the relative path okay so we're importing play guitar from our guitars js file and then i can log to the console our function play guitar i'll save that and we get playing guitar in the console that is the default export now what about the other exports we have shredding and plucking so we can import and then use curly braces and i can specify shredding and i can specify plucking and then say from once again dot slash there's the guitars file i'll save that now we'll do a couple of more console logs just to make sure those functions work as expected and we'll change this to shredding whoops didn't type shredding correctly there we go and then of course plucking finger style guitar save that and now we've got all three in the console now we can rename these functions and this is important because say you're working on a team and two of you create functions with the same name well you wouldn't want to import those into the same project there would definitely be confusion so let's import shredding as shred and let's import plucking as a finger picking kind of a longer name but it's descriptive at least so we'll put shred here and then here we'll put finger picking we save and we get the same result so you can rename those functions as you import them you can actually rename them as you export them but doing it as you import them is probably much more common now let's look at another way to import these functions i'll get rid of the two imports we have and we're going to import all and then we have to name all so i'm going to name that guitars and then it will be from of course the guitars js file now what happens when we import all as guitars well you have to treat that whole name space guitars more like you would a class so in that instance i guess to call this function we kind of call it like we do a method we're going to use dot notation and we'll say guitars dot play guitar but we're going to have a problem and i'll show you what that is too let me save this and just apply it to these others now of course we haven't renamed the others and they're in lies they're in lies part of the problem and this problem is this was plucking this problem is we can't name these things we just imported all so they have the names they're given in the previous file and we did name this play guitar but watch what happens when i save this we got an error guitars dot play guitar is not a function why is that let's look it's actually named default that's what we've exported so if we do it this way and we have a default function we're exporting you would have to name default to call that default function and now they all work and that seems kind of weird doesn't it so i would recommend if you're doing this import all with the namespace maybe just not having a default and then we'll save this and of course we'll have an error again we could come back and name our play guitar function and now it works as intended so you don't want to have a default unless you're ready to just name the default and that's kind of confusing because what if you imported two files and they both had a default for example of course that would be differentiated by the namespace but you would still be calling two things named default which could kind of get confusing so think about all of those things as you export and import and rename things it is oftentimes easier to import all but then the names in the in the other file that you're exporting from really have to line up because you're not renaming them when you import all let's look at one more example of imports and exports and this time we're going to create a class so we'll create another new file and we'll call this user.js and now in this file let's create a class so we'll say export default class user now we need a constructor or class and our constructor is going to accept an email and a name and we'll use the email as an id so we'll say this dot underscore id equals email and then we'll have this dot underscore name equals name and now let's add a method to our class and this method is going to be called greeting and we will return a template literal string we'll say hi my name is and now we can put this dot underscore name right there in our string and then we'll finish that and we're pretty much done with our class so we've got the user class it's got a constructor that accepts an email and a name and it has one method where it returns a greeting so now we'll come back to the main js file and we'll import this class and we'll say import user because it's the default we don't need to use curly braces from dot slash and i've got user.js okay now that we've imported that let's go ahead and create an instance of the class so i'll start a variable called me and i'll say me equals new user oh yeah we need to pass in i'll just say email email.com and pass in my name dave and now we've passed in the parameters and we've got our new user so we can log to the console let's take a look at that new object we've created the new user object named me and you can see it here in the console it's user as the underscore id equals email at email.com and the underscore name equals date why do we use the underscores if you've watched my video on classes you know the underscores used in the constructor mean hey don't access these properties without a getter and a setter usually that's what that means they're intended to be private even though of course in javascript they're not really private however private variables i'm sorry private variables private properties are being added to javascript as we speak so that may change very shortly so we've logged that let's go ahead and log the greeting as well and we would need me dot greeting and we can see we've imported our class just fine and we've created a new object with it and that object we can log the whole object to the console and we've logged the method greeting that works as intended as i mentioned imports and exports became available in javascript with es6 in 2015 so let's look at what support we have for that at can i use dot com i'll close dev tools and let's type in module and there we go javascript modules dynamic import loading javascript modules dynamically using the import syntax and you can see there's good support at 92 percent or even almost 92 and a half percent in the us now that's not a hundred percent but that's pretty good it doesn't go clear back to internet explorer and i hope you never have to do that although occasionally some of us have to for job requirements also this uc browser for android has about 1 1.24 globally and it doesn't support it but overall 92 is pretty good however usually modules are used in a project and i can go back to where we were with our live server here we go back to devtools and that's as expected okay so usually modules would be used in a project with a tool called babel that can transfer javascript like the newer code the newer modern javascript can essentially translate that over or transpile that into older javascript syntax that will work in older browsers and this is often time used along with a bundler like webpack or parcel and those things bundle your code and can use babel along the way to make it into older javascript that older browsers can read and will bundle it all into one file so they'll read all of your modules and package it all together in a big bundle hi i'm dave and i hope you enjoyed this tutorial remember to keep striving for daily progress instead of perfection subscribe to my channel and ring the bell to be alerted when i post new tutorials i'll see you next time

Channel: Dave Gray

Views: 1,926

Keywords: javascript modules, modules, module, js modules, export syntax, import syntax, export import, export import modules, javascript export import, es6 modules, javascript import, javascript export, javascript import export, es modules, javascript import module, javascript import file, es6 modules in browser, javascript export default, javascript export function, javascript export module, javascript import export tutorial, es6 modules import export, import syntax es6

Id: Q3SBogjUfMk

Length: 17min 13sec (1033 seconds)

Published: Mon Nov 02 2020

Reddit Comments

[u/gokulkrishh]

Good one u/DaveOnEleven!

[u/DaveOnEleven]

Learn Javascript Modules and the ES6 Module syntax to import and export modules in this Javascript tutorial. Javascript ES6 Modules help you organize your code into reusable JS files, functions, and classes.

Subscribe ➜ https://bit.ly/3nGHmNn

✅ Quick Concepts outline:

JavaScript Modules

(0:00) Intro

(0:30) ES6 Module Basics

(0:42) JS Modules are only supported on servers

(1:30) Use the Live Server extension in VS Code

(2:04) The script tag with type="module"

(2:22) No defer needed

(3:15) Strict mode by default

(3:40) Create a Javascript Module

(4:55) Export default

(5:15) Export { firstItem, secondItem }

(5:45) Export inline

(6:35) Import the default export

(7:23) Import { firstItem, secondItem }

(8:04) Rename imports

(9:03) Import the full namespace

(11:58) JavaScript Class export and import example

(15:02) Current browser support for modules

Was this tutorial about JavaScript ES6 Modules helpful? If so, please share. Let me know your thoughts in the comments.

Javascript Modules | Export Import Syntax for ES6 Modules: https://youtu.be/Q3SBogjUfMk