hey guys what's up javascript modules
the es6
es2015 JavaScript modules are very
important to learn if you want to learn
one of the frameworks like react angular
amber or view actually that's the first
thing you need to learn besides the
normal JavaScript because if you don't
and there's a lot of confusion and
you'll pay the price when something
doesn't work so let's try to understand
them in detail by understanding the
fundamentals and its application and
some of the cool tricks that you can use
with it welcome to check see tutorials
[Music]
as to the new module the new es6 modules
are part of the the original es6 es2015
spec and as of 2018 they are probably
not implementing in all the browsers so
if you want to use it you have to use a
transpiler a babel transpiler
or typescript whichever you want to use
or you can use a framework react or
angular or v or ember which already
provides a transpiler so you can use it
so what I'm gonna do here is I'm going
to use react but you can just use
angular the code worked works is pretty
much the same way so we're just gonna
look the module part of it and how to
create them so I've created this react
project here and if you don't know how
to create I have a tutorial I provide a
link here this is using create react app
and it's very simple and just to show
you how it works so inside the source
folder app GS I have this app extend
component here what I'm gonna do is I'm
going to pretty much remove everything
and I'm just gonna remove logo here so
nothing obstruct here and so within this
live here I'm going to work my modules
so first thing I'm gonna do is I am
going to create a folder inside the
source folder I'm gonna call it modules
within the modules I can create a module
file let's call it Lib a or something da
GS the module four said nothing but GS
files all right now these files these
module files could hold some data some
service some classes some utility some
regex
whatever you want to use in your
component or other modules if you like
so let's start with a sim
all add function so I have a function
which takes two arguments a and B and
all it does it returns a plus B simple
right I want this file to be our module
so what I need to do is export this
function so all I have to do is put
export in front of it and this is called
named export because I am exporting a
function ad which which has a name add
now you can import this module into
another component or a module so we're
gonna use this in this app component and
the first thing we're gonna do is import
it here so the import it's very simple
import statement and then we're gonna
import the the add function but because
it's named we have to use it like this
between curly brackets so I can say add
and then where are we importing from and
the location would be like a string
right and we can use relative path since
we already know it's inside modules
slash and the name of the module is live
a we don't have to use dot J as it auto
mile in nose all right since it knows
there is an export function so it
figures it out so we don't have to do it
you can save this and now we can use
this add function inside this class div
here so I can just simply do this add +
1 + 3 well here I have to do 1 and 3 and
they should interpolate the value that
returns by add again oh I say important
suppose it's an import again this is
going to be available throughout this
class so I can either use it here inside
or use it outside the render function so
let's compile the project alright so I
can see here for when it renders now
let's go back here I can hear the
important thing to notice this import
function usually you need to put it at
the top of the file with all the other
import function you could potentially do
this and it still works because all
import func imports are actually hoisted
to the top of the file but it's not a
good practice because when you do
something like this
it's the readability it goes out of the
window so you should not never do that
you should always put it on the top the
file also another important thing is
even though you can import this module
into multiple components but it's still
only one instance so they are actually
singleton ok so now what we can do is we
can have another function here so one
file can contain multiple function but
this time instead of function
declaration I'm going to use a function
expression so this would be subtract
function this should take a and B it's
an arrow function and it should return a
minus B and because it's a variable we
should also use constant front of it and
before that we can use export so this is
how you can export subtract function and
if I save this and I can use it again
inside here right now I have only add
function I can use subtract so I'm
importing both so I can do as many as I
like and so if I do only add then only
add gets imported if I do substract only
substract get important so instead of
add I can use subtract here and let's
see what your vendors so no 1 minus 3 is
minus 2 as you can
see all right it works another important
thing to notice and is that it doesn't
just simply import this modules the
modules are actually live what it means
is it's not making a copy or anything
it's actually live so let's see an
example how it works so let's say if I
have a variable let's say let num equal
to 1 and I can build a function that
increment num equal to let's say it's a
so the here'll function
so this would be available inside so I
can say num plus plus plus plus and it
would increment it but I would need to
export them both so I can say export
this guy and export that guy so now
inside the the app GS I don't really
need to import all of this one by one
instead I can just simply say start
mints import everything that is in that
file but I have to give it some sort of
name so I can say as I live we can say
live a so it's more precise and here
instead of substract I can do this I can
say live dot live a dot I can run that
function which is increment num and in
the second line I can actually display
it so I can say live a dot no since I'm
getting everything na means also
accessible since I'm exporting here so
numbers are also exportable not only
functions Oh actually I need to run this
otherwise it would not increment it
because it's a function so now if I do
it it was one before so when I increment
meet you now so now it's 2 so that's how
it works and so now that I have
incremented if some other file is using
importing the same variable then it
would be to it you would access it as a
two instead of one now so that's what
I'm saying it holds a single instant
which is shared by whoever is importing
it now let's create another file here
inside the module and I'm going to call
it Lib bjs here I can export unnamed
anonymous function I'm going to
substitute I have used add and subtract
I'm gonna multiply and so here I'm just
gonna say return X multiplied by Y and I
cannot simply export anonymous function
I have to say default an important thing
to notice when you use default you
probably want to only export you should
have only one export for file this way
if I import this inside here I can use
it like this import I can name it here
since I haven't named it here I can
since it's only one I can say mult and
it's multiplication from and we already
know it's from modules /lib be so
default is single export an animus
export and remember don't use semicolon
here all right so let's use it inside
here
so I'm gonna remove all this garbage
here and now use malt to three so it
should multiply by two and three so it
should print six and it prints six
now let's even though you're supposed to
do only once you can use something else
as well so let's say if I if you decide
to use something else and you can do
export let's say I have a some variable
X equal to one then I would have to I
would have to do this so remember there
is no curly bracket so that's a default
one and I can say comma and I can say X
and here I would simply put x value of x
so this would be I guess one right let's
look at it and it's pretty bad classes
now I can create another module here new
file Lib C da GS and inside here I can
create a class so I can say export
default usually you would have one class
per file so this is better to have a
default class car and I can have a
constructor which sets some value some
some value let's say this dot name of
the car equal to name which is being
passed through here now let's import
this since it's a class it's a default I
can do this capital car from modules
slash
live see and I can use this inside a
constructor so I can write a constructor
here and inside the constructor I can I
have to have a super so I'm just gonna
write super and then I can create a new
car so I can say this dot new car equal
to a new car and let's call it speedy
that's the name of my car instead of X
here I can say this dot new car dot name
so that should print speedy so if you're
using already import and exports in a
framework now you know how to do it
properly and I hope you learned
something from this tutorial if you did
please like subscribe and comment and
you can also support the channel via
patreon
I provide a link here and also you can
translate you can find the link on
translate in the description thank you