Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,330 --> 00:00:02,590 Let's now talk about 2 2 00:00:02,590 --> 00:00:06,020 a fundamental property of the JavaScript language. 3 3 00:00:06,020 --> 00:00:09,970 Which is the fact that it has first class functions. 4 4 00:00:09,970 --> 00:00:13,730 This enables us to write higher order functions. 5 5 00:00:13,730 --> 00:00:15,800 But what's that all about? 6 6 00:00:15,800 --> 00:00:17,093 Well, let's see. 7 7 00:00:18,640 --> 00:00:23,030 So, JavaScript is a language that has first class functions 8 8 00:00:23,030 --> 00:00:24,690 which in technical terms 9 9 00:00:24,690 --> 00:00:28,930 means that functions are so-called first citizens. 10 10 00:00:28,930 --> 00:00:31,420 In practice, that means that functions 11 11 00:00:31,420 --> 00:00:34,310 are simply treated as values. 12 12 00:00:34,310 --> 00:00:36,650 And we already touched on that idea 13 13 00:00:36,650 --> 00:00:38,400 a couple of times before, 14 14 00:00:38,400 --> 00:00:41,860 but this is such an important feature of the language 15 15 00:00:41,860 --> 00:00:46,240 that it's worth spending some more time talking about this. 16 16 00:00:46,240 --> 00:00:49,810 Now, why does JavaScript work this way? 17 17 00:00:49,810 --> 00:00:52,260 Well, it's simply because functions 18 18 00:00:52,260 --> 00:00:56,300 are really just another type of objects in JavaScript. 19 19 00:00:56,300 --> 00:00:58,700 And since objects are values, 20 20 00:00:58,700 --> 00:01:01,120 functions are values too. 21 21 00:01:01,120 --> 00:01:03,220 And since functions are values, 22 22 00:01:03,220 --> 00:01:05,123 there is a bunch of interesting things 23 23 00:01:05,123 --> 00:01:06,760 that we can do with them, 24 24 00:01:06,760 --> 00:01:10,420 like storing them in variables or object properties. 25 25 00:01:10,420 --> 00:01:11,270 And that, of course, 26 26 00:01:11,270 --> 00:01:14,560 we already did a couple of times before. 27 27 00:01:14,560 --> 00:01:17,850 So the function values here are marked in red, 28 28 00:01:17,850 --> 00:01:20,420 and then you see, we create a function expression 29 29 00:01:20,420 --> 00:01:23,510 in the first example and an object method 30 30 00:01:23,510 --> 00:01:25,510 in the second example. 31 31 00:01:25,510 --> 00:01:27,580 So the value in the red rectangle 32 32 00:01:27,580 --> 00:01:29,650 is the function value itself, 33 33 00:01:29,650 --> 00:01:32,640 that we can store wherever we like. 34 34 00:01:32,640 --> 00:01:37,330 We can also pass functions as arguments to other functions. 35 35 00:01:37,330 --> 00:01:39,850 And we actually already did that before 36 36 00:01:39,850 --> 00:01:42,980 when adding event listeners or event handlers 37 37 00:01:42,980 --> 00:01:45,000 to dumb objects. 38 38 00:01:45,000 --> 00:01:47,580 So here we have the add event listener function 39 39 00:01:47,580 --> 00:01:49,000 that you already know, 40 40 00:01:49,000 --> 00:01:51,240 and we clearly passed the greet function 41 41 00:01:51,240 --> 00:01:53,350 into the add event list note function 42 42 00:01:53,350 --> 00:01:55,910 here as a value, right? 43 43 00:01:55,910 --> 00:01:58,550 Now to make it even more interesting, 44 44 00:01:58,550 --> 00:02:02,720 we can also return a function from another function. 45 45 00:02:02,720 --> 00:02:04,220 That sounds kind of crazy, 46 46 00:02:04,220 --> 00:02:06,113 but it can be very useful. 47 47 00:02:06,970 --> 00:02:10,850 Finally, remember that functions are objects. 48 48 00:02:10,850 --> 00:02:15,400 And many types of objects in JavaScript have methods, right? 49 49 00:02:15,400 --> 00:02:18,140 Like array methods, for example. 50 50 00:02:18,140 --> 00:02:21,210 And actually there are also function methods. 51 51 00:02:21,210 --> 00:02:24,310 So methods that we can call on functions. 52 52 00:02:24,310 --> 00:02:27,510 So again, that sounds a bit crazy, right? 53 53 00:02:27,510 --> 00:02:30,140 But we will see how to use this to our advantage 54 54 00:02:30,140 --> 00:02:32,230 throughout this section. 55 55 00:02:32,230 --> 00:02:35,110 This bind method here is an example of that. 56 56 00:02:35,110 --> 00:02:38,510 And again, we will learn about the bind method 57 57 00:02:38,510 --> 00:02:40,013 as we go through the section. 58 58 00:02:40,990 --> 00:02:42,000 All right. 59 59 00:02:42,000 --> 00:02:46,010 Now the fact that JavaScript has first-class functions 60 60 00:02:46,010 --> 00:02:48,970 makes it possible for us to use and write 61 61 00:02:48,970 --> 00:02:51,400 higher order functions. 62 62 00:02:51,400 --> 00:02:53,520 So a higher order function 63 63 00:02:53,520 --> 00:02:56,410 is either a function that receives another function 64 64 00:02:56,410 --> 00:02:57,870 as an argument, 65 65 00:02:57,870 --> 00:03:01,490 or a function that returns a new function. 66 66 00:03:01,490 --> 00:03:04,460 So let's check out both types here. 67 67 00:03:04,460 --> 00:03:07,860 First, for functions that receive another function. 68 68 00:03:07,860 --> 00:03:10,890 we have the same example as before. 69 69 00:03:10,890 --> 00:03:13,210 So here, the add event listener function 70 70 00:03:13,210 --> 00:03:15,510 is the higher order function. 71 71 00:03:15,510 --> 00:03:16,770 And why? 72 72 00:03:16,770 --> 00:03:21,300 Well, because it receives another function as an input. 73 73 00:03:21,300 --> 00:03:23,960 In this case, the greet function. 74 74 00:03:23,960 --> 00:03:27,150 And we usually say that the function that is passed in 75 75 00:03:27,150 --> 00:03:29,370 is a callback function. 76 76 00:03:29,370 --> 00:03:32,850 That's because the callback function will be called later 77 77 00:03:32,850 --> 00:03:35,220 by the higher order function. 78 78 00:03:35,220 --> 00:03:36,210 In this case, 79 79 00:03:36,210 --> 00:03:39,680 add event listener will call the greet callback later 80 80 00:03:39,680 --> 00:03:42,490 as soon as the click event happens. 81 81 00:03:42,490 --> 00:03:44,297 It's like the greet function saying, 82 82 00:03:44,297 --> 00:03:46,830 "Hey there, don't greet me yet, 83 83 00:03:46,830 --> 00:03:49,580 but call me back once you're ready." 84 84 00:03:49,580 --> 00:03:51,900 And this works, not only in the context 85 85 00:03:51,900 --> 00:03:54,100 of the add event listener function, 86 86 00:03:54,100 --> 00:03:57,100 but in many other use cases as well. 87 87 00:03:57,100 --> 00:03:58,740 Okay, second, 88 88 00:03:58,740 --> 00:04:02,890 we can also have functions that return another function. 89 89 00:04:02,890 --> 00:04:05,690 So we have the higher order function here. 90 90 00:04:05,690 --> 00:04:08,160 So basically this whole code block, 91 91 00:04:08,160 --> 00:04:10,520 which clearly returns a new function, 92 92 00:04:10,520 --> 00:04:12,200 which is this one. 93 93 00:04:12,200 --> 00:04:13,760 And this style of functions 94 94 00:04:13,760 --> 00:04:16,270 is also used a lot in JavaScript. 95 95 00:04:16,270 --> 00:04:18,210 But it's also more advanced, 96 96 00:04:18,210 --> 00:04:20,820 and I guess harder to understand. 97 97 00:04:20,820 --> 00:04:23,070 I will show it to you in the next lecture, 98 98 00:04:23,070 --> 00:04:26,130 but we will explore this deeper a bit later. 99 99 00:04:26,130 --> 00:04:27,480 Now, just to finish, 100 100 00:04:27,480 --> 00:04:29,620 there seems to be some confusion between 101 101 00:04:29,620 --> 00:04:33,610 first-class functions and higher order functions. 102 102 00:04:33,610 --> 00:04:36,550 Some people think that they are the same thing. 103 103 00:04:36,550 --> 00:04:39,800 But actually they mean different things. 104 104 00:04:39,800 --> 00:04:43,220 So, first class functions is just a feature 105 105 00:04:43,220 --> 00:04:47,300 that a programming language either has or does not have. 106 106 00:04:47,300 --> 00:04:50,870 All it means is that all functions are values. 107 107 00:04:50,870 --> 00:04:52,040 That's it. 108 108 00:04:52,040 --> 00:04:55,800 There are no first class functions in practice, okay? 109 109 00:04:55,800 --> 00:04:57,910 It's just a concept. 110 110 00:04:57,910 --> 00:05:01,870 There are however higher order functions in practice, 111 111 00:05:01,870 --> 00:05:04,880 which are possible because the language supports 112 112 00:05:04,880 --> 00:05:07,010 first class functions. 113 113 00:05:07,010 --> 00:05:08,660 So it's a subtle difference, 114 114 00:05:08,660 --> 00:05:11,800 but still worth noting if you want to be able to talk 115 115 00:05:11,800 --> 00:05:14,003 like a true JavaScript master. 116 116 00:05:14,870 --> 00:05:15,980 Great. 117 117 00:05:15,980 --> 00:05:17,310 Now in the next lecture, 118 118 00:05:17,310 --> 00:05:21,033 let's actually create or own higher order functions. 9901