Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,390 --> 00:00:04,830
Welcome back, so I hope that you studied
2
00:00:04,830 --> 00:00:07,120
the last lecture really well,
3
00:00:07,120 --> 00:00:10,060
so that you really understood what we did there
4
00:00:10,060 --> 00:00:12,690
with our food processor function.
5
00:00:12,690 --> 00:00:15,070
Now in JavaScript, there are different ways
6
00:00:15,070 --> 00:00:16,680
of writing functions.
7
00:00:16,680 --> 00:00:18,110
And each type of function,
8
00:00:18,110 --> 00:00:20,590
works in a slightly different way.
9
00:00:20,590 --> 00:00:24,070
But don't worry, they're still all very similar.
10
00:00:24,070 --> 00:00:25,583
So let's find out now.
11
00:00:27,050 --> 00:00:30,270
So the functions that I showed you in the last lecture
12
00:00:30,270 --> 00:00:32,800
are called function declarations
13
00:00:32,800 --> 00:00:35,560
because we simply use the function keyword
14
00:00:35,560 --> 00:00:40,560
to declare a function a bit like we declare a variable.
15
00:00:40,590 --> 00:00:43,940
So let's now write another function declaration.
16
00:00:43,940 --> 00:00:47,290
And this time a function to calculate an age
17
00:00:47,290 --> 00:00:49,083
based on a given birth year.
18
00:00:50,850 --> 00:00:54,290
So let's again use the function keyword
19
00:00:54,290 --> 00:00:55,990
and we're gonna call this calcAge1
20
00:00:58,950 --> 00:01:02,030
and that's because we're gonna have another one later.
21
00:01:02,030 --> 00:01:05,290
So as I said, we want a person's birth year
22
00:01:05,290 --> 00:01:07,410
as an input to this function.
23
00:01:07,410 --> 00:01:09,750
And what is an input?
24
00:01:09,750 --> 00:01:13,530
Well, it's just a parameter in this function.
25
00:01:13,530 --> 00:01:17,600 line:15%
And the parameter remember it's a bit like a local variable,
26
00:01:17,600 --> 00:01:20,240 line:15%
that's only available inside of this function
27
00:01:22,160 --> 00:01:25,060
Then the function body with the curly braces
28
00:01:25,060 --> 00:01:28,930
and now the code that we want to create here.
29
00:01:28,930 --> 00:01:31,810
So, how do we calculate an age?
30
00:01:31,810 --> 00:01:35,230
Well, just like we did before
31
00:01:35,230 --> 00:01:36,780
we take the current year,
32
00:01:36,780 --> 00:01:40,670
which once more let's suppose it's 2037
33
00:01:40,670 --> 00:01:43,053
and then minus the person's birth year.
34
00:01:44,710 --> 00:01:47,320
And then remember to take this value now
35
00:01:47,320 --> 00:01:52,320
out of the function, we return it using the return keyword.
36
00:01:52,960 --> 00:01:57,210
So we calculate the age first and then we return that value.
37
00:01:57,210 --> 00:01:59,150
And actually we can simplify this
38
00:01:59,150 --> 00:02:02,290
and basically return all in one go.
39
00:02:02,290 --> 00:02:07,070
So there's actually no need to store this value here
40
00:02:07,070 --> 00:02:11,243
in a variable, if all we do is then later return that value.
41
00:02:12,190 --> 00:02:15,360
So in fact, we can just take this value here,
42
00:02:15,360 --> 00:02:19,770
get rid of this and then simply return the result
43
00:02:19,770 --> 00:02:22,040
of this expression here,
44
00:02:22,040 --> 00:02:26,330
so basically of this operation, okay?
45
00:02:26,330 --> 00:02:28,800
So we're taking the birth year that we're gonna receive
46
00:02:28,800 --> 00:02:31,900
and then use that to calculate the age.
47
00:02:31,900 --> 00:02:35,940
And so once again, this is a generic function,
48
00:02:35,940 --> 00:02:40,700
which is then gonna work for any birth year that we give it.
49
00:02:40,700 --> 00:02:44,040
So of course, let's now call or invoke
50
00:02:44,040 --> 00:02:46,160
or execute this function.
51
00:02:46,160 --> 00:02:47,240
And again, I can use
52
00:02:47,240 --> 00:02:50,390
all of these three words interchangeably,
53
00:02:50,390 --> 00:02:52,650
they all mean the same thing.
54
00:02:52,650 --> 00:02:57,310
So calcAgel and then remember to call the function
55
00:02:57,310 --> 00:03:00,450
we use parenthesis and then we specify
56
00:03:00,450 --> 00:03:03,130
the actual value of the parameter
57
00:03:03,130 --> 00:03:06,060
which is called the argument, remember?
58
00:03:06,060 --> 00:03:08,330
So let's say 1991.
59
00:03:08,330 --> 00:03:10,690
Now some people use the words arguments
60
00:03:10,690 --> 00:03:13,850
and parameters as if they were the same
61
00:03:13,850 --> 00:03:16,030
and actually that's not a big deal
62
00:03:16,030 --> 00:03:20,280
but to be really precise, the parameter is again
63
00:03:20,280 --> 00:03:23,280
the kind of placeholder in the function
64
00:03:23,280 --> 00:03:26,230
and the argument is then the actual value
65
00:03:26,230 --> 00:03:29,360
that we use to fill in that placeholder
66
00:03:29,360 --> 00:03:31,440
that is the parameter.
67
00:03:31,440 --> 00:03:36,370
Anyway, this will now create a value, right?
68
00:03:36,370 --> 00:03:39,280
And the value that this will create is the value
69
00:03:39,280 --> 00:03:42,410
that's returned from the calcAge function
70
00:03:42,410 --> 00:03:44,990
so basically this returned value.
71
00:03:44,990 --> 00:03:47,860
And so, once again, we need to capture
72
00:03:47,860 --> 00:03:51,860
or to save that value into a variable.
73
00:03:51,860 --> 00:03:53,010
So let's call this age1
74
00:03:55,400 --> 00:03:57,610
and just to make sure that it works,
75
00:03:57,610 --> 00:04:00,923
let's quickly check it out in the console.
76
00:04:04,060 --> 00:04:04,893
Okay.
77
00:04:06,340 --> 00:04:10,323
And indeed, we get 46 just like we did before, okay?
78
00:04:12,810 --> 00:04:15,690
So that is a function declaration
79
00:04:15,690 --> 00:04:19,060
but now let's create a function expression.
80
00:04:19,060 --> 00:04:22,080
So that's the other type of function that exists
81
00:04:22,080 --> 00:04:23,773
and it looks like this.
82
00:04:25,040 --> 00:04:29,320
Instead of writing a function with the calcAge name,
83
00:04:29,320 --> 00:04:32,300
we simply write function basically without a name
84
00:04:33,360 --> 00:04:38,020
and then we still define the parameter,
85
00:04:38,020 --> 00:04:40,260
we still define the function body,
86
00:04:40,260 --> 00:04:43,340
which is gonna be the same as this one
87
00:04:43,340 --> 00:04:45,893
because we want another calcAge function here.
88
00:04:46,990 --> 00:04:48,930
So we write a function like this
89
00:04:48,930 --> 00:04:50,760
and then what we have to do
90
00:04:50,760 --> 00:04:54,480
is to store all of this here into a variable
91
00:04:55,520 --> 00:04:58,253
and that variable will then be the function.
92
00:04:59,520 --> 00:05:01,287
So let's call it, calcAge2.
93
00:05:03,110 --> 00:05:07,990
So again, we did write the function in a very similar way,
94
00:05:07,990 --> 00:05:10,220
but we didn't give it a name here,
95
00:05:10,220 --> 00:05:13,070
so it's a function without a name basically,
96
00:05:13,070 --> 00:05:16,330
which is also called an anonymous function.
97
00:05:16,330 --> 00:05:19,090
So all of this here is basically an expression
98
00:05:19,090 --> 00:05:22,110
and remember that an expression produces a value.
99
00:05:22,110 --> 00:05:26,390
And so we use that value in store it into calcAge2
100
00:05:26,390 --> 00:05:28,890
and this will then be the function.
101
00:05:28,890 --> 00:05:31,280
And I know that sounds very confusing
102
00:05:31,280 --> 00:05:33,133
but it will make sense, trust me.
103
00:05:34,000 --> 00:05:35,670
Now to call this function,
104
00:05:35,670 --> 00:05:38,423
we actually do it in the exact same way.
105
00:05:39,510 --> 00:05:44,510
So let's do age2 equals calcAge2
106
00:05:46,710 --> 00:05:48,770
and let's use 1991 again
107
00:05:49,790 --> 00:05:54,230
and then let's grab this console.log here
108
00:05:54,230 --> 00:05:58,383
and log both the ages, So age2 here,
109
00:05:59,650 --> 00:06:01,653
let's also add some comments here,
110
00:06:03,350 --> 00:06:08,350
function declaration and function expression.
111
00:06:13,200 --> 00:06:15,730
And so we should get twice
112
00:06:15,730 --> 00:06:19,800
the 46 value here and yes, indeed.
113
00:06:19,800 --> 00:06:22,320
So the functional expression works
114
00:06:22,320 --> 00:06:25,120
the exact same way as the function declaration.
115
00:06:25,120 --> 00:06:27,500
So we call it in the same way we capture
116
00:06:27,500 --> 00:06:29,700
the return value in the same way
117
00:06:29,700 --> 00:06:32,890
and then of course the result is also the same
118
00:06:32,890 --> 00:06:36,020
because the function body is the same.
119
00:06:36,020 --> 00:06:37,480
But it's very important to know
120
00:06:37,480 --> 00:06:41,020
that we have these two type of functions in JavaScript.
121
00:06:41,020 --> 00:06:43,580
Because in some places we will actually need
122
00:06:43,580 --> 00:06:45,540
to write them like this,
123
00:06:45,540 --> 00:06:48,740
as you will see as we go through the course.
124
00:06:48,740 --> 00:06:51,610
So again, this part here that I just highlighted
125
00:06:51,610 --> 00:06:54,970
this function here is in fact an expression
126
00:06:54,970 --> 00:06:58,440
and remember that expressions produce values.
127
00:06:58,440 --> 00:07:01,200
And so we just assign this whole value here
128
00:07:01,200 --> 00:07:04,100
then to this variable.
129
00:07:04,100 --> 00:07:06,480
And so this variable will then hold
130
00:07:06,480 --> 00:07:09,020
this function value basically.
131
00:07:09,020 --> 00:07:12,320
And one big implication of what I just said,
132
00:07:12,320 --> 00:07:15,310
So, that this here is just a value, yeah,
133
00:07:15,310 --> 00:07:17,420
is that in fact in JavaScript,
134
00:07:17,420 --> 00:07:20,050
functions are actually just values.
135
00:07:20,050 --> 00:07:24,290
So just as a number or a string or a boolean value.
136
00:07:24,290 --> 00:07:26,190
So a function is not a type, okay?
137
00:07:26,190 --> 00:07:28,800
It's not like a string or number type
138
00:07:28,800 --> 00:07:31,090
but it's also a value.
139
00:07:31,090 --> 00:07:34,670
And so if it's a value, we can store it in a variable.
140
00:07:34,670 --> 00:07:36,160
So just keep this in mind
141
00:07:36,160 --> 00:07:38,870
because it will become very important later
142
00:07:38,870 --> 00:07:42,400
when we really dig deep into functions.
143
00:07:42,400 --> 00:07:45,350
Now, besides these technical differences,
144
00:07:45,350 --> 00:07:48,100
you might be wondering what is the big deal?
145
00:07:48,100 --> 00:07:49,860
So what's the big difference between
146
00:07:49,860 --> 00:07:53,480
function declarations and function expressions?
147
00:07:53,480 --> 00:07:55,640
Well, the main practical difference
148
00:07:55,640 --> 00:07:58,600
is that we can actually call function declarations
149
00:07:58,600 --> 00:08:01,660
before they are defined in the code.
150
00:08:01,660 --> 00:08:05,130
So let me show that to you.
151
00:08:05,130 --> 00:08:07,720
So here is the declaration, right?
152
00:08:07,720 --> 00:08:10,700
This is the function declaration and as I just said,
153
00:08:10,700 --> 00:08:15,700
we can call them in a code before they are defined.
154
00:08:16,780 --> 00:08:21,260
So now we're calling it first and then defining it later.
155
00:08:21,260 --> 00:08:23,260
So let me show you that that still works
156
00:08:24,760 --> 00:08:27,390
and indeed we still get the same result.
157
00:08:27,390 --> 00:08:30,353
But if we attempt to do the same with the expression,
158
00:08:32,460 --> 00:08:34,650
then that should not work.
159
00:08:34,650 --> 00:08:38,570
So let's see and yeah,
160
00:08:38,570 --> 00:08:42,963
so cannot access calcAge2 before initialization, okay?
161
00:08:44,580 --> 00:08:46,790
and internally this happens
162
00:08:46,790 --> 00:08:49,800
because of a process called hoisting
163
00:08:49,800 --> 00:08:54,520
but more about that in a future section, okay?
164
00:08:54,520 --> 00:08:58,620
For now just keep in mind that you can call
165
00:08:58,620 --> 00:09:01,670
a function declaration before you define it
166
00:09:01,670 --> 00:09:06,670
even though that might not be such a good idea in many cases
167
00:09:06,810 --> 00:09:09,850
but you can do it if necessary.
168
00:09:09,850 --> 00:09:11,840
All right, now another question
169
00:09:11,840 --> 00:09:13,580
that you might have in your mind
170
00:09:13,580 --> 00:09:17,030
is which of the two types of functions should I use
171
00:09:17,030 --> 00:09:19,860
when I write my own functions?
172
00:09:19,860 --> 00:09:23,420
And well, the answer is that oftentimes
173
00:09:23,420 --> 00:09:27,070
it's really just a matter of personal preference.
174
00:09:27,070 --> 00:09:30,680
and so different developers prefer different formats.
175
00:09:30,680 --> 00:09:34,470
Personally, I prefer to use function expressions
176
00:09:34,470 --> 00:09:37,980
because this then forces me into a nice structure
177
00:09:37,980 --> 00:09:40,630
where I have to define all the functions first
178
00:09:40,630 --> 00:09:44,190
at the top of the code and only then I can call them.
179
00:09:44,190 --> 00:09:46,590
So this makes the code a little bit nicer
180
00:09:46,590 --> 00:09:48,330
and more structured.
181
00:09:48,330 --> 00:09:52,040
I also like to have everything stored in variables,
182
00:09:52,040 --> 00:09:55,640
so both values and functions, but again,
183
00:09:55,640 --> 00:09:58,520
that is just my own personal preference.
184
00:09:58,520 --> 00:10:01,580
And many other developers don't agree with this
185
00:10:01,580 --> 00:10:04,400
and prefer to use function declarations.
186
00:10:04,400 --> 00:10:08,470
So, if you also prefer a function declarations, that's fine.
187
00:10:08,470 --> 00:10:11,030
So, just use declarations then.
188
00:10:11,030 --> 00:10:13,030
It's absolutely no problem.
189
00:10:13,030 --> 00:10:16,570
However, even if you prefer one over the other,
190
00:10:16,570 --> 00:10:18,840
you still need to know about both
191
00:10:18,840 --> 00:10:22,360
the function expressions and function declarations.
192
00:10:22,360 --> 00:10:24,030
So you can not just pick one
193
00:10:24,030 --> 00:10:26,000
and then forget the other one
194
00:10:26,000 --> 00:10:29,140
because both have their place in JavaScript.
195
00:10:29,140 --> 00:10:31,370
And so it's really important that you know
196
00:10:31,370 --> 00:10:33,780
how to use and how's to distinguish
197
00:10:33,780 --> 00:10:36,913
both function declarations and expressions.
14761
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.