Hello, guys.
Good to see you back once again.
I'm back with a new tutorial related advanced JavaScript and in this tutorial we are going to learn
what is modules.
Let's try to understand modules with graphical pictures.
Suppose we have two JavaScript file file one dot js and file two dot js.
And in file one dot js we declare some variable, create some functions.
Also, we create some classes and now I want to use this variable function and classes in file two.
It is not mandatory that I am going to use all of these variables, function and classes.
I want to run any particular function, otherwise I want to call any particular variable for that JavaScript.
Introduce modules using modules.
We can use JavaScript function variable classes in other files.
It's increase our code reusability and it is very easy to maintain.
Also it reduce HTML page loading in our file one dot js.
We have lot of functions, but I want to decide I want to use only one function.
Then I'm going to include this function in our file too.
Then we can link this file to with our HTML document.
That's why our HTML file become so fast in JavaScript module.
It's come with two functions.
First one is export function and second one is import function.
So let's see how we can use these two function in our code.
As I told you, we have to tell two file file one dot js and file two dot js in file one.
Here I declare a variable name, a function hello and a class which is user.
And now I decide I want to use name variable in file two.
I don't want to use hello function and user class.
For that we need to use a keyword and the keyword is export this export keyword.
Give this variable a permission that we can use it in other files.
And whenever we need to use this variable in file two, then we need to write a special statement,
something like that.
At first we need to type import keyword and then we need to use curly braces.
Then inside the curly braces we need to pass the variable name which variable I want to import from
file one dot js file.
Then we need to type from and after that we need to pass the file location from which file I want to
import this variable.
And if you notice you can see before file one dot js.
Here I use some special characters.
Dot backslash.
Whenever we use modules we need to provide our file path like that.
And you need to remember this.
And now I decide I want to use the name variable in file two.
We can use this variable as like other variables we can print it in our console.
Also we can print it in our document.
With that we can perform calculations at the same way if we want to export this function.
Yes.
Just we need to type export keyword before the function name.
Then we can use this function in file two dot js file.
Here just we need to import the function import inside the curly braces.
Just we need to pass the function name.
Not any parentheses.
Otherwise curly braces just function name.
Then we can use this function like other functions.
At the same way you can export this class and you need to follow the same procedure to import this class
from the file one dot js.
Then we can create objects using this class.
And if you want to import variable, function and class at once, yes, you can just after import inside
the curly braces you need to pass the variable name.
Then you need to use comma.
Then you need to pass the function and class name.
Then you don't need to type multiple import keyword.
And now you want to import this JS file in your HTML documents.
For that just you need to do something.
But inside the script tag you need to provide the type type module.
Just you need to declare that this is a module file.
Then as source you need to follow the relative path dot backslash.
So this is the introduction tutorial of module.
In the next tutorial we are going to start the practical.
So thanks for watching this video.
Stay tuned for the next tutorial.