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 And the parameter remember it's a bit like a local variable, 26 00:01:17,600 --> 00:01:20,240 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.