Welcome, ladies and gentlemen, today we're going to talk about module that these S6 feature, but
it's very, very useful and modules are not very easy to understand.
So how we did start and how we did how we will end up using modules.
Well, let me just show you something.
Before or since the beginnings of JavaScript, the developers tried to organize their code better,
so that's first we started using inline scripts and the inline scripts were here inside the index file.
Right.
But this is not good.
For even example, if I save this one, create lecture 11, by the way, link it here and go back here.
Oops, there you go.
So the inland script is working and we don't have to use external scripts, but this was not good for
the developers.
So they start to avoid using inline scripts because we want to have a separation of concerns.
We want to have the HTML structure and we want to link this with external files.
So that's why we use external files like I did up until now.
Right.
So I create a lot of lectures here.
If you see each and every lecture, there's a different file.
But I always say liying the last lecture here that I'm going to create the only other ones.
This is happening because I don't want to mess up the coat and I don't want to create something called
dependency resolution, so what is dependency resolution?
So the dependency resolution is when we are polluting the window object with a lot of variables or functions
that will come from the files that we are linking.
And imagine if some of the files are related.
For example, Deselected 11 will not be able to work, for example.
I'm just saying before something else happened in the lecture then, and that is not good.
So we need to organize our tax now.
The next part we did is to use TV.
So I haven't talk about this, but this is immediately invoked function expression.
And we used e.V. just to avoid window object pollution.
Right, because every function has its own scope.
Now, later, we use browser, we find this little little wizard, so browser wi fi allow us to use
common Gere's and to use module's right.
So I haven't talk about module's.
Don't worry, we will get there.
So before we used every now we can use browser Wi-Fi, then we can use something called -- and
Bable.
So what are these two here?
These two?
These three are actually pretty much what is the every one of the developers using.
So everyone in production, you can see all of it.
Right.
So -- is a bundler for JavaScript files, so bundles multiple files into one.
So instead of having 10 files like this, the Web bank will create will take all of this and will create
one bundle that JS file, usually it's called like that.
So now we will have instead of 10 calls to different files, we will have one file and that is great.
Right now, the bable.
What does the bable does?
The Babel job is very simple to convert the code that we have like this one.
Right, to convert this coat.
Back to S5, why?
Because some of the browser don't understand the code before E is five, they're not compatible.
So with Bable, we don't need to worry about all of these things.
So it will convert the six or a later code into years five.
It will.
It is.
You can use it right away.
No need to wait for a browser support.
And why I'm telling you all of this.
Well, because if I wanted to explain how modules are working, I should use -- and Bable, right.
But not now.
Today I can explain how modules are working because Browsr having support for that, or at least Google
Chrome.
So that's why you can go back here and you can just see what is supported.
So I'm going to use Google Chrome and I will tell you about how this is important and how we can use
it.
Right now it's very easy to to do now without Bable and -- or browser Wi-Fi.
So what do we need to do is actually here in this just to act type?
To be able to model now, the browser will know that this file will be a module file.
So we are dealing with modules, right?
Good, so let Treleaven actually will be our import module file.
Now, what else we need here?
Let's talk about module.
So we need to create three lectures here.
I'm going to create new file, not lecture's new files.
So I'm going to say module one that JS and let's create module two to that JS.
So this will be two module files in lecture 11 will be the file that we are importing these modules.
So what is module?
So imagine like this.
Consider a scenario where parts of JavaScript codes need to be reused, so when we want to reuse part
of code, we can put it in a module and we can later on use that module.
Now, modules organize our code.
Very good module can contain here pieces or it can contain variables and function in each module, we
can declare variables and function and we can export them.
But here we need to import them in order to use this module one, for example, module two.
Right.
So that is how it goes.
So the modules are nothing but JavaScript code that needs to be exported from that module and imported
into another one.
Right.
This is very good and reusable and easy for maintaining.
Imagine that we have like this file can be like 500 lines of code, but if we have modules, we can
split that input, 50 here, 150 in this module and 200 in other modules.
And that will leave like 50 or 100 here, only lines of code.
So the modules are very easy to maintain and it's very reusable.
Right.
So.
Let's talk about something now, exporting a module.
How are we going to export module?
The export keyword can be used to export components in a module export a module can be classified in
as a name export and default exports.
Let's start with the name export.
Now, name exports are distinguished by their names.
They can be several name experts in module.
So let's in module one.
Let's name this one
named Exports.
And let's create a variable called full name and let's put it here, Jack Reacher, nice.
Now here I'm going to create a function.
Let.
Get name equal, function nice, and this function will return.
But fullName.
Not to upper.
To upper case, so what it will do, this function will do.
It will take this string and it will make sure that its everything is in upper case.
Right.
And it's going to be returning and let set name so we can set the name function also.
But here it will take one parameter called new name.
Right.
So full name is will be equal to a new name now in names expert, we can.
Export several.
We can export several parameters here, right?
So how we can do this, we can simply do it in a couple of ways.
We can use names, export like this, export.
We need to use the export keyword and we need to use this curly black records and say full name.
Now, iConnect, I'm exporting the full name only, but I can export this.
Name.
Very first, let you use to get name, then to Sydney, OK?
So we can use multiple exports using the name exports, but do you think this is good?
So.
We can use a single line export keyword like this, so this is not my this is not it's not something
that I use, but I used a single export where we can put different variables in files that we want in
functions that we want to be exporting.
For example, export full name, comma, get name.
And certainly this is completely identical with this one.
I just export everything in a single line.
Now back to our lecture 11.
Right.
So how we are going to import.
So importing.
Named exports, right?
This was named export, so we need to import it here.
So for that, we need to use an import keyword now when importing name, export the name corresponding
to the corresponding components from the module one.
This should be a complete match, for example.
Let's start with this and one more thing.
All of the imports, it should happen.
And the top of the file, for example, if you have a piece of code here, we can just put it there.
We need to be on top of the JavaScript file.
Oh, good.
Now so we can use first name.
So it must be first name with capital like this first capital end or full name.
Doesn't matter.
It will not.
Otherwise it will not work.
Right.
So how we can import import.
Full name and get name, for example, right, so I'm importing to these two, the first two doesn't
matter.
We don't need to import third one if we don't want it.
So I'm saying, OK, we use curly brackets.
Remember that?
And full name and get name from.
And we need to specify which coming here, module one that J is now, if we use -- and Bable,
we don't need to specify these dodgiest extension by.
We're using bundlers, we're not using Bable, so we don't we need to use it, we just extension.
OK, now it's like this little bit different color because we are still not using it, so.
Let's call it like.
Full name.
Let's put it full name log.
Get name and let's use to get name, OK, save it.
Go back to your.
Vietnam is a function, OK, now full name is working, but get name is not working because Vietnam
is a function.
OK, I'll get name Jack Reacher.
Now, Jack Reacher is every thing is an uppercase.
Let me just do this one here so we don't think too much right now.
There you go.
Now you know how to import.
Name, name exports, right?
So what is this curly brackets, do you know?
Well, remember the structuring feature?
Well, this is where we can use it here, districting.
So this is how we are getting access.
But as I told you, the full name must have the same here.
Syntax.
I mean, same should be written.
Same as in here.
We can't do a full names, full names here.
And if you tried to save it, the requested module does not provide the expert full names.
Good.
So it's telling you that something is not right.
Now, that is how we can.
Important now we can also import it like this so we can import it line by line, but this is not something
that I do.
So what we can say, we can do it like this.
So we can import a full name, and if I comment out, this one should work.
Yeah, Jack Reacher and this, by the way, we need to get rid of that in line tack.
Right.
This is another what we can do, get name.
And now if I am common, this one, it will work, right.
So we can use a separate instead of one line.
But this is something that I don't really use.
So I'm just going to go back here and I'm going to uncommon this one.
Now, another thing is that we can use aliases.
Remember here I said the full name and get name this.
The naming should be the same as here.
But what if we want to shorten up this one so we can use aliases?
So how we can do this so I can see here full name ask F in get name as G.
Now if I see it they will not work.
Full name is not defined right.
Correctly because here.
Now we need to use F.
Let me just copy the whole thing, comment out.
Now, I need to use your F in here, G, right.
Save it.
There you go.
Now we can use the Eleusis here, so this is a short version of instead of using a full name, you can
use AV instead of using that name you can use.
Very good.
Now, one thing that we need to look at now is so we have done named experts that we need to do now
default expert.
And this is something that we need to work in the module to file default.
The fall export.
And now here we are need to create a couple of things, so let me.
Let's say Chris Evans, Captain America, right?
Let actor name and hearsay get name function, which is going to create function here.
So return Naem and.
Comma here and say set name, the set then will be again a functio will not it will take a parameter,
new name and name.
It will be a new name here.
Very good.
So.
For default export, we can't do it just like this, export to full name, get name, so we the default
export, we can just export this actor name object, we can do only one export.
And how this is done.
Well, let's do it together so we can say export.
Default.
You need to use the default word and actor name, so when we are dealing with default export, we need
to use the default keyword and to what we are going to export.
There can be one default export per module.
So this module can only have one export, not like this, the full name get name set name so we can
export multiple named things.
But here we can export only one thing per module.
OK, that's the difference.
So how are we going to import it.
So here we can say import
default export, know how we can do this.
So what we can say is I want to import.
We need to still use the key import and I will say actor name or we can use it.
Actor name in.
Doesn't matter, it's not going to change from and then we need to provide the path and this is module
to dodgiest member, we need to use the Geass engine and module to Dages does not provide actor name.
What about if we do it like this?
There you go now see it.
Can it be done with the with the brackets, right.
With the structuring thing.
OK, now let's think about that's possible for some reason.
OK, now how are we going to print out this?
So let's do this like this.
Let's say that this is coming from module one.
Or let's cut it from here and say Module one, full name, module one, oops, get name.
OK, there you go.
And you can put here.
So, yeah, now how we are going to cancel that log, so we need to do the module two now, I'm going
to say module.
To an actor named.
And I'm going to use this actor name and look what will happen, comma here, don't forget the comma.
So it will return me a function.
Get me.
OK, now I can say.
That get name.
So the actor name is Chris Evans, let's get rid of this space between before, right, so module two,
the actor name is Chris Evans, and actually we can do it a little bit like this.
OK, so there you go.
So one more thing that I haven't shown you is that we can use X asterisks on our named imports.
No, look at it here.
So I'm using we I've shown you a couple of ways how we can do this.
So I'm just going to comment about this part.
And this is what I usually do.
OK, so this is something that I will do in if you follow me on the other, of course, the bigger course
JavaScript course.
Yep.
There I will use this technique.
So I'm going to say import Asterix design, right.
As now we need to see what as module one.
I usually do that to know from which module is coming in.
I'm going to say from and I'm providing the path here, module one that is OK.
Cool, save it, but now if I say we're going to run a problem because and it's not going to work like
that.
So instead of using the aliases or full name, I can access them through module one.
That fullName.
Very good.
And I can see module one dot get name.
Right.
So I can access the function and I can access the variable using that syntax, very good.
Now I have Jack Reacher and Jack Reacher in capital letters.
How cool is this?
So we can use asterisks on our name imports so it can be imported onto an object by using the esoterics
operator.
Right.
Very cool.
So.
So there you go, you have a different ways how you can import things from module's now named exports,
we can export multiple things and in default export, we can export only one thing per module.
Now, somebody will ask me, what if I want to export these Chris Evans the name?
Well, we can use something like a mix of named and default export.
Well, for that reason, what we can do, I can say export and I can pass the name there.
OK, save it.
You should not throw you any error here.
But how we are going to do it here.
Well, one thing I haven't shown you with the default experts that these name.
And this it's a different convention.
I mean, so here we can use any name that we want, but here we need to use the full name, I mean,
get name as they were here.
Right.
We could not use anything else.
But here, I didn't show you that we can use actor names in actor names there.
Save it now.
It will not have you will not have any problem.
So when you have a mixed here named and default expert, what you can do, so how you can access them
here and how you can import them?
Well, you can import and I'm going to return back to normal here.
I don't like actor names because it's plural, but you can put any on even a it will work.
Right.
So it's not like here where it's sensitive.
We can't change full name with small and here should be full capital.
And right now I'm going to go back again to normal.
Now here, if I want to access the second thing that I export, well, it needs to be here.
And I'm going to say NI.
No, I can cause a lot.
And I'm going to just give it the name here and let's hope that will work.
Name save it.
There you go, module to name Chris Evans.
Well, what about if we.
Want to this the Sedney, how we can do that, what you think, and that is pretty much simple.
So what we need to do is here we can see actor name, that set name, and here we need to pass the new
name.
For example, let's pass Chris Hemsworth.
All right, I hope I spell it correctly now, I'm just going to come along the same line, but because
we change it this we set the new name.
Now, we should have Chris Hemsworth.
Very good.
Now we know all about module's how we can import and export, as I told you when we were starting.
So the modules are nothing more than function declarations or variable, so we export them.
So there are two ways names to export and default export.
Now you need to be careful when using default, but you don't want to mix things like I did here.
Right?
You should export one thing when you're using default export, but the name the convention for importing
can be different.
So here when you have the default export, you can have any name you want.
But in the importing name export, you will not you should not mess up with names if you want to have
a shorter names or you can create aliases.
But what I usually do is I use the esoterics operator and I'm specifying for each module is coming from
and then I access through that modules all the variables or the functions we are exporting because the
asterisks will grab everything from here, set name, get name, full name so I can access them full
name and even set name.
Right.
You want to try it.
OK, let's try this one.
So.
Module one, the set name, and let's say Rick.
Let's put my name in, get.
Get name again.
There you go.
Now I have my name as there, so that is pretty much what I wanted to show you about Module's.
So the module's will not be able we will not be able to achieve these because of the browser compatibility.
So we will have to use.
Bundle Dodgiest and bable, right, web browser, wi fi.
Right, but now, because Chrome actually supports all of it, so we can just play around and show you
how these modules are working.
So very cool.
Now, you see, we can just organize our code a little bit different.
I don't see any function here.
Right.
I just call the function in.
Same goes here.
So that is pretty much it.
I hope you enjoyed this lecture.
It's a little bit complicated, but don't worry.
Don't stress too much.
Can we watch the video and see how I do the named and default expert and how we are importing both of
them?
So they're a little bit different, but yeah, they're not that different.
Right.
So I will see you in the next lecture.
I hope you enjoyed this one.
And stay safe.