1 00:00:09,200 --> 00:00:15,590 Hey, everyone, welcome to a new section of the course, we are now going to start talking about a 2 00:00:15,590 --> 00:00:22,310 little more advanced topics, but don't worry, it's not going to be too complicated because, as always, 3 00:00:22,310 --> 00:00:24,970 we are going to see things step by step. 4 00:00:25,220 --> 00:00:28,190 So let's get started with callback functions. 5 00:00:28,610 --> 00:00:35,900 Callback functions are passed as arguments of other functions, and they are normally executed at the 6 00:00:35,900 --> 00:00:37,870 end of the parent function. 7 00:00:37,880 --> 00:00:45,130 So we know that JavaScript is an asynchronous language and there are times when this can be a bit problematic. 8 00:00:45,500 --> 00:00:48,880 So let's see a very basic example to get started. 9 00:00:49,130 --> 00:00:50,960 So I'm going to create a function. 10 00:00:52,230 --> 00:00:53,190 Called Get. 11 00:00:54,200 --> 00:00:54,830 User. 12 00:00:58,090 --> 00:01:04,860 And inside here, I'm going to simulate as if I was getting this information from an external source, 13 00:01:05,530 --> 00:01:08,350 I'm not doing this right now, but let's simulated. 14 00:01:08,350 --> 00:01:10,570 So let's create a variable called you. 15 00:01:14,820 --> 00:01:24,060 And let's say I got this from a database or an API or something like this, and I'm getting in return 16 00:01:24,450 --> 00:01:30,720 an object, and one of the properties of this object is going to be the name property. 17 00:01:34,950 --> 00:01:42,900 And then we have the name of the user, so what we are going to do now is just returning this user. 18 00:01:44,740 --> 00:01:50,680 So this is just a simulation, so let's say we got this information from an external source and now 19 00:01:50,830 --> 00:01:52,680 we are just returning it. 20 00:01:52,930 --> 00:02:00,220 So now that we have this or we will have this, when we execute this function, let's try to do something 21 00:02:00,220 --> 00:02:01,210 with this name. 22 00:02:01,850 --> 00:02:04,090 So I'm going to create another function. 23 00:02:05,160 --> 00:02:06,180 Called Grete. 24 00:02:07,830 --> 00:02:08,520 User. 25 00:02:13,970 --> 00:02:19,220 And this function is going to receive and user as an argument. 26 00:02:25,980 --> 00:02:32,610 And what this is going to do is just sending a message to this user, but this is going to be a personalized 27 00:02:32,610 --> 00:02:34,580 message with the user name. 28 00:02:34,860 --> 00:02:38,130 So let's say the message is hi. 29 00:02:39,800 --> 00:02:45,410 Then we concatenate with the name of the user, so user name. 30 00:02:47,040 --> 00:02:49,710 And then we concatenate with. 31 00:02:51,420 --> 00:02:52,320 A Colin. 32 00:02:53,830 --> 00:02:57,220 And then the rest of the message, something like, how are you? 33 00:02:59,480 --> 00:03:03,740 All right, so pretty basic stuff just so we can use as an example. 34 00:03:04,190 --> 00:03:06,260 Now let's begin to write our code. 35 00:03:06,270 --> 00:03:09,110 So I'm going to create a variable called user. 36 00:03:12,340 --> 00:03:14,890 And I'm going to call this function. 37 00:03:16,010 --> 00:03:23,030 So, again, this is a simulation, so let's say I'm retrieving this information from an external source, 38 00:03:23,540 --> 00:03:30,510 this function is going to return this user and now we have it inside our user variable. 39 00:03:30,890 --> 00:03:36,470 So now we are ready to call the great user function using that user. 40 00:03:37,510 --> 00:03:38,650 As an argument. 41 00:03:43,800 --> 00:03:52,020 All right, so doing this, let's go back to our page, let's refresh it, and as you can see, we successfully 42 00:03:52,020 --> 00:03:57,440 got the user, which is an object that has a property called name. 43 00:03:57,450 --> 00:04:01,980 And now we are using this object as an argument of another function. 44 00:04:02,160 --> 00:04:05,610 And we were able to form this message. 45 00:04:06,000 --> 00:04:07,800 So far, so good. 46 00:04:08,400 --> 00:04:16,560 But the only reason why we didn't have any problem here is because this function was executed so fast 47 00:04:16,830 --> 00:04:23,790 that when we ran this great user function, when we invoked it, we already had the user. 48 00:04:25,170 --> 00:04:31,890 Inside this variable, but in a real life situation, if we were really getting it from an external 49 00:04:31,890 --> 00:04:36,750 source, this wouldn't be that fast, we would have a delay. 50 00:04:36,750 --> 00:04:40,130 So let's simulate a one second delay. 51 00:04:40,350 --> 00:04:43,740 So here instead of returning it right away. 52 00:04:45,000 --> 00:04:46,110 Let's simulate. 53 00:04:48,030 --> 00:04:51,840 A one second delay here with a set time out. 54 00:05:02,540 --> 00:05:07,130 So the time is going to be one thousand milliseconds and. 55 00:05:08,070 --> 00:05:15,540 At the end of this time, then we are going to return that information, so this function is going to 56 00:05:15,540 --> 00:05:19,810 take one second to return the username. 57 00:05:19,950 --> 00:05:23,490 So let's see what happens now when we try to get it. 58 00:05:23,670 --> 00:05:27,900 And then right away, call the great user function. 59 00:05:28,330 --> 00:05:29,550 I'm going to save this. 60 00:05:32,350 --> 00:05:38,780 Now refreshing the page, so as you can see now we have an error, it's saying, cannot read property 61 00:05:38,830 --> 00:05:40,650 the name of undefined. 62 00:05:40,900 --> 00:05:43,960 So what's going on here when we call this function? 63 00:05:45,260 --> 00:05:47,070 This is not immediate. 64 00:05:47,120 --> 00:05:54,320 This is taking one second, but as JavaScript is an asynchronous language, it doesn't wait until this 65 00:05:54,320 --> 00:05:57,020 function finishes to go to the next line. 66 00:05:57,200 --> 00:06:03,160 It just starts executing this one and then just jumps directly to the next line. 67 00:06:03,350 --> 00:06:09,980 And this is a problem because when we try to use this variable as an argument for this function, we 68 00:06:09,980 --> 00:06:15,330 don't have anything inside it yet because this operation is taking one second. 69 00:06:15,860 --> 00:06:23,120 So this is what would happen in a real life situation if we were getting this information from an external 70 00:06:23,120 --> 00:06:23,730 source. 71 00:06:24,200 --> 00:06:26,360 So what can we do about it? 72 00:06:26,600 --> 00:06:30,740 Well, instead of returning this user, we can do something here. 73 00:06:30,920 --> 00:06:33,560 Let's pass an argument to this function. 74 00:06:34,650 --> 00:06:36,700 Which we're going to name call back. 75 00:06:37,110 --> 00:06:40,770 You don't have to name it this way, you can name it any way we want. 76 00:06:41,070 --> 00:06:44,890 But just to make clear that this is a callback function. 77 00:06:45,060 --> 00:06:49,230 I'm going to call it a callback and one I'm going to do with this. 78 00:06:49,320 --> 00:06:53,850 Instead of returning the user here, I'm just going to call this function. 79 00:06:58,690 --> 00:07:05,680 And I'm going to pass the user as an argument, so every time I invoke this function, it's going to 80 00:07:05,680 --> 00:07:13,240 do everything that is doing and then at the end, it is going to execute this function with the user 81 00:07:13,240 --> 00:07:14,470 name as an argument. 82 00:07:14,890 --> 00:07:21,100 So this means that it's going to wait until this time passes before executing it. 83 00:07:23,340 --> 00:07:29,940 All right, so now I'm just going to erase this line here and now, I'm not going to create any variable. 84 00:07:29,940 --> 00:07:33,480 I'm just going to call this function, get user. 85 00:07:33,640 --> 00:07:37,950 So when I call it as you can see, there's an argument now. 86 00:07:37,970 --> 00:07:45,570 So what is this argument is a function that's going to be executed here, but which function is this? 87 00:07:45,750 --> 00:07:47,960 He can be any function we want. 88 00:07:48,300 --> 00:07:52,770 All we have to do is tell the name of the function we want to execute. 89 00:07:53,610 --> 00:07:55,380 So when I invoke it. 90 00:07:58,860 --> 00:08:02,550 I'm going to pass this great user as an argument. 91 00:08:03,510 --> 00:08:09,990 So what it's going to do is getting inside here and when it reaches this point, it's just going to 92 00:08:09,990 --> 00:08:17,640 do this, which is exactly what we want, and we could use this function with any other callback we 93 00:08:17,640 --> 00:08:20,880 want, as I'm going to show in an example in a moment. 94 00:08:21,330 --> 00:08:25,160 But before we go ahead, let's save this and let's see what happens. 95 00:08:28,970 --> 00:08:36,200 So refreshing the page, there's a one second delay and now we have it being executed without any problem. 96 00:08:39,610 --> 00:08:46,120 So now let's create another function just so we can see how useful this callback function can be. 97 00:08:47,480 --> 00:08:52,670 So I'm going to create another one that's going to be called good by. 98 00:08:55,970 --> 00:08:56,540 User. 99 00:09:17,430 --> 00:09:22,260 So now this is pretty similar, but now I have a bye bye message. 100 00:09:24,350 --> 00:09:26,250 And how do we use this one? 101 00:09:26,270 --> 00:09:30,980 Well, we just called the get user again, but now. 102 00:09:32,060 --> 00:09:39,620 As our callback function, instead of using the great user as a callback function, we can use any function 103 00:09:39,620 --> 00:09:40,140 we want. 104 00:09:40,550 --> 00:09:43,990 Now we are going to use the goodbye user function. 105 00:09:44,240 --> 00:09:50,830 So when we hit this point, it's just going to use the name that we are passing as an argument. 106 00:09:51,820 --> 00:09:59,320 So this is going to be executed, so let's try it out with just one get user function, we can pass 107 00:09:59,320 --> 00:10:01,840 any other function we want as a callback. 108 00:10:01,990 --> 00:10:09,760 And by doing this, we are making sure that this is only going to be executed when we actually have 109 00:10:09,760 --> 00:10:10,350 the user. 110 00:10:10,630 --> 00:10:13,410 So let's save this and let's see what happens. 111 00:10:14,170 --> 00:10:15,370 Refresh the page. 112 00:10:15,730 --> 00:10:18,580 First one worked correctly. 113 00:10:18,580 --> 00:10:20,890 The second one worked correctly. 114 00:10:21,250 --> 00:10:25,500 Now I'm going to show you another way of using callback functions. 115 00:10:26,290 --> 00:10:32,980 This time we had created previously the two functions that we are using as a callback, but we don't 116 00:10:33,400 --> 00:10:34,540 have to do this. 117 00:10:34,840 --> 00:10:39,700 We can actually create a function by the time we are calling the parent function. 118 00:10:39,880 --> 00:10:42,550 So now let's repeat this and. 119 00:10:44,100 --> 00:10:51,330 Let's see if you are familiar with this structure, so instead of doing this, I'm just going to create 120 00:10:51,330 --> 00:10:52,200 a function here. 121 00:10:55,890 --> 00:10:56,910 With an argument. 122 00:11:09,080 --> 00:11:11,780 And now I'm just going to write, hey. 123 00:11:19,210 --> 00:11:20,470 User, not name. 124 00:11:26,510 --> 00:11:35,330 This is another way of using a callback function, so as you can see, when we created the get user, 125 00:11:35,510 --> 00:11:39,830 we are just calling it that here we are going to pass a function. 126 00:11:39,830 --> 00:11:42,650 We are not defining which function it is yet. 127 00:11:42,770 --> 00:11:49,980 We are just saying, OK, we have this argument and this argument is going to be called here as a function. 128 00:11:50,240 --> 00:11:55,820 So by the time we are creating this, we don't know which function is going to be so. 129 00:11:55,820 --> 00:12:03,080 In the previous two examples, we just called two different functions and now we are actually creating 130 00:12:03,080 --> 00:12:09,630 a new function by the time we call this get user function, which is perfectly acceptable. 131 00:12:10,250 --> 00:12:12,580 So let's see if this is going to work. 132 00:12:13,340 --> 00:12:14,780 I'm going to save this. 133 00:12:16,700 --> 00:12:24,140 Refreshing the page, and now, as you can see, this was another way of using it, and if you pay attention 134 00:12:24,140 --> 00:12:33,860 to the structure we've just used, you will see that most Jake queries methods are actually using callback 135 00:12:33,860 --> 00:12:34,490 functions. 136 00:12:34,670 --> 00:12:41,180 If you take a look at the click method from Jake Query, as you can see, the function we pass inside 137 00:12:41,180 --> 00:12:44,140 here is actually a callback function. 138 00:12:44,750 --> 00:12:53,210 So probably inside the click method when it was defined, it is doing something like setting the event 139 00:12:53,390 --> 00:13:00,350 for this element and at the end of everything is just going to execute a callback. 140 00:13:00,950 --> 00:13:02,830 And what's going to be the callback? 141 00:13:02,840 --> 00:13:03,290 Well. 142 00:13:04,330 --> 00:13:12,250 We are creating the call back every time we use the click function, so it doesn't matter what function 143 00:13:12,250 --> 00:13:18,190 it is because we can define any function we want every time we call this method. 144 00:13:20,300 --> 00:13:28,130 And another example here is the SAT time out now we can see that the SAT time out also has a callback 145 00:13:28,130 --> 00:13:28,650 function. 146 00:13:29,540 --> 00:13:36,530 So when we use this method, as you can see, the first argument is a callback function in the second 147 00:13:36,530 --> 00:13:38,630 argument is a time. 148 00:13:38,790 --> 00:13:40,280 So every time we call it. 149 00:13:41,360 --> 00:13:45,680 We need to specify a function that's going to be executed at the end. 150 00:13:46,800 --> 00:13:51,060 So this is how callback functions work at first. 151 00:13:52,030 --> 00:14:00,280 This might seem a bit complicated, but don't worry, it is only a matter of getting used to it, using 152 00:14:00,280 --> 00:14:04,240 it a few times and you see, that's actually pretty simple. 153 00:14:04,630 --> 00:14:10,240 In the next few lessons, we're going to have opportunities to work a little bit more with callback 154 00:14:10,240 --> 00:14:11,020 functions. 155 00:14:11,410 --> 00:14:15,990 I'm also going to include it in the next list of exercises. 156 00:14:16,300 --> 00:14:21,370 So by the end of the next section, this is going to be very clear for you. 157 00:14:21,580 --> 00:14:28,990 Don't worry, but if you have any questions, don't hesitate of leaving your question in the Q&A section. 158 00:14:29,170 --> 00:14:30,360 So that was all for now. 159 00:14:30,370 --> 00:14:31,810 I'll see you in the next video.