WEBVTT 1 00:00:01.330 --> 00:00:02.590 Let's now talk about 2 00:00:02.590 --> 00:00:06.020 a fundamental property of the JavaScript language. 3 00:00:06.020 --> 00:00:09.970 Which is the fact that it has first class functions. 4 00:00:09.970 --> 00:00:13.730 This enables us to write higher order functions. 5 00:00:13.730 --> 00:00:15.800 But what's that all about? 6 00:00:15.800 --> 00:00:17.093 Well, let's see. 7 00:00:18.640 --> 00:00:23.030 So, JavaScript is a language that has first class functions 8 00:00:23.030 --> 00:00:24.690 which in technical terms 9 00:00:24.690 --> 00:00:28.930 means that functions are so-called first citizens. 10 00:00:28.930 --> 00:00:31.420 In practice, that means that functions 11 00:00:31.420 --> 00:00:34.310 are simply treated as values. 12 00:00:34.310 --> 00:00:36.650 And we already touched on that idea 13 00:00:36.650 --> 00:00:38.400 a couple of times before, 14 00:00:38.400 --> 00:00:41.860 but this is such an important feature of the language 15 00:00:41.860 --> 00:00:46.240 that it's worth spending some more time talking about this. 16 00:00:46.240 --> 00:00:49.810 Now, why does JavaScript work this way? 17 00:00:49.810 --> 00:00:52.260 Well, it's simply because functions 18 00:00:52.260 --> 00:00:56.300 are really just another type of objects in JavaScript. 19 00:00:56.300 --> 00:00:58.700 And since objects are values, 20 00:00:58.700 --> 00:01:01.120 functions are values too. 21 00:01:01.120 --> 00:01:03.220 And since functions are values, 22 00:01:03.220 --> 00:01:05.123 there is a bunch of interesting things 23 00:01:05.123 --> 00:01:06.760 that we can do with them, 24 00:01:06.760 --> 00:01:10.420 like storing them in variables or object properties. 25 00:01:10.420 --> 00:01:11.270 And that, of course, 26 00:01:11.270 --> 00:01:14.560 we already did a couple of times before. 27 00:01:14.560 --> 00:01:17.850 So the function values here are marked in red, 28 00:01:17.850 --> 00:01:20.420 and then you see, we create a function expression 29 00:01:20.420 --> 00:01:23.510 in the first example and an object method 30 00:01:23.510 --> 00:01:25.510 in the second example. 31 00:01:25.510 --> 00:01:27.580 So the value in the red rectangle 32 00:01:27.580 --> 00:01:29.650 is the function value itself, 33 00:01:29.650 --> 00:01:32.640 that we can store wherever we like. 34 00:01:32.640 --> 00:01:37.330 We can also pass functions as arguments to other functions. 35 00:01:37.330 --> 00:01:39.850 And we actually already did that before 36 00:01:39.850 --> 00:01:42.980 when adding event listeners or event handlers 37 00:01:42.980 --> 00:01:45.000 to dumb objects. 38 00:01:45.000 --> 00:01:47.580 So here we have the add event listener function 39 00:01:47.580 --> 00:01:49.000 that you already know, 40 00:01:49.000 --> 00:01:51.240 and we clearly passed the greet function 41 00:01:51.240 --> 00:01:53.350 into the add event list note function 42 00:01:53.350 --> 00:01:55.910 here as a value, right? 43 00:01:55.910 --> 00:01:58.550 Now to make it even more interesting, 44 00:01:58.550 --> 00:02:02.720 we can also return a function from another function. 45 00:02:02.720 --> 00:02:04.220 That sounds kind of crazy, 46 00:02:04.220 --> 00:02:06.113 but it can be very useful. 47 00:02:06.970 --> 00:02:10.850 Finally, remember that functions are objects. 48 00:02:10.850 --> 00:02:15.400 And many types of objects in JavaScript have methods, right? 49 00:02:15.400 --> 00:02:18.140 Like array methods, for example. 50 00:02:18.140 --> 00:02:21.210 And actually there are also function methods. 51 00:02:21.210 --> 00:02:24.310 So methods that we can call on functions. 52 00:02:24.310 --> 00:02:27.510 So again, that sounds a bit crazy, right? 53 00:02:27.510 --> 00:02:30.140 But we will see how to use this to our advantage 54 00:02:30.140 --> 00:02:32.230 throughout this section. 55 00:02:32.230 --> 00:02:35.110 This bind method here is an example of that. 56 00:02:35.110 --> 00:02:38.510 And again, we will learn about the bind method 57 00:02:38.510 --> 00:02:40.013 as we go through the section. 58 00:02:40.990 --> 00:02:42.000 All right. 59 00:02:42.000 --> 00:02:46.010 Now the fact that JavaScript has first-class functions 60 00:02:46.010 --> 00:02:48.970 makes it possible for us to use and write 61 00:02:48.970 --> 00:02:51.400 higher order functions. 62 00:02:51.400 --> 00:02:53.520 So a higher order function 63 00:02:53.520 --> 00:02:56.410 is either a function that receives another function 64 00:02:56.410 --> 00:02:57.870 as an argument, 65 00:02:57.870 --> 00:03:01.490 or a function that returns a new function. 66 00:03:01.490 --> 00:03:04.460 So let's check out both types here. 67 00:03:04.460 --> 00:03:07.860 First, for functions that receive another function. 68 00:03:07.860 --> 00:03:10.890 we have the same example as before. 69 00:03:10.890 --> 00:03:13.210 So here, the add event listener function 70 00:03:13.210 --> 00:03:15.510 is the higher order function. 71 00:03:15.510 --> 00:03:16.770 And why? 72 00:03:16.770 --> 00:03:21.300 Well, because it receives another function as an input. 73 00:03:21.300 --> 00:03:23.960 In this case, the greet function. 74 00:03:23.960 --> 00:03:27.150 And we usually say that the function that is passed in 75 00:03:27.150 --> 00:03:29.370 is a callback function. 76 00:03:29.370 --> 00:03:32.850 That's because the callback function will be called later 77 00:03:32.850 --> 00:03:35.220 by the higher order function. 78 00:03:35.220 --> 00:03:36.210 In this case, 79 00:03:36.210 --> 00:03:39.680 add event listener will call the greet callback later 80 00:03:39.680 --> 00:03:42.490 as soon as the click event happens. 81 00:03:42.490 --> 00:03:44.297 It's like the greet function saying, 82 00:03:44.297 --> 00:03:46.830 "Hey there, don't greet me yet, 83 00:03:46.830 --> 00:03:49.580 but call me back once you're ready." 84 00:03:49.580 --> 00:03:51.900 And this works, not only in the context 85 00:03:51.900 --> 00:03:54.100 of the add event listener function, 86 00:03:54.100 --> 00:03:57.100 but in many other use cases as well. 87 00:03:57.100 --> 00:03:58.740 Okay, second, 88 00:03:58.740 --> 00:04:02.890 we can also have functions that return another function. 89 00:04:02.890 --> 00:04:05.690 So we have the higher order function here. 90 00:04:05.690 --> 00:04:08.160 So basically this whole code block, 91 00:04:08.160 --> 00:04:10.520 which clearly returns a new function, 92 00:04:10.520 --> 00:04:12.200 which is this one. 93 00:04:12.200 --> 00:04:13.760 And this style of functions 94 00:04:13.760 --> 00:04:16.270 is also used a lot in JavaScript. 95 00:04:16.270 --> 00:04:18.210 But it's also more advanced, 96 00:04:18.210 --> 00:04:20.820 and I guess harder to understand. 97 00:04:20.820 --> 00:04:23.070 I will show it to you in the next lecture, 98 00:04:23.070 --> 00:04:26.130 but we will explore this deeper a bit later. 99 00:04:26.130 --> 00:04:27.480 Now, just to finish, 100 00:04:27.480 --> 00:04:29.620 there seems to be some confusion between 101 00:04:29.620 --> 00:04:33.610 first-class functions and higher order functions. 102 00:04:33.610 --> 00:04:36.550 Some people think that they are the same thing. 103 00:04:36.550 --> 00:04:39.800 But actually they mean different things. 104 00:04:39.800 --> 00:04:43.220 So, first class functions is just a feature 105 00:04:43.220 --> 00:04:47.300 that a programming language either has or does not have. 106 00:04:47.300 --> 00:04:50.870 All it means is that all functions are values. 107 00:04:50.870 --> 00:04:52.040 That's it. 108 00:04:52.040 --> 00:04:55.800 There are no first class functions in practice, okay? 109 00:04:55.800 --> 00:04:57.910 It's just a concept. 110 00:04:57.910 --> 00:05:01.870 There are however higher order functions in practice, 111 00:05:01.870 --> 00:05:04.880 which are possible because the language supports 112 00:05:04.880 --> 00:05:07.010 first class functions. 113 00:05:07.010 --> 00:05:08.660 So it's a subtle difference, 114 00:05:08.660 --> 00:05:11.800 but still worth noting if you want to be able to talk 115 00:05:11.800 --> 00:05:14.003 like a true JavaScript master. 116 00:05:14.870 --> 00:05:15.980 Great. 117 00:05:15.980 --> 00:05:17.310 Now in the next lecture, 118 00:05:17.310 --> 00:05:21.033 let's actually create or own higher order functions.