1
00:00:00,240 --> 00:00:05,360
In the last video you learned how to use the require function to load in a node module.

2
00:00:05,370 --> 00:00:11,250
In this video you're going to learn how to use their require a function to load in another file you've

3
00:00:11,250 --> 00:00:12,240
created.

4
00:00:12,240 --> 00:00:16,510
So right now the only file that's ever going to execute is apt.

5
00:00:16,570 --> 00:00:20,180
J S because that's what we pass to the node command.

6
00:00:20,190 --> 00:00:24,360
That means we're gonna have to put everything in this file if we want it to run.

7
00:00:24,360 --> 00:00:29,190
And that's not ideal as our applications get larger and more complex.

8
00:00:29,220 --> 00:00:34,320
We're gonna have way more code than we would want to have in a single file when all of our code sits

9
00:00:34,320 --> 00:00:39,770
in one file and makes the project really hard to expand on and maintain.

10
00:00:39,780 --> 00:00:46,180
So from the start we're gonna go ahead and create projects that use multiple files so we can stay organized.

11
00:00:46,260 --> 00:00:52,260
We can do something like define a function in one file then require it into a different file and use

12
00:00:52,260 --> 00:00:52,680
it.

13
00:00:52,680 --> 00:00:57,170
And that's exactly what we're going to end up doing in this lesson to kick things off.

14
00:00:57,180 --> 00:01:02,970
We're gonna completely empty app dot J S I'm going to delete everything we have inside of here and we're

15
00:01:02,970 --> 00:01:09,240
gonna start with a very simple bare bones example to illustrate how all of this works and then we'll

16
00:01:09,240 --> 00:01:14,420
create something more complex using the best module once again for the moment.

17
00:01:14,520 --> 00:01:21,300
Let's go ahead and define our name as a variable so constant name equals then as a string your first

18
00:01:21,300 --> 00:01:22,160
name.

19
00:01:22,170 --> 00:01:24,080
Next up we're gonna go ahead and print it.

20
00:01:24,090 --> 00:01:26,030
Nothing groundbreaking here.

21
00:01:26,030 --> 00:01:32,100
Console dot log providing the one and only argument a reference to the name variable.

22
00:01:32,100 --> 00:01:36,660
Now if we run this program we know exactly what's going to happen down below.

23
00:01:36,660 --> 00:01:39,190
I'll rerun the script and what do I get.

24
00:01:39,240 --> 00:01:43,380
As expected I get my message Andrew printing to the console.

25
00:01:43,380 --> 00:01:50,700
Now let's add a second file into the mix and try to define this variable in that second file over inside

26
00:01:50,700 --> 00:01:52,490
of the notes app directory.

27
00:01:52,560 --> 00:01:58,230
We have to add a new file into our project and it's important that you make sure you actually put it

28
00:01:58,230 --> 00:02:03,640
in Notes app and it doesn't end up in the root which is the node course directory.

29
00:02:04,020 --> 00:02:07,590
So right here I'll right click on the notes app folder.

30
00:02:07,590 --> 00:02:14,010
I'll add a new file and we'll call this something generic like you tills dot J S and let's just say

31
00:02:14,010 --> 00:02:20,090
this is a file which contains a few useful utilities for the rest of the application.

32
00:02:20,100 --> 00:02:26,850
Now all we're gonna do inside of here for the moment is use console dialog to print a little message

33
00:02:26,880 --> 00:02:35,380
and we're going to print the file name utilize dot J S so we can figure out exactly when this file runs.

34
00:02:35,400 --> 00:02:41,820
Now if we were to go ahead and run Epcot and J S we would not see that log statement down below we can

35
00:02:41,820 --> 00:02:43,770
prove that I'll rerun the script.

36
00:02:43,770 --> 00:02:45,880
I only get my Andrew message.

37
00:02:45,960 --> 00:02:48,270
I do not get the message over here.

38
00:02:48,270 --> 00:02:56,520
So when we pass a file to node only that file executes if we want another file to run we have to require

39
00:02:56,520 --> 00:02:59,370
it for that file to actually get loaded in.

40
00:02:59,370 --> 00:03:02,870
We can do just that up above.

41
00:03:03,020 --> 00:03:08,210
I'm going to add a line at the very top of the file and here we're gonna use require.

42
00:03:08,210 --> 00:03:13,760
I'm gonna call the require function exactly like we did in the last video when we were loading in the

43
00:03:13,760 --> 00:03:19,150
F S module and we're still going to pass in a single argument a string.

44
00:03:19,190 --> 00:03:25,490
Now when we're loading in a file that we created in our application we start with DOT forward slash

45
00:03:25,520 --> 00:03:30,220
we have to provide a relative path from the file where loading it in from.

46
00:03:30,230 --> 00:03:37,700
In this case app dot J S to the file we're actually trying to load in this case utilize dot J S so from

47
00:03:37,700 --> 00:03:43,310
app J S it is dot forward slash which gets us to the folder for this file.

48
00:03:43,310 --> 00:03:45,940
That would be notes hyphen app.

49
00:03:46,010 --> 00:03:53,330
From there we can just go right to the utilize dot J S file which is located in the same directory.

50
00:03:53,360 --> 00:04:00,000
Now when you're loading in a javascript file like this it is indeed going to execute that file.

51
00:04:00,080 --> 00:04:06,130
I'm going to save app dot J S and we're going to rerun the program down below.

52
00:04:06,470 --> 00:04:13,850
I'll rerun our app script and what do I get I get you tills dot J S printing first because require happens

53
00:04:13,850 --> 00:04:17,830
up here and that's when you tills runs then down below.

54
00:04:17,840 --> 00:04:23,240
I get Andrew because that's a bit further down the file but the good news is that I am indeed getting

55
00:04:23,240 --> 00:04:29,790
both messages one from app J S and one from you tells dot J S so there we go.

56
00:04:29,810 --> 00:04:37,030
We now have an application albeit a simple one that takes advantage of multiple files from here.

57
00:04:37,040 --> 00:04:43,940
Let's go ahead and start to define some variables in that other file that we use an app dot J S so as

58
00:04:43,940 --> 00:04:49,580
we create complex applications we'll have all sorts of functions will define in other files and will

59
00:04:49,580 --> 00:04:56,480
want to use them in our applications main file which in this case is app dot J S so let's see what that

60
00:04:56,480 --> 00:04:57,290
looks like.

61
00:04:57,500 --> 00:05:04,700
To do this all I'm gonna do is remove the name variable from app dot J S so right now that program would

62
00:05:04,700 --> 00:05:11,660
fail because we're trying to reference this variable that doesn't exist over and utilize dot J S we're

63
00:05:11,660 --> 00:05:12,800
gonna recreate it.

64
00:05:12,800 --> 00:05:18,440
So right here a new const name equals we're gonna pick a value for this.

65
00:05:18,530 --> 00:05:24,320
I'll switch things up just to see the different output down below and I'll stick with Mike as my string

66
00:05:24,350 --> 00:05:25,440
for name.

67
00:05:25,520 --> 00:05:28,940
Now we're gonna save both files and see what happens.

68
00:05:28,970 --> 00:05:32,750
So we load in utilize dot J S which defines that variable.

69
00:05:32,750 --> 00:05:37,180
Then we reference the variable down below down below in the terminal.

70
00:05:37,220 --> 00:05:43,070
I'll use clear to clear the terminal output and I'll use the up arrow key twice to cycle past the clear

71
00:05:43,070 --> 00:05:45,350
command to the node app dot J.

72
00:05:45,350 --> 00:05:50,130
S command we're gonna run it and it's gonna fail when I do.

73
00:05:50,180 --> 00:05:51,130
What do we get.

74
00:05:51,140 --> 00:05:53,480
Name is not defined.

75
00:05:53,480 --> 00:05:58,550
So this is one very important aspect of the node module system.

76
00:05:58,550 --> 00:06:04,010
All of your files which you can refer to as modules have their own scope.

77
00:06:04,190 --> 00:06:04,840
So apt.

78
00:06:04,880 --> 00:06:13,610
J.S. has it's own scope with its own variables and utilize dot J as has its own scope with its own variables

79
00:06:13,850 --> 00:06:14,360
app.

80
00:06:14,360 --> 00:06:21,990
J.S. can not access the variables from utilize dot J S even though it was loaded in the require.

81
00:06:22,400 --> 00:06:27,260
So if I can't access name right now how exactly do I get that done.

82
00:06:27,260 --> 00:06:31,500
The answer is that we need to explicitly export all of this stuff.

83
00:06:31,520 --> 00:06:35,110
This file should share with the outside world to do this.

84
00:06:35,120 --> 00:06:44,060
We take advantage of another aspect of the module system which down below is module Don exports.

85
00:06:44,150 --> 00:06:46,640
This is where we can define all of the things.

86
00:06:46,640 --> 00:06:53,000
This file should share with other files now in our case it's going to be one thing a string later on

87
00:06:53,000 --> 00:06:57,980
though it's going to be an object with a bunch of different methods on it allowing us to export a whole

88
00:06:57,980 --> 00:06:59,250
bunch of things.

89
00:06:59,420 --> 00:07:03,450
Whatever we assign right here is what gets exported.

90
00:07:03,590 --> 00:07:09,770
So we're going to do is export whatever the value is for name which we know is the string Mike.

91
00:07:09,770 --> 00:07:16,160
So at this point you tells dot J.S. is doing its job well it defined a variable and it exported that

92
00:07:16,160 --> 00:07:17,060
variable.

93
00:07:17,060 --> 00:07:23,150
Other files can now take advantage of it whatever you assign it to module dot exports.

94
00:07:23,150 --> 00:07:28,100
That is available as the return value from when you require the file.

95
00:07:28,190 --> 00:07:35,200
So I require you tills dot J.S. Right here which means the return value is what I assigned the string.

96
00:07:35,360 --> 00:07:38,780
Mike which is stored on this name variable.

97
00:07:38,780 --> 00:07:45,260
So over here in A.J. s I'm going to create a constant I'm going to pick a name for our new variable

98
00:07:45,500 --> 00:07:47,780
names seems appropriate enough.

99
00:07:47,780 --> 00:07:51,650
And now our program is back to a working state.

100
00:07:51,680 --> 00:07:53,430
Let's go ahead and save act J.

101
00:07:53,450 --> 00:07:57,590
S and test that out with all of our files saved down below.

102
00:07:57,650 --> 00:08:03,200
I'm gonna use clear to clear the terminal output and I'm gonna use the up arrow key twice to rerun the

103
00:08:03,200 --> 00:08:03,710
script.

104
00:08:03,740 --> 00:08:04,630
And what do I get.

105
00:08:04,670 --> 00:08:11,180
I get my utility dot J.S. message which was expected but I'm also getting Mike which is fantastic.

106
00:08:11,180 --> 00:08:15,470
It's getting printed in this file but it's getting defined over here.

107
00:08:15,500 --> 00:08:22,900
We were able to use module dot exports to export it and we were able to load it in over here with required.

108
00:08:23,180 --> 00:08:30,000
Now once again just because I picked the name name over here doesn't mean I have to use that over here.

109
00:08:30,080 --> 00:08:31,870
They are completely independent.

110
00:08:31,880 --> 00:08:37,700
I could call this something like first name a completely different variable name and that would work

111
00:08:37,790 --> 00:08:44,640
just fine as long as I change the references down below to right here I'll change those references.

112
00:08:44,780 --> 00:08:46,110
I'll rerun the program.

113
00:08:46,130 --> 00:08:47,070
And what do I get.

114
00:08:47,150 --> 00:08:48,410
I get these same results.

115
00:08:48,410 --> 00:08:50,640
The app is still working.

116
00:08:50,720 --> 00:08:56,300
So whatever we assign to module exports is what other files can get access to.

117
00:08:56,300 --> 00:09:02,270
Now let's go ahead and look at a slightly more real world example where we export a function of the

118
00:09:02,270 --> 00:09:08,060
function that we're going to create we'll be defined in utilize dot J S it'll be exported from that

119
00:09:08,060 --> 00:09:08,620
file.

120
00:09:08,660 --> 00:09:13,220
It'll be loaded into this one and called down below in you tells dot J.

121
00:09:13,250 --> 00:09:19,110
Yes let's go ahead and define it right here below our name variable which we can leave in place.

122
00:09:19,160 --> 00:09:24,380
We're going to create a new function and I'm going to call this one something like add we're just going

123
00:09:24,380 --> 00:09:28,970
to make a simple function that adds up to numbers right here.

124
00:09:28,970 --> 00:09:33,320
We will indeed define a function I'm gonna set up two arguments.

125
00:09:33,320 --> 00:09:40,550
We can call them X and Y or a and b any two names would work and all we're going to do is return the

126
00:09:40,550 --> 00:09:43,110
sum a plus b.

127
00:09:43,220 --> 00:09:45,080
So a very simple function.

128
00:09:45,110 --> 00:09:48,170
The point isn't to make interesting functions just yet.

129
00:09:48,200 --> 00:09:51,850
The point is to figure out how to share functions across files.

130
00:09:51,920 --> 00:09:54,140
Now down below we can export it.

131
00:09:54,140 --> 00:09:57,880
So currently we're exporting name we're no longer going to do that.

132
00:09:57,890 --> 00:10:03,010
Instead we're going to set module dot exports equal to right here.

133
00:10:03,020 --> 00:10:04,820
The add function.

134
00:10:04,820 --> 00:10:06,240
Now what do we know.

135
00:10:06,320 --> 00:10:14,030
We know that what comes back from require is now this function which means that over here the name first

136
00:10:14,030 --> 00:10:17,960
name doesn't make much sense anymore and neither does how we're using it.

137
00:10:17,960 --> 00:10:20,240
We need to call it since it's a function.

138
00:10:20,240 --> 00:10:25,790
So right here I'm going to call that ad which is indeed appropriate though remember it could be called

139
00:10:25,910 --> 00:10:32,340
anything as long as we're consistent in this file down below we can now go ahead and use it.

140
00:10:32,390 --> 00:10:41,180
I'm going to create a variable sum I'm going to get its value by calling add I'll pass in four and minus

141
00:10:41,240 --> 00:10:41,880
two.

142
00:10:41,930 --> 00:10:45,800
The sum should be two and I'll print the sum to the screen.

143
00:10:45,830 --> 00:10:47,940
So right here some.

144
00:10:48,110 --> 00:10:49,160
Perfect.

145
00:10:49,160 --> 00:10:53,080
Let's go ahead and save all files and see if this works down below.

146
00:10:53,210 --> 00:10:59,510
I'm going to rerun the script and what do I get I get my you tills not J.S. method followed by the number

147
00:10:59,510 --> 00:11:00,220
two.

148
00:11:00,230 --> 00:11:03,650
So in this case we exported a function from one file.

149
00:11:03,890 --> 00:11:10,010
We then loaded it in with require in a separate file and we were able to use it which is a fantastic

150
00:11:10,040 --> 00:11:12,250
step in the right direction.

151
00:11:12,260 --> 00:11:17,570
Now it's challenge time and it's going to be up to you to create a new function in a new file and to

152
00:11:17,570 --> 00:11:22,750
use it in aspect J S for the moment we can go ahead and completely empty this file.

153
00:11:22,760 --> 00:11:28,790
Or you could choose to leave it around as a reference for the future challenge if you want to do that

154
00:11:28,970 --> 00:11:34,280
you can just comment out each of the lines there's a handy keyboard shortcut it is a command forward

155
00:11:34,280 --> 00:11:40,790
slash on Mac and control forward slash on other operating systems I could highlight all of the lines

156
00:11:40,790 --> 00:11:46,940
here use that keyboard shortcut to comment them all out then I could just move them down below leaving

157
00:11:46,940 --> 00:11:52,280
them in place as a reference to remember how things work now I'm going to paste in the challenge comments

158
00:11:52,310 --> 00:11:54,370
and we'll talk about what I'd like you to do.

159
00:11:54,500 --> 00:11:59,990
So big picture goal you want to define and use a function in a new file.

160
00:11:59,990 --> 00:12:06,500
So step one you're going to create a new file called Notes dot J X and this is a real file we're actually

161
00:12:06,500 --> 00:12:13,190
going to use as part of the notes application from there you're going to create a get notes function

162
00:12:13,370 --> 00:12:18,520
which is also going to be a real function we'll be building out throughout this course.

163
00:12:18,680 --> 00:12:23,300
Now for the moment it's not going to do anything fancy it doesn't need any arguments and it's not going

164
00:12:23,300 --> 00:12:30,230
to run any calculations all it's going to do is return a static string like your notes dot dot dot the

165
00:12:30,230 --> 00:12:36,920
notes will eventually come later step 3 you want to export the new function from the new file step for

166
00:12:37,160 --> 00:12:44,210
from app dot J S you want to make sure you can load in that new function call it and print the message

167
00:12:44,270 --> 00:12:45,140
to the console.

168
00:12:45,290 --> 00:12:51,470
So in the end of the day act J S should be requiring the new notes file it should be calling that function

169
00:12:51,470 --> 00:12:57,170
to get the message and it should be using console dot log to print that message to the console when

170
00:12:57,170 --> 00:13:01,640
you're done you should run the program and the message should print down below.

171
00:13:01,640 --> 00:13:07,460
Once again as these challenges get more complex it's okay if something's not quite clear or you're not

172
00:13:07,460 --> 00:13:13,520
quite sure how to do something you can always go back to the video in the beginning and figure out exactly

173
00:13:13,520 --> 00:13:14,090
what happened.

174
00:13:14,120 --> 00:13:15,340
That's not cheating.

175
00:13:15,380 --> 00:13:19,940
That's called being resourceful actually memorizing things will come with time.

176
00:13:20,540 --> 00:13:25,790
All right let's kick things off take a moment to pause the video when you're done come back and click

177
00:13:26,090 --> 00:13:26,420
play

178
00:13:30,450 --> 00:13:31,140
how'd that go.

179
00:13:31,140 --> 00:13:33,540
Hopefully that wasn't too much trouble.

180
00:13:33,540 --> 00:13:35,670
We're going to go ahead and kick things off right now.

181
00:13:35,670 --> 00:13:37,190
By creating that new file.

182
00:13:37,190 --> 00:13:45,440
Step one create a new file called Notes dot J S I'm gonna put that right in the notes app folder notes

183
00:13:45,440 --> 00:13:45,980
dot J.

184
00:13:45,980 --> 00:13:51,800
S and we need to define a new function that returns the string your notes.

185
00:13:51,800 --> 00:13:53,620
The function should be called to get notes.

186
00:13:53,630 --> 00:13:54,720
Let's get that done.

187
00:13:55,350 --> 00:14:02,340
Const get notes equals a brand new function and all that function is going to do is return the string

188
00:14:02,610 --> 00:14:03,740
your notes.

189
00:14:03,750 --> 00:14:05,040
Dot dot dot.

190
00:14:05,040 --> 00:14:08,100
Later on it'll do much much more.

191
00:14:08,100 --> 00:14:12,300
Now step three is to make sure that this function actually gets exported.

192
00:14:12,330 --> 00:14:17,240
So export b get notes function right now it's defined but it's not exported.

193
00:14:17,250 --> 00:14:20,280
So no other file could take advantage of it right here.

194
00:14:20,280 --> 00:14:21,530
We're gonna fix that.

195
00:14:21,570 --> 00:14:29,130
I'm going to use module dot exports which we used in utilize dot J S I'm going to set it equal to the

196
00:14:29,130 --> 00:14:30,630
thing I want to export.

197
00:14:30,690 --> 00:14:35,560
In this case it is the get notes function now.

198
00:14:35,720 --> 00:14:36,270
No it's not.

199
00:14:36,280 --> 00:14:37,880
J Yes is all done.

200
00:14:38,070 --> 00:14:40,830
Everything else is going to happen in app dot J.

201
00:14:40,830 --> 00:14:43,750
S We have to load in the file.

202
00:14:43,830 --> 00:14:46,260
Call the function and print the message.

203
00:14:46,320 --> 00:14:48,200
Let's do that right here.

204
00:14:48,450 --> 00:14:56,110
I'm going to create a variable const I'm going to call this get notes and then going to use require

205
00:14:56,130 --> 00:15:02,190
to load that file in right here inside of require we pass in that string.

206
00:15:02,190 --> 00:15:07,890
And remember when we're loading in another file we've created we have to provide a relative path from

207
00:15:07,890 --> 00:15:10,830
the file we're calling require in the file.

208
00:15:10,860 --> 00:15:18,540
We're trying to load so dot forward slash notes dot J S and now we can actually use the get notes function.

209
00:15:18,540 --> 00:15:24,640
So right here const message equals I'll be calling get notes.

210
00:15:24,890 --> 00:15:31,700
I don't have to pass in any arguments since it doesn't take any then console dot log to print the message

211
00:15:31,730 --> 00:15:33,090
to the console.

212
00:15:33,110 --> 00:15:33,980
Perfect.

213
00:15:33,980 --> 00:15:37,010
Let's go ahead and see if this works down below.

214
00:15:37,010 --> 00:15:40,070
I'm gonna go ahead and rerun the script and what do I get.

215
00:15:40,070 --> 00:15:41,000
I get your notes.

216
00:15:41,000 --> 00:15:44,090
Dot dot dot printing which is fantastic.

217
00:15:44,090 --> 00:15:49,370
Now that we have this in place we're making good progress in the right direction and we can go ahead

218
00:15:49,370 --> 00:15:55,820
and remove all of the commented out code in this file leaving just those three lines in place.

219
00:15:55,820 --> 00:16:02,420
We're also going to remove the utilize dot J S file that was created for demonstration purposes.

220
00:16:02,420 --> 00:16:08,750
The file that you created notes dot J.S. that's actually going to stay around and play a critical role

221
00:16:08,750 --> 00:16:10,640
in the notes application.

222
00:16:10,640 --> 00:16:17,020
So now we know how to load in court node modules we know how to load and other files we've created.

223
00:16:17,060 --> 00:16:23,630
The last thing we need to learn about is how to load in NPM modules so we can take advantage of them

224
00:16:23,720 --> 00:16:25,310
in our applications.

225
00:16:25,400 --> 00:16:28,800
Something we'll be doing extensively throughout the class.

226
00:16:28,850 --> 00:16:31,710
We're going to talk about that in the next video.

227
00:16:31,730 --> 00:16:33,250
I'm excited to get to it.

228
00:16:33,260 --> 00:16:35,420
So let's go ahead and jump right in.