1 00:00:02,370 --> 00:00:06,930 So we have a basic idea of what the browser is doing with longer taking operations, 2 00:00:06,930 --> 00:00:09,010 now let's see something interesting. 3 00:00:09,030 --> 00:00:10,280 Let's add a for loop here, 4 00:00:10,290 --> 00:00:13,860 a normal for loop where we start with i set equal to zero 5 00:00:13,860 --> 00:00:16,530 but now we have a very high number as an exit condition, 6 00:00:16,650 --> 00:00:23,910 let's say 10 million and we increment i by one here every time this runs. 7 00:00:23,920 --> 00:00:30,640 Now let's also add a result here, starts at zero and add i to result here and this is really just a 8 00:00:30,640 --> 00:00:31,420 demo, 9 00:00:31,420 --> 00:00:33,100 so result is set equal to result + i, 10 00:00:33,100 --> 00:00:37,210 we could use the shorthand for this as well of course 11 00:00:39,930 --> 00:00:47,220 and thereafter we console log result and actually, let's add one extra zero here to ramp this up to 100 million 12 00:00:47,430 --> 00:00:49,230 and now save that and reload 13 00:00:49,230 --> 00:00:54,870 and you see, this takes a timer until it prints the result and you learned in the number section that 14 00:00:54,870 --> 00:00:56,790 it will have problems with such big numbers, 15 00:00:56,790 --> 00:01:01,260 keep in mind that i gets bigger and bigger and we add the bigger and bigger i to the already bigger 16 00:01:01,260 --> 00:01:03,190 and bigger number here. 17 00:01:03,210 --> 00:01:09,840 Now the interesting thing is here that after reloading, it took a time to print this. Now let's try to 18 00:01:09,840 --> 00:01:12,940 click this button before this result is there, 19 00:01:12,960 --> 00:01:17,100 what you'll see is that clicked only appears after the result is there as well. 20 00:01:17,480 --> 00:01:22,530 So if I reload, I can hammer this button and nothing happens and all the click events are only processed 21 00:01:22,530 --> 00:01:24,410 once the loop 22 00:01:24,420 --> 00:01:25,860 basically is done. 23 00:01:25,920 --> 00:01:28,590 Now here, we see the single threading in action. 24 00:01:28,800 --> 00:01:30,540 We have this event listener, 25 00:01:30,540 --> 00:01:35,970 we handed this off to the browser and therefore this event listener is not blocking Javascript but this 26 00:01:35,970 --> 00:01:40,770 loop here, this actually is not handed off to the browser and there is no way of handing this off, 27 00:01:40,770 --> 00:01:46,500 this loop executes and Javascript execution is blocked until this operation is done because you can only 28 00:01:46,500 --> 00:01:49,210 execute one operation at a time. 29 00:01:49,230 --> 00:01:53,420 Now that actually proves the point I showed you on the slide earlier already, 30 00:01:53,430 --> 00:02:01,650 also interesting however is that this handed off task also is only able to execute so to say or 31 00:02:01,650 --> 00:02:04,890 to execute this function once the loop is done. 32 00:02:04,890 --> 00:02:06,950 However it makes sense if you think about it, 33 00:02:07,020 --> 00:02:12,390 I mentioned there is only one thing you can execute in Javascript at a given time and whilst the loop 34 00:02:12,390 --> 00:02:13,760 is running that is the loop. 35 00:02:13,830 --> 00:02:17,820 If we click whilst the loop is running, the browser recognizes that click, 36 00:02:17,850 --> 00:02:20,280 sure and it knows it should call this function 37 00:02:20,280 --> 00:02:26,340 so it does that but this function is a Javascript function and in Javascript, we're occupied with this 38 00:02:26,340 --> 00:02:26,980 for loop. 39 00:02:27,060 --> 00:02:33,180 So this function is kind of memorized by Javascript, that it needs to execute that but it only does that 40 00:02:33,360 --> 00:02:35,370 once this operation finished 41 00:02:35,370 --> 00:02:38,080 and that's really important to understand, 42 00:02:38,160 --> 00:02:44,190 that's how Javascript works and how it works with async code and with synchronous code and what it actually 43 00:02:44,190 --> 00:02:51,080 does is it uses a concept called the event loop. You might remember this slide, I showed it earlier in 44 00:02:51,080 --> 00:02:57,290 the behind the scenes module - we had the heap, the stack and I mentioned the event loop there already 45 00:02:57,320 --> 00:03:01,490 but I mentioned that it would become important later, now is later, 46 00:03:01,490 --> 00:03:05,010 now let's have a closer look at that event loop here. 47 00:03:05,090 --> 00:03:11,600 So what is the event loop? In the end, the event loop helps us deal with async code you could say, it helps 48 00:03:11,600 --> 00:03:18,230 us deal with callback functions which typically are used in such async code scenarios. 49 00:03:18,230 --> 00:03:19,770 Let's imagine this set up here, 50 00:03:19,790 --> 00:03:22,790 we have this code and we have our stack. 51 00:03:22,880 --> 00:03:27,460 Now in this code here on the left, you see we're defining two functions, 52 00:03:27,500 --> 00:03:29,180 then here I set a timer, 53 00:03:29,180 --> 00:03:34,250 once this timer is done, we call the show alert function which is the second function we define here 54 00:03:34,760 --> 00:03:38,040 and after the timer, we also call greet here. 55 00:03:38,060 --> 00:03:43,700 Now when this code executes, the stack which is part of the Javascript engine as you learned will do 56 00:03:43,700 --> 00:03:49,160 certain things. Now also be aware that certain other things will be offloaded to the browser, that the 57 00:03:49,160 --> 00:03:55,820 browser kind of gives us a bridge where we can talk to certain browser APIs from inside our Javascript 58 00:03:55,820 --> 00:03:59,390 code to for example offload certain work. 59 00:03:59,390 --> 00:04:00,930 So let's say this code executes now, 60 00:04:00,930 --> 00:04:04,550 now what happens is the two functions are created, 61 00:04:04,550 --> 00:04:07,960 that's the first thing which happens, the greet and the show alert function 62 00:04:08,120 --> 00:04:13,120 and then the first function that is called is actually the built-in setTimeout function. 63 00:04:13,280 --> 00:04:19,090 Now setTimeout does one important thing, it reaches out to the browser because it actually is a browser 64 00:04:19,100 --> 00:04:25,820 API made available in Javascript and sets up the ongoing timer there, in the browser so to say, so the 65 00:04:25,820 --> 00:04:27,290 browser manages this timer 66 00:04:27,290 --> 00:04:28,600 as I mentioned earlier 67 00:04:28,940 --> 00:04:31,160 and then in Javascript, this function is done 68 00:04:31,160 --> 00:04:33,450 and as you learned, it is really done, 69 00:04:33,450 --> 00:04:38,870 it does not block any other code execution. So the timer is still there but that is managed by the browser, 70 00:04:38,900 --> 00:04:41,160 Javascript is done for now. 71 00:04:41,180 --> 00:04:45,380 So the next thing which actually happens is not that show alert executes, 72 00:04:45,380 --> 00:04:50,810 keep in mind that this takes 2 seconds, the timer takes 2 seconds, instead Javascript doesn't wait 73 00:04:50,810 --> 00:04:51,140 for this 74 00:04:51,170 --> 00:04:56,710 as I explained and it instead moves on to the next line, it moves on to the greet method, 75 00:04:56,720 --> 00:05:02,720 so now greet executes, before the timer is completed right away after setTimeout is done and the timer is 76 00:05:02,780 --> 00:05:07,880 offloaded to the browser, then greet executes in the greet function if you have a look at the left here, 77 00:05:07,880 --> 00:05:09,210 we call console log 78 00:05:09,220 --> 00:05:12,790 so that's of course also executed and with that 79 00:05:12,890 --> 00:05:15,640 we're basically done with the code on the left. 80 00:05:15,830 --> 00:05:22,190 Now at some point, the timer is completed though and let's say that actually happens whilst our greet 81 00:05:22,190 --> 00:05:24,080 console log code executes. 82 00:05:24,170 --> 00:05:30,020 Of course this code executes very fast, it does not take it long, it's not such a long if loop as we 83 00:05:30,020 --> 00:05:34,630 wrote it but still, it takes a couple of milliseconds even if it's just a few 84 00:05:34,730 --> 00:05:40,670 and now let's say whilst we're executing console log, the timer finishes. 85 00:05:40,670 --> 00:05:47,360 Now we need some way of telling our Javascript code, the Javascript engine so to say, that the show alert 86 00:05:47,360 --> 00:05:51,940 function which was register this a callback for the timer should be executed 87 00:05:52,160 --> 00:05:55,100 and for this, a message queue is used. 88 00:05:55,100 --> 00:06:01,460 This is provided by the browser and it's also linked to Javascript so to say. Now in this message 89 00:06:01,460 --> 00:06:06,620 queue, the browser registers any code that should execute 90 00:06:06,740 --> 00:06:10,050 once we have time for it, in this case the timer. 91 00:06:10,100 --> 00:06:15,780 So here, the show alert function, this callback so to say is register this a to-do task 92 00:06:15,860 --> 00:06:20,090 once the Javascript engine has time for it, 93 00:06:20,130 --> 00:06:25,740 so now the timer is done and this task is registered. Please note, show alert does not execute at this 94 00:06:25,740 --> 00:06:31,610 point, it's just register this a to-do. The only thing which is really executed in Javascript 95 00:06:31,620 --> 00:06:37,370 at this point is greet and console log because that's what we're currently doing there. 96 00:06:37,380 --> 00:06:43,440 So now with that, let's say in Javascript we're done with that console log executed and therefore greet 97 00:06:43,460 --> 00:06:46,520 also is done and call stack is empty again. 98 00:06:46,590 --> 00:06:52,550 Now we need to get that message or this show alert to-do in our call stack, 99 00:06:52,560 --> 00:06:55,490 we know it's a function in Javascript, it should now be executed 100 00:06:55,520 --> 00:07:01,200 and for this, we use the event loop. The event loop, just like the message queue, is built into the browser 101 00:07:01,620 --> 00:07:07,590 and most Javascript environments, for example also Node.js have that concept of having such an event 102 00:07:07,590 --> 00:07:08,050 loop. 103 00:07:08,130 --> 00:07:11,730 It's just important to understand that it's not part of the Javascript engine, 104 00:07:11,880 --> 00:07:14,810 it's really part of the host environment of Javascript, 105 00:07:14,820 --> 00:07:20,400 so of the thing which uses that Javascript engine. So the event loop is part of the browser and the job 106 00:07:20,400 --> 00:07:26,590 of the event loop in the end is to synchronize the call stack in the engine with our waiting messages. 107 00:07:27,000 --> 00:07:33,120 So in the end, what the event loop does is it runs basically all the time and it always sees, is the stack 108 00:07:33,150 --> 00:07:39,240 empty and do we have pending to-dos, and if the stack is empty, then the event loop executes 109 00:07:39,240 --> 00:07:48,150 so to say and it pushes any waiting messages or any to-do functions therefore into the call stack. 110 00:07:48,150 --> 00:07:54,840 So the event loop waits until the call stack is empty and once that is the case, it moves our message 111 00:07:54,840 --> 00:08:02,100 or the callback function we registered earlier as a function that is now actively executed into our 112 00:08:02,340 --> 00:08:03,300 call stack. 113 00:08:03,300 --> 00:08:08,170 So the message queue is now empty and now this function runs in our Javascript code. 114 00:08:08,280 --> 00:08:13,120 So here show alert runs, this calls the built-in alert function here as you can see on the left, 115 00:08:13,200 --> 00:08:19,700 once this is done, the call stack is empty again. This is what the browser does behind the scenes with the event 116 00:08:19,700 --> 00:08:25,580 loop and with our code and also with these callback functions we hand off to the browser APIs 117 00:08:25,760 --> 00:08:29,720 and that is a pattern that typically is used for async operations. 118 00:08:29,720 --> 00:08:35,240 So if we have a look at this code again, what we do here with add event listener is here, we're handing 119 00:08:35,240 --> 00:08:40,070 something off to the browser, we're handling this click listener off to the browser and we tell it that 120 00:08:40,070 --> 00:08:43,450 this is the function that should be executed once a click occurs, 121 00:08:43,670 --> 00:08:49,370 then we continue in Javascript and we have this long taking task which basically occupies our call 122 00:08:49,370 --> 00:08:49,910 stack, 123 00:08:49,910 --> 00:08:54,500 it's not part of a function here but it therefore is basically running in an anonymous function you 124 00:08:54,500 --> 00:08:58,700 could say, in a big anonymous function that wraps everything if you will. 125 00:08:58,700 --> 00:09:02,450 So this now executes there and the call stack in our Javascript engine 126 00:09:02,510 --> 00:09:04,170 therefore is not empty. 127 00:09:04,250 --> 00:09:11,660 So if we click the button, if we reload whilst we're still doing this for loop, then this click is registered 128 00:09:11,690 --> 00:09:16,580 and the browser pushes this function as a to-do onto our message 129 00:09:16,570 --> 00:09:22,520 queue but the event loop sees that we still have work to do on the call stack and therefore, it waits to 130 00:09:22,520 --> 00:09:28,160 execute this function until the call stack is empty and that only happens once this executed 131 00:09:28,220 --> 00:09:34,040 and once we logged this result to the console which is why we see the clicked output only after we see 132 00:09:34,040 --> 00:09:40,940 the result, even if we click the button whilst this was still going on, simply because of how the browser 133 00:09:40,940 --> 00:09:41,930 handles this. 134 00:09:42,050 --> 00:09:46,520 And this is really important knowledge, you need to know what Javascript does behind the scenes here 135 00:09:46,970 --> 00:09:53,330 to understand why you write code in a certain way and to understand that for example, this code here 136 00:09:53,600 --> 00:10:00,080 executes before this code, even though you register this first because this is an async task and you 137 00:10:00,320 --> 00:10:06,110 wait for this to happen but you don't wait for it by blocking your Javascript execution but instead 138 00:10:06,140 --> 00:10:11,270 that continues and only some things, like this for loop which you typically don't write like this, you 139 00:10:11,270 --> 00:10:16,610 don't have such long running for loops typically, such operations can block your Javascript code, these 140 00:10:16,840 --> 00:10:22,280 expected long taking operations or these operations like event listeners where you don't know if and 141 00:10:22,280 --> 00:10:23,540 how often they will happen, 142 00:10:23,540 --> 00:10:25,460 these are handed off through the browser 143 00:10:25,520 --> 00:10:27,920 so that your Javascript code is never blocked.