1
00:00:03,280 --> 00:00:11,320
Before we get started with x rays, we need to understand what is import and export.

2
00:00:11,320 --> 00:00:20,260
Where Node.js uses the common JS module system and the built in required function is a easiest way to

3
00:00:20,260 --> 00:00:24,430
include modules that exist in a separate files.

4
00:00:24,430 --> 00:00:34,930
So this simply means that with import we can use a module or a function from a different file, or we

5
00:00:34,930 --> 00:00:42,760
can use import to use third party modules or packages from NPM and use it inside our application.

6
00:00:42,880 --> 00:00:46,630
So import simply means get right.

7
00:00:46,630 --> 00:00:54,760
We are getting a function to be used in application and export simply means that exposing the custom

8
00:00:54,760 --> 00:01:01,450
function that we have created so that it would be available in all parts of our application.

9
00:01:01,450 --> 00:01:07,240
So let's demo that to better understand what is import and export.

10
00:01:07,300 --> 00:01:13,060
But before we get into that, we have two ways of doing the import and export.

11
00:01:13,090 --> 00:01:20,890
Like I say, by default, Node.js uses what is called common JS module system and we have new way of

12
00:01:20,890 --> 00:01:23,710
doing it that is using the easiest way.

13
00:01:23,710 --> 00:01:30,370
But for the meantime, let's take to the Common JS Center because this is what I'm going to see in most

14
00:01:30,370 --> 00:01:33,370
of the tutorials and blogs and other courses.

15
00:01:33,370 --> 00:01:40,360
So as you move on, I'll be showing you how we can use the module way of importing and exporting files.

16
00:01:40,360 --> 00:01:42,060
So let's get started.

17
00:01:42,070 --> 00:01:48,250
So as usual, we need to find a way to keep the files that we are going to play around with it.

18
00:01:48,340 --> 00:01:54,160
So let me create a folder and I'll call this one as import dash export.

19
00:01:54,160 --> 00:02:00,580
The name is up to you, then let me see the end to import and my exports.

20
00:02:00,580 --> 00:02:03,040
So now let me open using code period.

21
00:02:03,250 --> 00:02:05,890
To this point, you know how you do it.

22
00:02:05,890 --> 00:02:08,320
That's why I'm moving files over here.

23
00:02:08,770 --> 00:02:11,230
Now here comes the clue.

24
00:02:11,830 --> 00:02:17,410
Let's say that we have two files, so let's go ahead and create those files.

25
00:02:17,410 --> 00:02:20,560
So let me use the terminal to create those files.

26
00:02:20,560 --> 00:02:28,180
So here we go touch and then I'm going to create app dot js file.

27
00:02:28,420 --> 00:02:30,700
And I also want to create.

28
00:02:31,670 --> 00:02:34,920
Let's say man starts jazz fire.

29
00:02:34,940 --> 00:02:40,490
And lastly, I'm going to create what is called Utils Dot G's file.

30
00:02:40,520 --> 00:02:45,650
Now I have three files inside my project as that.

31
00:02:45,920 --> 00:02:46,550
All right.

32
00:02:46,550 --> 00:02:51,950
So for the meantime, let's remove the app to G's file.

33
00:02:51,980 --> 00:02:57,680
Well, let's use these two files to explain import and export.

34
00:02:57,980 --> 00:03:04,100
Before we get into that, let's dive in more to talk about the required function.

35
00:03:04,130 --> 00:03:06,900
We have been using the required function a lot.

36
00:03:06,920 --> 00:03:08,450
So what does it mean?

37
00:03:08,480 --> 00:03:12,890
So inside the main here, let's try to console.log.

38
00:03:12,890 --> 00:03:16,190
The required remember required is a function.

39
00:03:16,190 --> 00:03:22,310
So go ahead and then console.log the required and let's see what it means.

40
00:03:22,310 --> 00:03:24,350
So back to my terminal here.

41
00:03:24,410 --> 00:03:26,570
Let's run the file main.

42
00:03:27,380 --> 00:03:28,210
No.

43
00:03:28,220 --> 00:03:33,800
And then men and I see I have something being displayed, which is an error.

44
00:03:34,010 --> 00:03:40,730
It tells me that an invalid, a given type, which means this is a function, but when calling it,

45
00:03:40,730 --> 00:03:46,490
we didn't provide the actual argument to the function and it must be a string.

46
00:03:46,490 --> 00:03:49,670
So what is the required function?

47
00:03:49,670 --> 00:03:58,070
Well, the required function basically reads JavaScript file, execute it and then returns the export

48
00:03:58,100 --> 00:03:58,970
object.

49
00:03:59,120 --> 00:04:05,870
So for this one, we can pass in any path or a module we want to use.

50
00:04:06,610 --> 00:04:15,100
The take note here is that if we are requiring a lookup file, we need to use a path dot and voice slash

51
00:04:15,100 --> 00:04:16,600
and locate the file.

52
00:04:16,630 --> 00:04:23,950
But if you are using a module from NPM or node, we don't do like period for Slash and the name of the

53
00:04:23,950 --> 00:04:29,070
module as we did for example, path, which is what a call module.

54
00:04:29,080 --> 00:04:35,440
So we don't specify the dot invoice slash, but for lookup files, this is how we do it.

55
00:04:35,590 --> 00:04:39,280
All right, now that is about the required function.

56
00:04:39,280 --> 00:04:41,480
So now let me remove that.

57
00:04:41,500 --> 00:04:45,300
Let's come back to import and export.

58
00:04:45,310 --> 00:04:54,190
So let's say that on the utils is going to have a code that is going to be used in any part of our application.

59
00:04:54,190 --> 00:04:58,030
But for the meantime, let's see how the required function works.

60
00:04:58,030 --> 00:05:05,560
So inside the utils file here, let's just console.log a simple text and say that.

61
00:05:05,560 --> 00:05:06,340
Welcome.

62
00:05:06,490 --> 00:05:13,480
Now when I run the application or the file, it will see that we're not going to see anything being

63
00:05:13,480 --> 00:05:17,710
displayed because these two files are independent.

64
00:05:17,830 --> 00:05:25,090
But as soon as we make this required and then the path to the file period and then first light, then

65
00:05:25,090 --> 00:05:33,600
I have the file because is JavaScript need to bring JS but JavaScript you don't need to bring the extension,

66
00:05:33,610 --> 00:05:35,880
we can ignore it as that.

67
00:05:35,890 --> 00:05:38,860
So as soon as I run the file, let's see.

68
00:05:38,860 --> 00:05:41,590
Indeed I get something on the terminal.

69
00:05:41,620 --> 00:05:42,340
Meaning worker.

70
00:05:42,340 --> 00:05:50,320
Meaning that we're able to use the required function and then use this file inside the main file.

71
00:05:50,320 --> 00:05:58,440
As that remember required is a function so we can assign a variable to this function call.

72
00:05:58,450 --> 00:06:02,590
So let me call this one as file one my first file.

73
00:06:02,620 --> 00:06:09,430
So now let's go ahead and then console.log the file one and let's see what we have.

74
00:06:09,640 --> 00:06:14,110
Now back to my terminal here and indeed I see two things.

75
00:06:14,110 --> 00:06:20,440
One is the string will come and an object which is my module export.

76
00:06:20,470 --> 00:06:25,980
Now the takeaway here is that the required required to use a file in a different file.

77
00:06:25,990 --> 00:06:30,760
So now back to business about module dot export.

78
00:06:30,970 --> 00:06:34,900
Now we have what is called module dot export.

79
00:06:34,900 --> 00:06:37,420
So let me write down here module.

80
00:06:38,320 --> 00:06:40,990
Dart expert.

81
00:06:41,200 --> 00:06:41,710
Perfect.

82
00:06:41,710 --> 00:06:43,000
So what is it?

83
00:06:43,000 --> 00:06:43,750
Perfect.

84
00:06:43,780 --> 00:06:52,870
The module that exports is an object or is a special or crucial or essential object that is included

85
00:06:52,870 --> 00:06:56,680
in every JavaScript file in your application.

86
00:06:57,040 --> 00:07:04,780
And the module is a variable representing the current module, with export being an object that will

87
00:07:04,780 --> 00:07:06,670
be exposed as a module.

88
00:07:06,670 --> 00:07:12,130
So anything assigned to the module, the export will be exposed as a module.

89
00:07:12,130 --> 00:07:17,950
So what I mean here is that before I explain, let's console.log the module.

90
00:07:18,520 --> 00:07:22,090
That way you better understand what I'm trying to refer to.

91
00:07:22,120 --> 00:07:23,470
Now here we go.

92
00:07:23,470 --> 00:07:24,670
Back to my terminal.

93
00:07:24,670 --> 00:07:26,410
Here, let me clear it.

94
00:07:26,410 --> 00:07:30,250
And now I see something as an empty object.

95
00:07:30,250 --> 00:07:35,500
But if I remove the export now let me run again.

96
00:07:35,500 --> 00:07:36,550
And let's see.

97
00:07:36,550 --> 00:07:41,080
I see an object with export being property.

98
00:07:41,080 --> 00:07:46,420
And because it's an object, we can add any property into the object.

99
00:07:46,420 --> 00:07:48,340
So now back to business.

100
00:07:48,490 --> 00:07:54,250
So let's say that we have a string or a function inside this file.

101
00:07:54,250 --> 00:07:55,540
How can I use it here?

102
00:07:55,690 --> 00:08:02,500
So for the meantime, let's try to export a string, call it as literal as that.

103
00:08:02,500 --> 00:08:03,880
So here we go.

104
00:08:04,090 --> 00:08:10,030
So for string, let's just send a simple text, say, welcome to the jungle.

105
00:08:10,180 --> 00:08:15,700
So here, let's make use of module dart export.

106
00:08:16,150 --> 00:08:23,060
And now you're going to add our own property called Message and Equal to work.

107
00:08:23,110 --> 00:08:23,710
Welcome.

108
00:08:26,410 --> 00:08:27,010
Okay.

109
00:08:27,130 --> 00:08:28,660
So let's save it.

110
00:08:28,690 --> 00:08:32,830
Now, inside, man, how can we use this, remember?

111
00:08:32,860 --> 00:08:35,440
Because we have made use of required.

112
00:08:35,440 --> 00:08:38,590
And then we assign to a variable called file one.

113
00:08:38,620 --> 00:08:44,560
Now, if you console.log the file one, let's see what you are going to get.

114
00:08:44,590 --> 00:08:46,710
Now back to the terminal here.

115
00:08:46,720 --> 00:08:50,290
And now we see that I have two things.

116
00:08:50,290 --> 00:08:54,190
One is a string, which is this one work.

117
00:08:54,670 --> 00:09:03,520
The next is objects with property, which is welcome to the jungle, meaning this one, because I've

118
00:09:03,520 --> 00:09:06,850
added a property code message on the export.

119
00:09:06,850 --> 00:09:08,860
So now I have it as that.

120
00:09:08,950 --> 00:09:17,230
So if I want to have access to this string, I'll make use of file one dot m sg.

121
00:09:17,260 --> 00:09:19,690
Meaning I'm using this particular property.

122
00:09:19,690 --> 00:09:22,660
So if I run the file again, now I see.

123
00:09:22,690 --> 00:09:24,230
Welcome to the jungle.

124
00:09:24,250 --> 00:09:26,200
So that is how we can export.

125
00:09:26,200 --> 00:09:27,460
What, literals?

126
00:09:27,580 --> 00:09:30,130
So now let me comment this one.

127
00:09:30,640 --> 00:09:33,520
So how can we also export objects?

128
00:09:33,520 --> 00:09:36,400
So now come here as export.

129
00:09:37,240 --> 00:09:38,140
Objects.

130
00:09:38,380 --> 00:09:40,150
We can do it in this way.

131
00:09:40,180 --> 00:09:43,470
Module dot export.

132
00:09:43,540 --> 00:09:48,010
Now is equal to object with some property names.

133
00:09:48,340 --> 00:09:51,820
So for this, let's say we have a product.

134
00:09:52,870 --> 00:09:53,680
Name.

135
00:09:53,680 --> 00:09:55,180
Let's give it a value.

136
00:09:55,210 --> 00:09:57,700
Say Mark book.

137
00:09:58,720 --> 00:09:59,350
Pro.

138
00:09:59,350 --> 00:10:08,680
And then let's say the prize for this is going to be $1,000 and then description is going to be as a

139
00:10:08,890 --> 00:10:10,000
laptop.

140
00:10:10,480 --> 00:10:10,860
Okay.

141
00:10:10,870 --> 00:10:14,590
Now we have exported this object.

142
00:10:14,590 --> 00:10:16,690
How can we use it again?

143
00:10:16,690 --> 00:10:18,760
Because we have required this function.

144
00:10:18,760 --> 00:10:24,700
We have all the properties and methods on the variable we assign to this function call.

145
00:10:24,790 --> 00:10:30,430
So now if I save this one, let me clear the terminal here and now check it out.

146
00:10:30,430 --> 00:10:37,630
And you see that I have the object here so we can make this of dot the property names.

147
00:10:37,630 --> 00:10:40,870
You can see I have description, price and product name.

148
00:10:40,870 --> 00:10:42,010
So here we go.

149
00:10:42,490 --> 00:10:45,510
When I run it, you see that I have laptop.

150
00:10:45,520 --> 00:10:47,170
That's how we can export.

151
00:10:47,170 --> 00:10:49,270
What objects?

152
00:10:49,270 --> 00:10:53,680
So what about how can we also export functions?

153
00:10:53,680 --> 00:10:56,110
And this is what we want.

154
00:10:56,110 --> 00:10:58,380
How can we export function?

155
00:10:58,390 --> 00:11:07,060
So down here let me comment this one and now we have a beautiful one as what export function?

156
00:11:07,300 --> 00:11:12,310
The function going to be a simple one just to great with some static text.

157
00:11:12,310 --> 00:11:20,020
So let's say great, you're going to be like this and let's just console.log static texts and say.

158
00:11:21,200 --> 00:11:22,250
How?

159
00:11:24,080 --> 00:11:25,010
How are you?

160
00:11:25,520 --> 00:11:25,940
Great.

161
00:11:25,940 --> 00:11:29,810
So now how can we expose this function unless we export from this file?

162
00:11:29,810 --> 00:11:30,800
So here we go.

163
00:11:30,830 --> 00:11:34,670
Module dot export.

164
00:11:34,670 --> 00:11:38,270
And that is equal to my function as that.

165
00:11:38,270 --> 00:11:42,800
Don't call it ize this, export it as an object.

166
00:11:42,800 --> 00:11:47,180
So in this way we have grid as a property on the object.

167
00:11:47,360 --> 00:11:55,160
So now inside Main, now we have the method of function on the file that we got here.

168
00:11:55,310 --> 00:12:03,380
So again, if I run the file nine, we see that I have a function with grid, so it means that this

169
00:12:03,380 --> 00:12:05,660
one represents a function now.

170
00:12:05,690 --> 00:12:06,260
Right.

171
00:12:06,260 --> 00:12:10,190
So I can quickly go ahead and then run the function.

172
00:12:10,190 --> 00:12:12,860
So going to be five one as a function.

173
00:12:12,860 --> 00:12:14,330
So now let me move this one.

174
00:12:14,330 --> 00:12:18,830
Now back to the file and now you see, how are you?

175
00:12:18,830 --> 00:12:21,200
The function has been called.

176
00:12:21,290 --> 00:12:22,700
That is how we can.

177
00:12:22,700 --> 00:12:27,860
But I think the naming here is not ideal how it's just used to explain to you.

178
00:12:27,950 --> 00:12:30,560
But let's say that we are requiring a function.

179
00:12:30,560 --> 00:12:31,220
Definitely.

180
00:12:31,220 --> 00:12:32,960
The name must be descriptive.

181
00:12:32,960 --> 00:12:34,730
We can say grid.

182
00:12:35,770 --> 00:12:39,410
As that so that we know that is a function for grading.

183
00:12:39,430 --> 00:12:43,330
So if I save it, I'm going to be the same as before.

184
00:12:43,360 --> 00:12:46,570
So it is how we can export function.

185
00:12:46,750 --> 00:12:48,990
What about if you have multiple functions here?

186
00:12:49,000 --> 00:12:50,800
Let's say the first one is great.

187
00:12:50,800 --> 00:12:57,970
The next function is going to be say, AD, and this time around is going to take two, argument A and

188
00:12:57,970 --> 00:13:04,720
B and then as we go, then here let's console.log A plus B.

189
00:13:05,750 --> 00:13:06,350
As that.

190
00:13:06,350 --> 00:13:09,050
Now we have two functions here.

191
00:13:09,500 --> 00:13:11,170
Can we export in this way?

192
00:13:11,180 --> 00:13:11,630
Great.

193
00:13:11,630 --> 00:13:13,450
And comma and let's say add.

194
00:13:13,460 --> 00:13:22,310
No it no work unless we export them as an object and we can do it in this way with a property and the

195
00:13:22,310 --> 00:13:23,050
value.

196
00:13:23,060 --> 00:13:25,760
So here the property can be anything.

197
00:13:25,760 --> 00:13:27,590
Let's say my greeting.

198
00:13:28,600 --> 00:13:32,710
Now is equal to the great function above the.

199
00:13:32,770 --> 00:13:42,220
And then next I'm going to be my ADD function is equal to the the function above which is add as that.

200
00:13:42,220 --> 00:13:50,800
So now inside this one, instead of doing this way because I'm exporting multiple functions here, we

201
00:13:50,800 --> 00:13:56,800
need to structure the properties or the functions or the methods for the meantime, let's ignore this

202
00:13:56,800 --> 00:14:01,220
and nonetheless console.log, let's say file for the meantime.

203
00:14:01,270 --> 00:14:01,790
Okay.

204
00:14:01,900 --> 00:14:10,210
And now if you try to console.log, it's let's see what we have now we have these properties and methods.

205
00:14:10,330 --> 00:14:16,120
The first one is dealing with a value, a function, and the next I'm going to be my ADD and a function.

206
00:14:16,120 --> 00:14:21,130
I think I made some type mistake here is going to be my ADD.

207
00:14:21,280 --> 00:14:26,050
So let's remove this one and let's use the name of the function as great.

208
00:14:26,050 --> 00:14:33,250
So here are going to be grids and then grid and next I'm going to be ADD which represents the ADD.

209
00:14:33,370 --> 00:14:40,180
But for ESX, if the property and the value are the same, you can choose the right one and we can remove

210
00:14:40,180 --> 00:14:41,350
this one also.

211
00:14:41,350 --> 00:14:42,550
Now, perfect.

212
00:14:42,550 --> 00:14:44,290
So now back to the file.

213
00:14:44,320 --> 00:14:45,910
Let's go ahead and run it.

214
00:14:45,910 --> 00:14:50,260
So let me click my terminal here and now indeed is the same.

215
00:14:50,620 --> 00:15:00,310
So now if we want to call the grid here, I'm going to make use of file dot grids, then we'll call

216
00:15:00,310 --> 00:15:02,770
it as a function as that.

217
00:15:03,560 --> 00:15:04,540
Do you get it?

218
00:15:04,540 --> 00:15:05,050
Yes.

219
00:15:05,050 --> 00:15:08,650
So save it now let's go ahead and console.log it.

220
00:15:08,650 --> 00:15:10,240
And you see I have.

221
00:15:10,240 --> 00:15:11,050
How are you.

222
00:15:11,530 --> 00:15:12,910
What about the add.

223
00:15:12,910 --> 00:15:18,670
Let's say add the you pass in two and three and let's see.

224
00:15:19,030 --> 00:15:20,890
Yes, I have five.

225
00:15:21,040 --> 00:15:24,550
So instead of doing this way I think it's not clean.

226
00:15:24,550 --> 00:15:29,740
But instead, like I said, we can structure the properties or the meters from this.

227
00:15:29,740 --> 00:15:33,940
So here we have grids and then the add as that.

228
00:15:33,940 --> 00:15:40,570
So this one, if I make use of grid now if I save the file and run the code again.

229
00:15:40,600 --> 00:15:41,230
I see.

230
00:15:41,230 --> 00:15:42,160
How are you?

231
00:15:42,370 --> 00:15:43,270
The same thing.

232
00:15:43,270 --> 00:15:47,920
I can call my add function and pass in three and six.

233
00:15:48,250 --> 00:15:52,570
And if I save it, let me remove this console.log here.

234
00:15:52,810 --> 00:15:54,040
All right, let me comment it.

235
00:15:54,040 --> 00:15:55,600
So now back to the file.

236
00:15:55,600 --> 00:15:57,070
Let me clear the console.

237
00:15:57,130 --> 00:16:06,550
And now indeed I have Ryu and then nine meaning that these two methods has been called and this is a

238
00:16:06,550 --> 00:16:10,540
pattern we are going to use a lot as you move on in this course.