1 00:00:01,180 --> 00:00:08,200 In this video, we are going to create a function that retains another function. 2 00:00:08,710 --> 00:00:17,470 So which means that in JavaScript functions are first class citizens because a function can retain another 3 00:00:17,470 --> 00:00:18,280 function. 4 00:00:18,640 --> 00:00:26,980 In the previous video, what we did was that we pass in a function as an argument to a function. 5 00:00:26,980 --> 00:00:30,970 So this is what you call high order function. 6 00:00:31,480 --> 00:00:37,270 Again, not all first class functions are high order functions. 7 00:00:37,600 --> 00:00:38,110 Great. 8 00:00:38,110 --> 00:00:44,410 So let's see how we can create a function that retains another function. 9 00:00:47,940 --> 00:00:49,580 This looks weird, right? 10 00:00:49,590 --> 00:00:52,710 So let's see how we are going to implement it. 11 00:00:53,250 --> 00:00:59,910 We are going to write very simple function and let's see how it's going to retain another function. 12 00:00:59,910 --> 00:01:01,290 So here we go. 13 00:01:01,800 --> 00:01:04,410 We are going to use normal function syntax. 14 00:01:04,410 --> 00:01:14,220 The name of this function is going to be add to nums, meaning add two numbers for the first one. 15 00:01:14,340 --> 00:01:17,580 For the meantime, let's leave it as empty. 16 00:01:17,580 --> 00:01:24,510 You are not going to pass in any argument this particular function and then my carry braces. 17 00:01:24,900 --> 00:01:26,370 So here you go. 18 00:01:26,370 --> 00:01:30,690 Return retains what retained a function. 19 00:01:30,690 --> 00:01:34,590 But remember the function that you are going to retain. 20 00:01:34,590 --> 00:01:40,710 Normally we use what is called anonymous function, meaning a function without a name. 21 00:01:41,010 --> 00:01:45,600 So we are going to use normal function or we can use every function. 22 00:01:45,600 --> 00:01:47,550 So let's use normal function. 23 00:01:47,550 --> 00:01:52,200 This function has no name, so this is a valid syntax. 24 00:01:52,200 --> 00:02:00,600 So what we have written is called a function returning another function for the inner function to we 25 00:02:00,600 --> 00:02:02,580 are not going to pass in anything. 26 00:02:02,580 --> 00:02:08,610 So for the meantime, let's log some text to the console and says that. 27 00:02:11,360 --> 00:02:12,200 Code. 28 00:02:12,200 --> 00:02:12,860 Perfect. 29 00:02:12,860 --> 00:02:18,200 Now we have written a valid function that returns another function. 30 00:02:18,200 --> 00:02:22,250 So let's check our console if something went wrong. 31 00:02:22,280 --> 00:02:24,860 Indeed, there is nothing wrong. 32 00:02:25,160 --> 00:02:27,110 This results is from this function. 33 00:02:27,110 --> 00:02:29,510 So let me comment this one out. 34 00:02:29,870 --> 00:02:34,930 Let's see how we can call this particular function before we call it. 35 00:02:34,940 --> 00:02:37,520 Let's see how it's going to be called. 36 00:02:37,550 --> 00:02:38,270 Great. 37 00:02:38,300 --> 00:02:46,580 Assuming that we don't have this in a function over here, then this function is going to return a value, 38 00:02:46,610 --> 00:02:49,570 whether console.log or with any logic. 39 00:02:49,580 --> 00:02:53,870 So the first step is we can assign the result. 40 00:02:53,870 --> 00:02:57,380 Let me say E to the first. 41 00:02:57,410 --> 00:02:59,000 Let me say first function. 42 00:02:59,270 --> 00:03:07,160 First function is equal to my add to numbers and I'll call it as a function. 43 00:03:07,550 --> 00:03:08,210 Good. 44 00:03:08,210 --> 00:03:18,770 So it means that what comes out from this function is not a value, but instead is this particular function. 45 00:03:18,770 --> 00:03:23,000 So behind the scene this one is also a function. 46 00:03:23,330 --> 00:03:30,230 So if you console.log first function, I'm going to see that it's going to be a function. 47 00:03:30,230 --> 00:03:38,480 So let's just drop or dump it into the console and let's see now indeed we have seen what is called 48 00:03:38,510 --> 00:03:40,130 a function down here. 49 00:03:40,460 --> 00:03:44,960 So if this a function, then it means we can invoke it, right? 50 00:03:45,320 --> 00:03:51,430 Or we can also check using type of operator if indeed it's a function. 51 00:03:51,440 --> 00:03:58,280 Now, if I save it, you can see that, yes, this is a function because the first function is returning 52 00:03:58,280 --> 00:03:59,240 the inner function. 53 00:03:59,240 --> 00:04:04,010 So what I got back after calling this function, it's a function. 54 00:04:04,070 --> 00:04:04,760 Great. 55 00:04:04,760 --> 00:04:09,530 So now that we know that is a function, we can go ahead and call this function. 56 00:04:09,530 --> 00:04:13,370 So if I call this function down here now let's see. 57 00:04:13,850 --> 00:04:16,850 Now we see that I got called. 58 00:04:16,850 --> 00:04:18,950 Now the function has been called. 59 00:04:18,950 --> 00:04:21,350 So let's move step by step here. 60 00:04:21,589 --> 00:04:22,100 Great. 61 00:04:22,100 --> 00:04:23,180 So the same thing. 62 00:04:23,180 --> 00:04:28,100 I can also assign a value to this function that I'm going to invoke. 63 00:04:28,130 --> 00:04:31,730 So counts, let's say second. 64 00:04:33,160 --> 00:04:36,190 Second function is equal to. 65 00:04:36,220 --> 00:04:39,100 My first function as that. 66 00:04:39,130 --> 00:04:43,180 So now if I console.log, she can't function. 67 00:04:43,960 --> 00:04:45,030 Let's see what we have. 68 00:04:45,040 --> 00:04:45,670 Indeed. 69 00:04:45,700 --> 00:04:48,570 You see, I got code. 70 00:04:48,940 --> 00:04:49,600 Good. 71 00:04:49,630 --> 00:04:52,840 We also have another way of calling this function. 72 00:04:52,840 --> 00:04:54,670 So let's see the other option tool. 73 00:04:54,700 --> 00:04:57,310 So for the meantime, let me comment. 74 00:04:57,310 --> 00:04:58,510 This one's out. 75 00:04:59,870 --> 00:05:00,560 Perfect. 76 00:05:00,560 --> 00:05:06,140 And now what I'm going to do is that for the first one, let me bring this one in the mix or better. 77 00:05:06,150 --> 00:05:07,820 So let's start from clean sheet. 78 00:05:07,820 --> 00:05:14,960 So I'm going to call my first function as that great because a function, I can invoke it as that. 79 00:05:14,960 --> 00:05:17,180 And what comes back is a function. 80 00:05:17,180 --> 00:05:19,100 So I can also call it as that. 81 00:05:19,100 --> 00:05:21,590 And this is perfect syntax. 82 00:05:21,590 --> 00:05:26,180 If I save it, you can see, let's see when I save this particular function. 83 00:05:26,180 --> 00:05:27,200 Let's see. 84 00:05:28,420 --> 00:05:31,060 You see, I got caught. 85 00:05:31,180 --> 00:05:32,810 So looking at this entire. 86 00:05:32,920 --> 00:05:37,230 Which one do you think is okay or is clean based on your preferences? 87 00:05:37,240 --> 00:05:39,460 The choice is yours group. 88 00:05:39,470 --> 00:05:43,930 I think this is very easy, but if anyone to JavaScript this one looks great. 89 00:05:43,930 --> 00:05:44,530 Right. 90 00:05:44,530 --> 00:05:46,930 But let's stick to this for the meantime. 91 00:05:47,080 --> 00:05:47,490 Good. 92 00:05:47,500 --> 00:05:53,670 So now see that the first function that you create, it doesn't take in any agreement. 93 00:05:53,680 --> 00:05:56,560 So now let's do some logic here. 94 00:05:56,770 --> 00:05:58,810 So let me maintain this one. 95 00:06:00,160 --> 00:06:01,330 They maintain this one. 96 00:06:01,330 --> 00:06:04,300 So let me copy this one and then copy. 97 00:06:06,350 --> 00:06:08,020 Copy this one and comment. 98 00:06:08,030 --> 00:06:09,620 Now come down here. 99 00:06:09,650 --> 00:06:10,640 Let me pass it. 100 00:06:10,640 --> 00:06:13,100 So let me also remove this one. 101 00:06:13,100 --> 00:06:18,440 Now let's add some agreement and let's see how we are going to call this particular function. 102 00:06:18,740 --> 00:06:25,280 So for my outer function, I'm going to take in a value of a as an argument. 103 00:06:25,280 --> 00:06:31,850 And the second function, that's my inner function, take a value as B, so for this one, it's going 104 00:06:31,850 --> 00:06:37,850 to return A plus B So this is a valid syntax. 105 00:06:37,850 --> 00:06:44,570 So let's see, I'm going to call this function the same way as we called the function without argument. 106 00:06:44,810 --> 00:06:53,720 So coming down, here comes let's see, first function is equal to the add to numbers function. 107 00:06:53,720 --> 00:07:01,820 Now remember you see that it takes in an argument a it can be any with a string or a number or whatever, 108 00:07:01,850 --> 00:07:07,820 so you pass in as any and then it's going to retain an anonymous function as that. 109 00:07:08,060 --> 00:07:16,670 So for this one, I'll pass LC to now what comes back when I call this function, it's a function. 110 00:07:16,670 --> 00:07:19,280 So it means that this also a function, right? 111 00:07:19,280 --> 00:07:25,520 So I can assign a variable to this particular function, then I'll pass in my argument. 112 00:07:25,520 --> 00:07:29,330 So this one now represents my inner function. 113 00:07:30,060 --> 00:07:33,780 This one represents the outer function or the main function. 114 00:07:33,780 --> 00:07:39,360 And what comes back is this function which represents this particular function down here. 115 00:07:39,540 --> 00:07:40,650 So here we go. 116 00:07:40,830 --> 00:07:48,210 I can also declare a variable and say second function is equal to my first function. 117 00:07:49,160 --> 00:07:54,560 Then I'll pass in, let's say three, meaning I'm going to add two plus three together. 118 00:07:54,560 --> 00:07:58,670 So let's see the results if I console.log. 119 00:07:58,670 --> 00:08:01,040 The second function. 120 00:08:02,730 --> 00:08:09,390 Archiving changes one to, let's say, resort or answer, because what we get back from this in a function 121 00:08:09,420 --> 00:08:11,940 is a value but not a function. 122 00:08:12,180 --> 00:08:17,880 So I can rename this one to resort and as that and this one is also perfect. 123 00:08:18,090 --> 00:08:23,490 So we can also call the function as we did here, using this syntax. 124 00:08:23,850 --> 00:08:24,860 So here we go. 125 00:08:24,870 --> 00:08:29,160 So let me comment this one and now let me come down here. 126 00:08:29,200 --> 00:08:32,190 So I'm going to use, let's say, add two numbers. 127 00:08:32,220 --> 00:08:37,799 The first function are parsing as to my second function of Python three. 128 00:08:37,830 --> 00:08:44,130 Now, what comes back from this function call is my result when I make use of result. 129 00:08:44,159 --> 00:08:45,600 Now, there you go. 130 00:08:45,720 --> 00:08:47,850 If I console.log results. 131 00:08:47,880 --> 00:08:49,310 Now let's see. 132 00:08:49,320 --> 00:08:55,810 It's going to be the same as five as we did or as we saw from this function call. 133 00:08:55,830 --> 00:08:59,670 So this is how we can return a function from a function. 134 00:08:59,700 --> 00:09:02,910 And if we have to go deeper level since that. 135 00:09:02,910 --> 00:09:05,430 Well, I also want to call this function. 136 00:09:06,060 --> 00:09:11,700 Maybe I also want to return a function from this so I can do let's see for this one to I can use a function 137 00:09:11,700 --> 00:09:12,510 like that. 138 00:09:12,720 --> 00:09:14,040 And here we go. 139 00:09:14,070 --> 00:09:15,940 Then I can return. 140 00:09:15,960 --> 00:09:22,740 I'll pass this one in a C and then here as A plus B, plus C. 141 00:09:22,740 --> 00:09:24,030 And now here we go. 142 00:09:24,060 --> 00:09:32,400 So to call this function or add additional function call or pass n, as for when I save it, well, 143 00:09:32,400 --> 00:09:34,770 I get ten y time equals two. 144 00:09:34,770 --> 00:09:37,590 Plus three is five plus four is nine. 145 00:09:37,620 --> 00:09:38,430 So y ten. 146 00:09:38,790 --> 00:09:45,350 Oh sorry I added a which is two plus B plus B two times which is six. 147 00:09:45,360 --> 00:09:46,370 That is why I got that. 148 00:09:46,380 --> 00:09:48,900 So here are going to be as C. 149 00:09:49,920 --> 00:09:50,190 Yeah. 150 00:09:50,220 --> 00:09:51,960 Sorry, I get c sorry here. 151 00:09:52,000 --> 00:09:52,950 Supposed to be C. 152 00:09:54,350 --> 00:09:56,390 And indeed it's not. 153 00:09:56,420 --> 00:09:59,300 For the meantime, let's just retain only one function. 154 00:09:59,310 --> 00:10:01,460 Going to be A plus B for now. 155 00:10:01,490 --> 00:10:04,010 So here I remove this function core. 156 00:10:04,220 --> 00:10:06,920 So can you rewrite this one using a row function? 157 00:10:06,950 --> 00:10:07,630 Here we go. 158 00:10:07,640 --> 00:10:09,920 So here comes. 159 00:10:10,280 --> 00:10:12,320 I'm going to make use of every function. 160 00:10:12,320 --> 00:10:15,200 Add two nums non equal to that. 161 00:10:15,200 --> 00:10:16,550 And here. 162 00:10:16,550 --> 00:10:19,250 Here we go as that. 163 00:10:19,250 --> 00:10:24,170 Now, my inner function is going to return a function as that. 164 00:10:25,400 --> 00:10:25,800 I. 165 00:10:26,470 --> 00:10:34,330 Now here I will add our person here, A and B and I here are going to be a plus B and it's perfect. 166 00:10:35,230 --> 00:10:36,100 It's perfect. 167 00:10:36,100 --> 00:10:42,310 So I can rename this one to ad number two so and a half name conflict here now to call this function 168 00:10:42,310 --> 00:10:52,600 is also as before I'm going to use this are two numbers as before I'll pass in three and I'll start 169 00:10:52,720 --> 00:10:54,340 and I'll pass in four. 170 00:10:54,490 --> 00:10:57,130 Well, this also perfect way to write. 171 00:10:57,130 --> 00:10:58,900 I think B is undefined. 172 00:10:59,170 --> 00:11:03,220 Where is my B or he is supposed to be b? 173 00:11:04,440 --> 00:11:05,010 Yes. 174 00:11:05,040 --> 00:11:05,560 Good. 175 00:11:05,580 --> 00:11:06,430 So. 176 00:11:06,450 --> 00:11:07,020 Well. 177 00:11:07,020 --> 00:11:07,770 So take away. 178 00:11:07,770 --> 00:11:09,420 Here is a function. 179 00:11:09,440 --> 00:11:11,290 Can retain another function. 180 00:11:11,310 --> 00:11:17,340 Well, you're not going to see the kind of syntax often, but it's a good idea to know how it works. 181 00:11:17,340 --> 00:11:22,230 So in case you find it somewhere else, you know that all a function can return. 182 00:11:22,230 --> 00:11:23,070 Retain a function.