Welcome back, ladies and gentlemen, and a couple of lectures ago, we talk about module's how we can
import and export them, and today we're going to talk about dynamic import.
Now, the import statements we did before were static ones.
So the static import statements and their syntax should be on top of the file.
Remember, I told you whatever we create here, it should be on top.
All of the imports should be on top before these comments, before everything else, before the code
again.
But now we have a dynamic import in this feature was already there in -- and other bundlers.
But the thing is that now we can use it here as well.
So the economy import feature allows us to use async awake so we can dynamically import our dependency
only when we need them.
Right.
So that is very important.
The static, static import syntax allow us to import all of the things at the top of the of the file.
Right.
So let's say that we have a file full of utility functions.
Some of them you can you're not going to use them.
You can really, really use them.
But as you are importing all of them, all of their dependencies.
So that is not efficient.
We we are polluting the window.
And so with the dynamic import, we can use a single weight so we can dynamically import our dependency
when we need them.
So dynamic import use, keyword import.
Now for this I have created Electric 13.
Just link that lecture in your index file and I'm going to create a new lecture called Module three
that JS and this will be for dynamic import.
Actually here we are going to export things from this lecture.
We are going to export function called multiply.
So I'm going to create const.
Multiply and this function will take number one and number two as parameters, right, so it will be
on error function y because you're simply going to return the number one and number two.
OK, there you go.
Now we're going to export him.
Multiply like this and we need to import him, so I'm going to import here using the asterisks, right.
Remember, we did that.
So there's a different ways how we can import things.
But I'm going to use import asterisk, ask module three and from I need to specify the module three.
Very good that just now make sure that you have here.
Also lectured, the top model is still there.
OK, probably because it might not work now.
So we need to include the jet extension in this module type here in order to show in order these modules
export and import work.
So, as I told you, that we are going to use async await when we using dynamically importing when we're
using dynamic import.
Right.
So dynamic import the import module expression loads the module and returns a promise that resolves
into a module object that contains all of its exports.
Right now let's do this.
I'm going to create an async function.
Right, because how we can use a way if we don't use an async function.
So the function must be an async and we can say multiply function here.
We're going to give it a different name and I'm going to pass here the number one and number two.
Right.
And I'm going to call this function from here and I'm going to pass four and five.
Right.
So the output should be twenty four times five.
Should be twenty.
OK, now I'm going to do another check here, another conditional and say if number one and number two
means there are different means, if they're true, if there's a value obviously in this case, yes,
it does.
It will go there.
This condition will be true.
And I'm going to say const here result.
So in the result variable, I'm going to await.
Import, hmm, this is the keyword now, the import here, we specify where we are importing from module
three that J is right.
Now, what I can do, I can console lock the result, not so now I have access to the multiply function
here, right?
They multiply and I'm going to pass number one and number two, OK, save it, let's go back to our
browser.
There you go.
The result is 20.
So there you go.
This is how we are.
We can use dynamic imports using async, await function.
Right.
We just awaiting the result here from this import.
When it's ready, then we can use results that multiply so we can access this function, by the way.
Right.
And this function is not doing much, only just calculating a number one times.
Number two.
They sit pretty efficient, right?
So dynamic import, this import module returns a promise, that's why we can consume that promise later
on right now is.
So there you go.
This is dynamic import, the second one will be match, OK?
But for this one, I'm not going to explain it too much because match or method, the returns are Nightrider
of all results, matching a string against a regular expression.
Now, to be honest, I haven't done regular expression.
In my coding, right, somebody else have done it for me and I'm not very good with the regular expression,
and as you can see that we we didn't use that regular expression in our coat so much.
But this is one example.
If you want to check this regular expression.
Yeah, you can go without this one.
It's not any problem.
But I would strongly, strongly suggest you to read about this regular expression if you want.
And yeah, there is a couple of examples here, and I understand this, but it's going to take me a
while until I create like a mini mini course for this regular expression, how they work, what they
do, why we need them and things like that.
OK.
So there you go.
I'm not going to cover this one, but you should know that this match that all.
It's part of S11 features and yeah, here it is, we are putting a string there, test one in test two
and we are just having this regular expression right now.
Khonsari, look what we are using.
Streambed Outmatch regular expression in the expected output is this one.
But OK, there you go.
You can read about regular expression if you want.
There are a lot of things here and yeah, pretty much I can't remember all of this.
That's why I don't want to bother.
So.
These are the S11 feature, there may be one or two more, but these are the main ones that you should
understand, right?
Dynamic, important.
I left it as last before we just covered this big integer, an optional.
Chaining private class promises that all settled global this, yeah, we have done a lot.
So congratulations, you have done pretty much with all of the features that you need to become a very,
very successful web developer.
If if you find now somewhere on Internet or the place that you work some tutorial, then you will pretty
much understand what is happening.
Right, because you have the knowledge.
You have all the skills you need.
So there you go.
This was the crash course.
I'm going to record probably lectures in the future because I'm going to cover twenty, twenty one features
and yeah.
So I want to say thank you that you were with me and it was my pleasure.
So let's go on and get the other sections done.
Right.
So see you in the other sections.