Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,120 --> 00:00:07,170
So far in our code we've been using and requiring all of these Node modules for example EJS or Express
2
00:00:07,260 --> 00:00:08,660
and body-parser.
3
00:00:08,970 --> 00:00:11,580
But how does it actually work?
4
00:00:11,580 --> 00:00:18,870
If we take a look inside our Node modules and we go and just find where EJS is, and we click on
5
00:00:19,010 --> 00:00:19,370
ejs.
6
00:00:19,380 --> 00:00:25,200
js, if you scroll down it, you can see that there is-- maybe there are some variables which we already
7
00:00:25,200 --> 00:00:31,470
know about, there's some functions but there's also a whole bunch of these exports: exports.this export.
8
00:00:31,680 --> 00:00:32,430
that.
9
00:00:32,430 --> 00:00:34,800
So what exactly is that?
10
00:00:35,190 --> 00:00:42,480
Let's try and understand how our Node modules like EJS, Express, body-parser actually work by creating
11
00:00:42,600 --> 00:00:45,790
a module of our own from scratch.
12
00:00:46,830 --> 00:00:54,930
Currently we have this thing down here which basically just generates the current day in a particular
13
00:00:54,930 --> 00:00:56,880
format that we desired.
14
00:00:57,210 --> 00:01:03,390
Now if we were to refactor our code right now then this is probably one of the first things that we
15
00:01:03,390 --> 00:01:12,150
want to package into its own module because it doesn't really belong here in the app.js. You can imagine
16
00:01:12,150 --> 00:01:16,970
that as our app.js gets more and more complex, then we have more routes,
17
00:01:16,980 --> 00:01:21,560
we have different get, post routes all over the place.
18
00:01:21,600 --> 00:01:29,590
Code that's not strictly related to the route shouldn't actually be in here cluttering the app.
19
00:01:29,610 --> 00:01:31,130
js.
20
00:01:31,340 --> 00:01:32,870
How would you normally solve this?
21
00:01:32,870 --> 00:01:35,570
Well we could go ahead and create a new file
22
00:01:35,600 --> 00:01:41,750
let's just call it date.js and this could be our own little module for generating the current
23
00:01:41,870 --> 00:01:42,740
date.
24
00:01:42,770 --> 00:01:46,140
So let's go ahead and cut all of this code.
25
00:01:47,230 --> 00:01:55,480
And we're going to paste it inside date.js. And of course we have to again say jshint we're
26
00:01:55,480 --> 00:01:59,650
using esversion 6.
27
00:01:59,770 --> 00:02:07,210
Now we have this date.js module which does all of the hard work to find the date and change it
28
00:02:07,210 --> 00:02:08,680
to a particular format.
29
00:02:08,680 --> 00:02:12,850
But how do we get this day back into our app.
30
00:02:12,930 --> 00:02:16,770
js and use it inside our root route?
31
00:02:17,230 --> 00:02:24,780
Well maybe we could wrap this thing inside a function, we could call it getDate. And this function
32
00:02:24,790 --> 00:02:32,770
all it does is carries out all of this code and then it simply returns the result of all of this.
33
00:02:32,770 --> 00:02:38,890
So at the end we get this thing called Day which is what we've been previously using inside our root
34
00:02:38,890 --> 00:02:39,600
route.
35
00:02:39,610 --> 00:02:43,240
So what if we just returned day
36
00:02:43,470 --> 00:02:46,470
so we get an output out of our function?
37
00:02:46,470 --> 00:02:52,840
Now we have this function and we have a way for it to return the thing that we want.
38
00:02:53,100 --> 00:02:55,380
How do we actually export it?
39
00:02:55,380 --> 00:02:58,250
How do we get it out of this date.js?
40
00:02:58,800 --> 00:03:02,990
How can we make it available elsewhere if it's needed?
41
00:03:03,480 --> 00:03:07,360
Well this is where Node comes in to the rescue.
42
00:03:07,440 --> 00:03:14,640
So if you take a look at the docs for the latest version then if you read through all of this maybe
43
00:03:14,640 --> 00:03:23,490
not all of it but the relevant parts, then you can see that there's a section on modules. And the module
44
00:03:23,550 --> 00:03:31,300
object is basically something that gives you a reference to the object that represents the current module.
45
00:03:31,530 --> 00:03:35,500
So that means that inside this module here date.
46
00:03:35,500 --> 00:03:39,210
.js, we have access to this thing called module.
47
00:03:39,420 --> 00:03:50,550
And I can go ahead and just log my module. And if I were to use this module then I can require this module
48
00:03:50,880 --> 00:03:53,500
to run all the code inside here.
49
00:03:53,730 --> 00:04:00,810
So for example, up here instead of requiring body-parser and Express I'm going to create a new const called
50
00:04:00,870 --> 00:04:05,310
date and this simply requires my new date module.
51
00:04:05,700 --> 00:04:12,450
Now because our module is local and has not installed using NPM then the way we access it is a little
52
00:04:12,450 --> 00:04:13,300
bit different.
53
00:04:13,470 --> 00:04:18,720
We have to use that thing that we saw previously with the directory name +
54
00:04:18,779 --> 00:04:22,150
and then we have to locate our date.js.
55
00:04:22,410 --> 00:04:29,460
So now what this will do is we're saying we're requiring a module and it's located at the current directory
56
00:04:29,820 --> 00:04:36,810
name and then we add /.js in order to access this particular file.
57
00:04:37,470 --> 00:04:45,330
So now if I hit save and I run my code using node app.js making sure that you're in the right
58
00:04:45,330 --> 00:04:52,050
position then I will end up with my module printed out inside my console.
59
00:04:52,290 --> 00:05:01,390
So whenever I say require this module then it'll go into this module and it'll try to run all of this code.
60
00:05:01,470 --> 00:05:08,850
Now over here you can see what it's running is that log statement. And we've logged that module object
61
00:05:08,850 --> 00:05:15,210
so this is the object that represents our date module. And you can see it's got a whole bunch of interesting
62
00:05:15,210 --> 00:05:15,970
things in here.
63
00:05:15,990 --> 00:05:17,430
For example an id
64
00:05:17,460 --> 00:05:25,230
so this is where it's located which currently is in my local directory right? Something called WebDev
65
00:05:25,230 --> 00:05:30,780
/todolist-v1/date.js which is where you can see it here.
66
00:05:31,080 --> 00:05:33,660
And then you've got a whole bunch of other things such as
67
00:05:33,750 --> 00:05:35,550
it's got a parent module right?
68
00:05:35,550 --> 00:05:38,910
What was the model that actually launched it or required it?
69
00:05:38,910 --> 00:05:46,350
Well in this case it's something called app.js. And that thing has a whole bunch of children including
70
00:05:46,380 --> 00:05:47,750
this date module.
71
00:05:47,790 --> 00:05:55,290
So we've also got other children such as Express and body-parser and EJS and it's also got other things
72
00:05:55,350 --> 00:05:56,810
associated to it.
73
00:05:57,070 --> 00:06:03,630
Now if we take a look at our module object that represents our date module you can see it's also got
74
00:06:03,630 --> 00:06:10,920
this property called exports. And export seems to be some sort of Javascript object as denoted by those
75
00:06:10,920 --> 00:06:11,980
curly braces.
76
00:06:12,180 --> 00:06:14,840
But at the moment it's completely empty.
77
00:06:14,910 --> 00:06:19,830
So there is nothing that our module is exporting.
78
00:06:19,940 --> 00:06:25,800
If we take a look back at the documentation and we navigate to this part where it talks about module
79
00:06:25,810 --> 00:06:33,930
.exports, then you can see that this is also a Javascript object and it's created by the module system.
80
00:06:33,950 --> 00:06:41,780
So what it allows us to do is to basically say module.exports do something or is equal to something.
81
00:06:42,200 --> 00:06:49,040
And then that means that in another file, we can simply tap into that module and use some of those exports.
82
00:06:49,040 --> 00:06:51,960
So let me show it to you in our code.
83
00:06:52,370 --> 00:07:00,760
Now instead of console logging our module, we can simply write module.exports.
84
00:07:00,800 --> 00:07:01,720
Remember the s
85
00:07:01,730 --> 00:07:04,100
this is a really common mistake.
86
00:07:04,100 --> 00:07:08,060
And then we set it to equal say hello world
87
00:07:08,060 --> 00:07:14,610
maybe. Now this current date module exports the string that's Hello world.
88
00:07:14,630 --> 00:07:16,730
So if we go back into our app.
89
00:07:16,730 --> 00:07:23,380
js whenever we require our module it gets bound to something called date.
90
00:07:23,630 --> 00:07:32,600
And over here we can simply log our date object and that will be equal to whatever it is that we exported
91
00:07:32,900 --> 00:07:35,050
out of this module.
92
00:07:35,060 --> 00:07:43,220
So now if I had back into my console and I stopped my server and rerun it, you can see that my app.
93
00:07:43,250 --> 00:07:45,010
js is now printing
94
00:07:45,020 --> 00:07:46,180
Hello world.
95
00:07:46,220 --> 00:07:48,560
There's no log statements over here.
96
00:07:48,830 --> 00:07:52,000
And this is because I'm exporting from this module
97
00:07:52,010 --> 00:07:56,710
just a simple string and it's now available inside my app.
98
00:07:56,720 --> 00:08:03,810
js. Now they were able to get access to the exports from this module,
99
00:08:03,970 --> 00:08:08,650
what if we wanted to get access to a function instead?
100
00:08:08,740 --> 00:08:13,810
For example what if we wanted to be able to tap into this function?
101
00:08:14,080 --> 00:08:22,180
Well if instead of setting our module.exports to equal hello world, we can set it to equal getDate.
102
00:08:22,180 --> 00:08:28,720
Now the important thing with Javascript object is when you decide to add the parentheses because the
103
00:08:28,720 --> 00:08:34,320
time when you add the parentheses then that means we're actually calling, we're activating the function
104
00:08:34,360 --> 00:08:34,950
right?
105
00:08:35,200 --> 00:08:41,770
And we don't want to do that inside our module because we want to allow the app.js to determine
106
00:08:41,890 --> 00:08:45,900
when that function should be called.
107
00:08:45,910 --> 00:08:54,100
So currently our date object here is bound to the exports of our date module and the exports of our date module
108
00:08:54,310 --> 00:08:56,800
is simply just a function.
109
00:08:56,800 --> 00:09:04,990
So if I were to log date as it is right now, you can see that it's only going to tell me that it's just
110
00:09:04,990 --> 00:09:07,270
a function and it's called getDate.
111
00:09:07,360 --> 00:09:13,870
It's not going to actually run that function and give me the return statement which is the actual date
112
00:09:13,900 --> 00:09:15,120
that I'm looking for.
113
00:09:15,340 --> 00:09:19,890
If I want it to run then I have to add my parentheses.
114
00:09:20,080 --> 00:09:27,820
So now when I rerun my app.js you can see now it's running the function get date rather than just
115
00:09:27,880 --> 00:09:30,390
logging the actual function.
116
00:09:30,520 --> 00:09:38,070
Now by binding our exports to this function inside the module, we're now able to export it into our app.js
117
00:09:38,080 --> 00:09:41,660
and we can use it anywhere we like.
118
00:09:41,710 --> 00:09:45,560
So we don't have to activate it when we require it,
119
00:09:45,910 --> 00:09:48,520
we can add it wherever it's needed.
120
00:09:48,520 --> 00:09:58,390
So for example inside our app.get, we're now able to say date run or whatever is bound to that module
121
00:09:58,600 --> 00:10:02,930
and let's say we save it inside something called day
122
00:10:02,980 --> 00:10:03,600
right?
123
00:10:03,970 --> 00:10:10,270
So now we have this thing called day which is bound to the output of this date module which currently
124
00:10:10,360 --> 00:10:17,840
is getting us the current date because it's running this function getDate. What we're saying here
125
00:10:17,870 --> 00:10:26,540
is we have this module called date and we're requiring it up here which binds all of the exports to this
126
00:10:26,540 --> 00:10:35,780
constant called date. And then down here we call the function that's bound to that constant date and we
127
00:10:35,780 --> 00:10:42,560
activate our getDate function. And now we have the result of it stored inside day which we're going
128
00:10:42,560 --> 00:10:44,420
to pass over here.
129
00:10:44,420 --> 00:10:48,570
Now we're able to head over to our console and run our app.j
130
00:10:48,600 --> 00:10:49,130
js.
131
00:10:49,430 --> 00:10:58,250
And now if we head over to our localhost:3000, you can see it's passing the output of that date module
132
00:10:58,610 --> 00:11:01,470
into our title over here.
133
00:11:02,120 --> 00:11:10,370
So we've managed to move our date code out of our app.js put it into its own separate module and
134
00:11:10,370 --> 00:11:15,500
we're able to use it inside app.js or any other file for that matter.
135
00:11:15,500 --> 00:11:20,150
And now this code in our date.js is completely reusable.
136
00:11:20,330 --> 00:11:25,000
We can require it and use it anywhere we like.
137
00:11:25,370 --> 00:11:32,570
But what if we wanted our date module to do more than one thing because at the moment all it exports
138
00:11:32,660 --> 00:11:35,380
is just one function right?
139
00:11:35,420 --> 00:11:38,210
It kind of makes its functionality quite limited.
140
00:11:38,450 --> 00:11:44,670
What if we had say another function right? Down here. Let's say we had a function, instead of getdate
141
00:11:44,690 --> 00:11:46,670
it's gets the day right?
142
00:11:46,670 --> 00:11:50,360
The current day of the week. And pretty much all of this is the same
143
00:11:50,360 --> 00:11:58,310
other than this option we only want the weekday to be in a long format and then we bind it to this thing
144
00:11:58,310 --> 00:12:03,620
called day and we return it as the output of this function.
145
00:12:03,800 --> 00:12:12,530
Now because our module.exports is only bound to getDate to function, we can't seem to access this
146
00:12:12,530 --> 00:12:14,100
getDay.
147
00:12:14,300 --> 00:12:15,520
How do we solve this?
148
00:12:15,680 --> 00:12:23,600
Well if you remember previously I mentioned that module.export is a Javascript object.
149
00:12:24,230 --> 00:12:29,600
And objects have properties and methods associated with it.
150
00:12:29,900 --> 00:12:39,020
So that means that instead of simply binding the entire object to our getDate function, I could say module
151
00:12:39,030 --> 00:12:51,040
.exports.geDate is equal to this function. And that means that I can do the same thing down
152
00:12:51,040 --> 00:13:01,450
here and say model.exports.getDay is equal to the getDay function.
153
00:13:01,480 --> 00:13:10,820
So now if at the end of all of this code we log our module.exports and we go back into our app.
154
00:13:10,850 --> 00:13:15,700
.js and require that module,
155
00:13:16,150 --> 00:13:24,360
then you can see that currently our exports object now has two functions that are tied to it.
156
00:13:24,400 --> 00:13:33,160
One is called getDay and one is called getDate. Now inside our app.js, instead of saying just run
157
00:13:33,220 --> 00:13:37,440
the function that's bound to the exports from our data module
158
00:13:37,540 --> 00:13:43,000
we can say run the function that's bound to our date module .getDate.
159
00:13:46,050 --> 00:13:49,010
And this will work exactly the same way as before
160
00:13:49,020 --> 00:13:55,440
so I can restart my server and you can see that it's still working as expected
161
00:13:55,620 --> 00:14:02,430
but now I have the option of saying, 'Oh maybe instead I just want the actual day of the week.'
162
00:14:02,430 --> 00:14:11,160
So now if I go ahead and restart my server and refresh my website, you can see I'm using the getDay
163
00:14:11,340 --> 00:14:17,080
function inside our date module to just bring up the actual day of the week.
164
00:14:18,470 --> 00:14:25,490
This is how we can create our own modules and require them and get their functionality exported out of
165
00:14:25,490 --> 00:14:28,910
the module to be used anywhere within our project.
166
00:14:28,910 --> 00:14:32,000
So this makes it reusable and way more useful.
167
00:14:32,000 --> 00:14:35,830
So this is the first step in our refactoring.
168
00:14:35,900 --> 00:14:39,890
Now the next step is how can we make this a little bit more succinct?
169
00:14:39,890 --> 00:14:41,360
How can we make it a bit shorter
170
00:14:41,390 --> 00:14:43,670
because at the moment it's quite wordy
171
00:14:43,670 --> 00:14:44,340
right?
172
00:14:44,750 --> 00:14:51,680
So for example here where we're creating let day equals this and then return day, then we can simply
173
00:14:51,680 --> 00:14:57,050
get rid of all of this and just say return this
174
00:14:57,090 --> 00:14:57,450
right?
175
00:14:57,510 --> 00:15:02,970
So we can now delete that and we can do the same over here.
176
00:15:02,970 --> 00:15:08,990
We can simply just return that without having to bind it to another variable.
177
00:15:09,030 --> 00:15:16,530
The next thing we can look at is for example here we're saying module.export.getDate equals
178
00:15:16,530 --> 00:15:20,410
getDate function getDate this getDate-- like all over the place
179
00:15:20,430 --> 00:15:21,190
right?
180
00:15:21,210 --> 00:15:23,420
So how can we simplify this?
181
00:15:23,730 --> 00:15:29,460
Well you might remember from earlier lessons that we mentioned that Javascript functions can be declared
182
00:15:29,550 --> 00:15:36,990
in a variety of ways. And in the course resources a link to this particular blog post which does a really
183
00:15:36,990 --> 00:15:42,920
good job of summarizing the 6 different ways that you can declare Javascript functions.
184
00:15:42,930 --> 00:15:45,440
So there's a lot of different ways that you can do it.
185
00:15:45,630 --> 00:15:51,240
Now the way that we're most used to is just a simple function declaration.
186
00:15:51,330 --> 00:15:56,100
It's the function keyword, the name of the function, some inputs and maybe some outputs
187
00:15:56,100 --> 00:16:05,190
right? Now another way of doing this is by using a function expression. We could set our function to equal
188
00:16:05,280 --> 00:16:07,260
a variable instead.
189
00:16:07,320 --> 00:16:12,620
And this means that we can pass our function around whenever we need it.
190
00:16:12,630 --> 00:16:18,400
So now we have an anonymous function that's set to equal a variable with a name
191
00:16:18,600 --> 00:16:24,960
and whenever we need that functionality we simply just refer to it by its name.
192
00:16:25,020 --> 00:16:31,020
So let's implement it to understand it a bit better. Instead of having our getDate as a normal Javascript
193
00:16:31,020 --> 00:16:31,640
function,
194
00:16:31,650 --> 00:16:37,650
I'm going to change it into an anonymous function so this function doesn't have a name anymore. And instead
195
00:16:37,680 --> 00:16:41,290
we're going to bind it to a variable that's called getDate.
196
00:16:41,630 --> 00:16:47,760
And now this getDate variable is bound to our anonymous function.
197
00:16:48,300 --> 00:16:51,190
And you can see now this is a little bit clearer.
198
00:16:51,270 --> 00:16:57,480
Instead of saying module.exports.getDate = getDate which is basically the contents of
199
00:16:57,480 --> 00:16:59,640
everything after the equal sign,
200
00:16:59,700 --> 00:17:08,400
then we can simply delete all this and say module.exports.getDate is now equal to this anonymous
201
00:17:08,400 --> 00:17:09,770
function.
202
00:17:10,410 --> 00:17:17,099
And this means that we save on two get dates and we make everything a little bit more succinct.
203
00:17:17,339 --> 00:17:20,210
Let's go ahead and do the same thing over here.
204
00:17:20,339 --> 00:17:25,220
Let's delete this name of the function to turn it into an anonymous function
205
00:17:25,410 --> 00:17:32,960
and we're simply going to set that function to equal module.exports.getDay.
206
00:17:33,030 --> 00:17:41,640
Now we can make this even shorter by reading through our node.js documentation because if you scroll
207
00:17:41,640 --> 00:17:48,540
down a little bit, you can see that node.js actually provides an export shortcut because just how often
208
00:17:48,600 --> 00:17:49,950
it's used.
209
00:17:49,950 --> 00:17:58,890
So instead of using module.exports we can simply just use the exports variable to refer to exactly
210
00:17:58,890 --> 00:18:00,240
the same thing.
211
00:18:00,840 --> 00:18:07,470
So here instead of saying module.exports, we can just say exports for short and it will refer to
212
00:18:07,470 --> 00:18:10,610
the same thing which is module.exports.
213
00:18:10,650 --> 00:18:11,920
So now let's hit save.
214
00:18:11,970 --> 00:18:14,020
I'm going to delete this console log
215
00:18:14,070 --> 00:18:23,670
and over here in my app.js I'm using date.getDate from my date module and I'm rendering it
216
00:18:23,850 --> 00:18:26,470
as my list title.
217
00:18:26,490 --> 00:18:33,810
So if we go ahead and launch our app now with nodemon to save ourselves the effort of restarting our
218
00:18:33,810 --> 00:18:40,680
server all the time, then we can refresh and you can see our app works exactly the same.
219
00:18:40,680 --> 00:18:45,710
Now while refactoring, we might as well try and refactor the rest of our code.
220
00:18:45,720 --> 00:18:48,160
For example we've got a lot of let around here.
221
00:18:48,180 --> 00:18:52,540
So these are variables but actually these variables are never going to vary.
222
00:18:52,590 --> 00:18:57,960
So we can simply change it to const, const here as well
223
00:18:58,110 --> 00:19:07,470
and const down here. Now because we're never really re-assigning the values of today or options, then
224
00:19:07,560 --> 00:19:10,170
this won't change our code at all.
225
00:19:10,170 --> 00:19:13,470
It still works exactly the same way.
226
00:19:13,500 --> 00:19:17,700
Now back in our app.js we can do some more of that refactoring.
227
00:19:17,700 --> 00:19:25,230
For example here where we're changing the items array into a const and you might say hey wait a minute,
228
00:19:25,690 --> 00:19:31,520
what-- we're going to change this right? We're going to add new items to this array.
229
00:19:31,590 --> 00:19:33,800
So how do we make it a constant?
230
00:19:34,200 --> 00:19:40,200
Well this is a little bit of a quirk of Javascript and it's not this way in some languages
231
00:19:40,230 --> 00:19:47,130
and it varies from language to language. But for Javascript at least, if you take a look at the MDN docs
232
00:19:47,220 --> 00:19:54,480
for const and you scroll down at some of their examples, you can see that when they talk about arrays
233
00:19:54,630 --> 00:20:04,460
when we create a constant which is an array, it's actually possible to push new items into the array.
234
00:20:04,630 --> 00:20:09,660
But it's not possible to simply assign it to a brand new array.
235
00:20:09,670 --> 00:20:14,470
This is one of the things that doesn't really stay constant.
236
00:20:14,470 --> 00:20:20,470
The other thing that doesn't stay constant is when you have an object and you can't change that object
237
00:20:20,560 --> 00:20:22,770
into an entirely new object
238
00:20:22,780 --> 00:20:23,020
right?
239
00:20:23,020 --> 00:20:28,020
This will throw an error because my object was declared as constant.
240
00:20:28,210 --> 00:20:35,800
But if you try to change one of the values that's associated with one of the keys inside the object,
241
00:20:36,100 --> 00:20:37,750
then you actually can
242
00:20:37,750 --> 00:20:40,480
even though this thing is a constant.
243
00:20:40,810 --> 00:20:46,810
So it's important to remember that when you declare something as constant in Javascript it's not protecting
244
00:20:46,810 --> 00:20:49,240
the things that's inside that thing,
245
00:20:49,240 --> 00:20:56,230
so inside the array or inside the object. You're still able to vary those things. You just can't assign
246
00:20:56,230 --> 00:21:00,220
it to a new entirely different object or array.
247
00:21:00,580 --> 00:21:08,920
So that means over here if we change all of those lets to consts, then it will still work just as well
248
00:21:09,340 --> 00:21:12,460
and we won't actually come into any problems.
249
00:21:12,610 --> 00:21:18,680
So let's hit save and nodemon's updating our server behind the scenes. And refresh our website
250
00:21:18,790 --> 00:21:24,850
you can see that we're still getting the data here and we're still able to add items into our array
251
00:21:25,660 --> 00:21:28,750
and cross them out as needed.
252
00:21:28,780 --> 00:21:35,560
So I hope you enjoyed learning about EJS and templating with me in this module. In the next module we're
253
00:21:35,560 --> 00:21:42,040
going to see if you can apply everything that we learned about EJS and templating into your very own
254
00:21:42,040 --> 00:21:42,650
project.
255
00:21:42,700 --> 00:21:45,220
So head over to the challenge once you're ready.
26504
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.