Instructor: Lets now talk in detail
about how ES6 modules really work.
And so, in this video,
you're gonna learn how to import and export stuff
from and to ES6 modules
by using both default and named exports and imports.
So, let's open up our index.js file.
And we can actually close the package.json file.
And also we can get rid of the test js file.
So this is just to test if webpack was working right.
And we don't need that anymore.
And we also don't need any of this stuff here anymore.
So let's get rid of all of it
so I can now explain to you how ES6 modules work.
Okay, let's create a new model here
for the search functionality.
So, new file, and I'm gonna call this one search.
And usually,
we always write JavaScript files all in lowercase.
But, in the case of models,
it's like a convention
to always use uppercase here for the model name.
So this one here is for search
so I'm just using search with an upper S, okay?
And just search.
And now the same one for the view.
And remember from the last lecture,
this one is called search view.
.js, of course.
Okay, so we just created the search model
and the search view file
and we also have our index.js file,
which is gonna be the controller, okay?
Now we're not gonna add the real coding here just yet.
For now I just wanna show you
how named and default exports and imports
work in ES6 modules.
So we already talked a bit about this
when we talked about webpack tests.
So the test.js that I just deleted.
But now let's really dive into it.
Starting with default exports,
that's the ones that we use
when we only want to export one thing from a module.
And that's actually pretty common.
That's why we have default exports.
With default exports,
all we have to do is to say
export, default and then the thing that we want to export.
So let's say we simply want to export a string
saying I am an exported string.
Okay, and so this is our default export.
We don't specify any constant or any variable at all.
We simply put our expression
so this string here
right after the export and default statement.
Okay, so this one I'll export it from this file.
And if you wanna now import it into the index.js file,
we do it like this.
So we say import and then we have to give it a name.
So let's call it string, for example,
and then from
and the path to this module.
And in this case,
it's in the models folder.
And so we have to say first the current folder, remember,
then slash models and then slash search.
And remember, I already told you before
that when we import a module,
we don't have to specify the .js.
So just the name of the module,
which is search, not search.js.
Okay, and like this we have now this value stored in string.
In string, we right now will have I am an imported string.
And in here we really can give it any name that we want.
We can also call it just str or X.
It doesn't really matter.
Okay, so let's just call it str.
So default exports, they are really simple.
They work just like that.
Now if you want to export multiple things
from the same module,
then we have to use something called named export.
So let me show it to you in here in the search view file.
Okay, because later we will actually export
many functions from here.
And so let me show you how we can do that.
It's actually pretty simple as well.
Again, we use the export keyword.
But now, instead of default,
we declare D the constant or the variable
that we want to export from here.
Imagine we want to export a function.
Let's say const.
And, for example,
let's say we wanna export a simple sum function or add.
And we pass two numbers into it.
And then we return a+b.
Okay, so just a very simple function,
which takes two arguments
and then returns the sum of a+b.
This is here again, the arrow function syntax.
I'm sure you're already familiar with that by now.
Let's say we now want a similar function to this one here,
which multiples two numbers.
So multiply, and then again same as before,
which will be a*b.
Okay, so now we have two exports here.
Now let's say we wanna export something else.
For example, an ID set to the value of 23.
Now we exported three things from this module.
And then, if we wanna import it from here,
it works in a slightly different way.
Again, we have to say import.
But then we have to specify
what exactly we wanna import from the module.
So we use the curly braces.
And then just imagine that we want to add and then multiply.
So we say add and multiply from
and then view and then search view.
And again, we omit the .js, right?
So with this, we only imported the add and the multiply.
And we have to use the exact same names
that we exported here in these named exports.
And that's why they're called names
because we gave them a name
and then, in order to import them,
we have to use the exact same names if we want to use them.
Now let's also add the ID.
And so we can now use these.
Let's get rid of this line.
And now let's log all of this through console.
So console.log.
And a template string here
using imported functions.
And so let's see, add these functions actually or use them.
So let's say add
and then we can actually use ID,
which is 23 and also pass two.
So now we passed in the ID and two.
So the two variables that are available to us right now.
So add and ID.
And let's use the other function here as well.
So multiply.
And now I can pass three and five.
And also, since we're at it,
let's also include the str, so the string,
so we have everything in one console.log here.
And now see we're missing here the curly brace here.
And now we should be good to go.
Okay, so that tested out.
And actually it should already work.
And it does.
And that is because, here in the terminal,
this process is still running, as you can see.
Our def server is still bundling up
all our JavaScript files as soon as we save the files.
And so in here we have now,
using imported functions 25 and 15.
And so these are the results of the functions,
the imported functions.
So up here in this pop-up,
it says 23 plus two is, of course, 25,
and three times five is 15.
Then here I am an exported string.
So all of this is working just fine.
Now imagine if we wanna use different names here.
We can actually do that as well.
All we have to do is say,
add as a, for example.
And multiply as m.
Okay, and then just ID.
And so now we can use a and m in here.
Okay, so let's give it a save.
Go back and it still works.
So we basically changed the names
of the imported variables,
so the imported functions here, in this case.
But they're still variables, so it's the same.
Okay, we can export them using one name
and then import them and assign them another name
by simply using this as syntax here.
So this is the second way of doing named imports
coming from named exports.
Now the third way is a bit different.
But there is actually still a third way.
And so let me actually comment this one out.
And start it again.
So I can say import everything from this here.
So let's copy this part.
And so I can do it like this.
And then I also have to give it a name here.
Import everything as,
and let's just say, search view.
Okay, so everything is now called search view
from views slash search view.
Alright, and if you now wanna go ahead
and use the stuff that we exported here,
we have to do it like this.
So we have to use searchview.add.
And here we have to add searchview.multiply.
And here, of course, we also have to use searchview.id.
Okay, let's check it out again.
And here it is.
So still working just the exact same way.
So that is the third way of doing named imports.
Again, here we import basically everything
and put it into this variable here or this object.
And on this object is where all of the variables then live.
So we can then use them.
Here searchview.add, .multiply and .id.
And there are different use cases
where we can use these different methods.
And then we are going to use all of them
throughout this project.
But I just wanted to make a separate video
in order for you to learn how modules work
all in one video.
Okay, we can get rid of all of this here now
after learning this.
So this was, again, just to test it.
And so now we're good to go
and really ready to start with the project
right in the next video.
I hope to see you there very soon.