1
00:00:00,880 --> 00:00:05,260
Welcome back, ladies and gentlemen, and a couple of lectures ago, we talk about module's how we can

2
00:00:05,260 --> 00:00:09,460
import and export them, and today we're going to talk about dynamic import.

3
00:00:09,670 --> 00:00:14,740
Now, the import statements we did before were static ones.

4
00:00:15,160 --> 00:00:19,960
So the static import statements and their syntax should be on top of the file.

5
00:00:20,000 --> 00:00:23,680
Remember, I told you whatever we create here, it should be on top.

6
00:00:23,800 --> 00:00:29,020
All of the imports should be on top before these comments, before everything else, before the code

7
00:00:29,200 --> 00:00:29,610
again.

8
00:00:30,370 --> 00:00:37,780
But now we have a dynamic import in this feature was already there in -- and other bundlers.

9
00:00:38,140 --> 00:00:41,320
But the thing is that now we can use it here as well.

10
00:00:41,530 --> 00:00:49,360
So the economy import feature allows us to use async awake so we can dynamically import our dependency

11
00:00:49,570 --> 00:00:50,800
only when we need them.

12
00:00:51,460 --> 00:00:51,880
Right.

13
00:00:51,910 --> 00:00:53,410
So that is very important.

14
00:00:53,620 --> 00:01:02,280
The static, static import syntax allow us to import all of the things at the top of the of the file.

15
00:01:02,290 --> 00:01:02,570
Right.

16
00:01:02,950 --> 00:01:06,520
So let's say that we have a file full of utility functions.

17
00:01:06,730 --> 00:01:09,490
Some of them you can you're not going to use them.

18
00:01:09,490 --> 00:01:11,440
You can really, really use them.

19
00:01:11,860 --> 00:01:16,020
But as you are importing all of them, all of their dependencies.

20
00:01:16,240 --> 00:01:17,820
So that is not efficient.

21
00:01:17,830 --> 00:01:21,580
We we are polluting the window.

22
00:01:21,580 --> 00:01:28,870
And so with the dynamic import, we can use a single weight so we can dynamically import our dependency

23
00:01:29,290 --> 00:01:30,190
when we need them.

24
00:01:30,460 --> 00:01:33,550
So dynamic import use, keyword import.

25
00:01:33,550 --> 00:01:36,790
Now for this I have created Electric 13.

26
00:01:36,790 --> 00:01:42,700
Just link that lecture in your index file and I'm going to create a new lecture called Module three

27
00:01:42,970 --> 00:01:48,190
that JS and this will be for dynamic import.

28
00:01:48,400 --> 00:01:51,790
Actually here we are going to export things from this lecture.

29
00:01:51,940 --> 00:01:56,140
We are going to export function called multiply.

30
00:01:56,200 --> 00:01:57,670
So I'm going to create const.

31
00:01:58,780 --> 00:02:07,150
Multiply and this function will take number one and number two as parameters, right, so it will be

32
00:02:07,150 --> 00:02:14,500
on error function y because you're simply going to return the number one and number two.

33
00:02:15,810 --> 00:02:17,220
OK, there you go.

34
00:02:17,400 --> 00:02:18,650
Now we're going to export him.

35
00:02:21,100 --> 00:02:29,710
Multiply like this and we need to import him, so I'm going to import here using the asterisks, right.

36
00:02:30,010 --> 00:02:31,410
Remember, we did that.

37
00:02:31,660 --> 00:02:34,180
So there's a different ways how we can import things.

38
00:02:34,450 --> 00:02:48,070
But I'm going to use import asterisk, ask module three and from I need to specify the module three.

39
00:02:48,370 --> 00:02:53,140
Very good that just now make sure that you have here.

40
00:02:55,370 --> 00:02:58,100
Also lectured, the top model is still there.

41
00:02:58,140 --> 00:03:02,090
OK, probably because it might not work now.

42
00:03:03,230 --> 00:03:09,560
So we need to include the jet extension in this module type here in order to show in order these modules

43
00:03:11,000 --> 00:03:12,450
export and import work.

44
00:03:13,070 --> 00:03:20,360
So, as I told you, that we are going to use async await when we using dynamically importing when we're

45
00:03:20,360 --> 00:03:21,560
using dynamic import.

46
00:03:21,770 --> 00:03:22,070
Right.

47
00:03:22,220 --> 00:03:30,020
So dynamic import the import module expression loads the module and returns a promise that resolves

48
00:03:30,020 --> 00:03:33,600
into a module object that contains all of its exports.

49
00:03:34,040 --> 00:03:36,420
Right now let's do this.

50
00:03:36,770 --> 00:03:38,390
I'm going to create an async function.

51
00:03:38,720 --> 00:03:42,850
Right, because how we can use a way if we don't use an async function.

52
00:03:43,070 --> 00:03:47,600
So the function must be an async and we can say multiply function here.

53
00:03:47,780 --> 00:03:51,830
We're going to give it a different name and I'm going to pass here the number one and number two.

54
00:03:52,220 --> 00:03:52,600
Right.

55
00:03:52,940 --> 00:03:58,190
And I'm going to call this function from here and I'm going to pass four and five.

56
00:03:58,400 --> 00:03:58,750
Right.

57
00:03:59,030 --> 00:04:01,370
So the output should be twenty four times five.

58
00:04:01,610 --> 00:04:02,530
Should be twenty.

59
00:04:03,500 --> 00:04:12,020
OK, now I'm going to do another check here, another conditional and say if number one and number two

60
00:04:12,020 --> 00:04:17,510
means there are different means, if they're true, if there's a value obviously in this case, yes,

61
00:04:17,510 --> 00:04:17,930
it does.

62
00:04:18,020 --> 00:04:18,770
It will go there.

63
00:04:18,800 --> 00:04:19,940
This condition will be true.

64
00:04:20,330 --> 00:04:23,410
And I'm going to say const here result.

65
00:04:23,690 --> 00:04:26,630
So in the result variable, I'm going to await.

66
00:04:28,480 --> 00:04:35,590
Import, hmm, this is the keyword now, the import here, we specify where we are importing from module

67
00:04:35,590 --> 00:04:37,290
three that J is right.

68
00:04:38,970 --> 00:04:48,240
Now, what I can do, I can console lock the result, not so now I have access to the multiply function

69
00:04:48,240 --> 00:04:49,500
here, right?

70
00:04:50,890 --> 00:04:58,900
They multiply and I'm going to pass number one and number two, OK, save it, let's go back to our

71
00:04:58,900 --> 00:04:59,470
browser.

72
00:04:59,950 --> 00:05:00,540
There you go.

73
00:05:00,910 --> 00:05:02,230
The result is 20.

74
00:05:02,770 --> 00:05:04,240
So there you go.

75
00:05:04,480 --> 00:05:05,430
This is how we are.

76
00:05:05,620 --> 00:05:09,970
We can use dynamic imports using async, await function.

77
00:05:09,970 --> 00:05:10,280
Right.

78
00:05:10,450 --> 00:05:14,050
We just awaiting the result here from this import.

79
00:05:14,170 --> 00:05:21,310
When it's ready, then we can use results that multiply so we can access this function, by the way.

80
00:05:21,340 --> 00:05:21,740
Right.

81
00:05:21,760 --> 00:05:26,590
And this function is not doing much, only just calculating a number one times.

82
00:05:26,590 --> 00:05:27,100
Number two.

83
00:05:28,080 --> 00:05:31,080
They sit pretty efficient, right?

84
00:05:31,410 --> 00:05:39,420
So dynamic import, this import module returns a promise, that's why we can consume that promise later

85
00:05:39,420 --> 00:05:41,010
on right now is.

86
00:05:41,960 --> 00:05:43,760
So there you go.

87
00:05:43,790 --> 00:05:47,040
This is dynamic import, the second one will be match, OK?

88
00:05:47,150 --> 00:05:52,760
But for this one, I'm not going to explain it too much because match or method, the returns are Nightrider

89
00:05:52,760 --> 00:05:56,540
of all results, matching a string against a regular expression.

90
00:05:56,990 --> 00:06:01,010
Now, to be honest, I haven't done regular expression.

91
00:06:01,940 --> 00:06:09,530
In my coding, right, somebody else have done it for me and I'm not very good with the regular expression,

92
00:06:09,530 --> 00:06:15,490
and as you can see that we we didn't use that regular expression in our coat so much.

93
00:06:15,500 --> 00:06:17,180
But this is one example.

94
00:06:17,180 --> 00:06:20,480
If you want to check this regular expression.

95
00:06:20,900 --> 00:06:22,690
Yeah, you can go without this one.

96
00:06:22,700 --> 00:06:23,750
It's not any problem.

97
00:06:23,750 --> 00:06:29,320
But I would strongly, strongly suggest you to read about this regular expression if you want.

98
00:06:29,510 --> 00:06:35,720
And yeah, there is a couple of examples here, and I understand this, but it's going to take me a

99
00:06:35,720 --> 00:06:42,920
while until I create like a mini mini course for this regular expression, how they work, what they

100
00:06:42,920 --> 00:06:45,050
do, why we need them and things like that.

101
00:06:45,170 --> 00:06:45,540
OK.

102
00:06:45,920 --> 00:06:46,640
So there you go.

103
00:06:46,970 --> 00:06:51,710
I'm not going to cover this one, but you should know that this match that all.

104
00:06:52,740 --> 00:07:00,540
It's part of S11 features and yeah, here it is, we are putting a string there, test one in test two

105
00:07:00,690 --> 00:07:04,830
and we are just having this regular expression right now.

106
00:07:05,280 --> 00:07:07,830
Khonsari, look what we are using.

107
00:07:07,830 --> 00:07:12,990
Streambed Outmatch regular expression in the expected output is this one.

108
00:07:13,130 --> 00:07:15,510
But OK, there you go.

109
00:07:15,900 --> 00:07:18,380
You can read about regular expression if you want.

110
00:07:20,220 --> 00:07:25,290
There are a lot of things here and yeah, pretty much I can't remember all of this.

111
00:07:25,620 --> 00:07:26,940
That's why I don't want to bother.

112
00:07:27,960 --> 00:07:28,350
So.

113
00:07:29,260 --> 00:07:36,130
These are the S11 feature, there may be one or two more, but these are the main ones that you should

114
00:07:36,130 --> 00:07:37,240
understand, right?

115
00:07:37,490 --> 00:07:38,350
Dynamic, important.

116
00:07:38,370 --> 00:07:46,570
I left it as last before we just covered this big integer, an optional.

117
00:07:47,560 --> 00:07:53,420
Chaining private class promises that all settled global this, yeah, we have done a lot.

118
00:07:53,890 --> 00:08:01,270
So congratulations, you have done pretty much with all of the features that you need to become a very,

119
00:08:01,270 --> 00:08:03,330
very successful web developer.

120
00:08:03,370 --> 00:08:13,480
If if you find now somewhere on Internet or the place that you work some tutorial, then you will pretty

121
00:08:13,480 --> 00:08:15,010
much understand what is happening.

122
00:08:15,190 --> 00:08:17,080
Right, because you have the knowledge.

123
00:08:17,350 --> 00:08:19,320
You have all the skills you need.

124
00:08:19,660 --> 00:08:20,790
So there you go.

125
00:08:20,800 --> 00:08:22,540
This was the crash course.

126
00:08:22,540 --> 00:08:28,660
I'm going to record probably lectures in the future because I'm going to cover twenty, twenty one features

127
00:08:28,930 --> 00:08:30,160
and yeah.

128
00:08:30,160 --> 00:08:36,740
So I want to say thank you that you were with me and it was my pleasure.

129
00:08:36,970 --> 00:08:42,160
So let's go on and get the other sections done.

130
00:08:42,190 --> 00:08:42,510
Right.

131
00:08:42,760 --> 00:08:45,400
So see you in the other sections.