1 00:00:01,280 --> 00:00:04,430 Let's talk about JavaScript. 2 00:00:04,580 --> 00:00:05,930 Run time. 3 00:00:06,890 --> 00:00:14,060 JavaScript runtime simply means the environment where we run our JavaScript code. 4 00:00:15,070 --> 00:00:25,030 JavaScript has too environment where we can run it and one is inside the browser and the other option 5 00:00:25,030 --> 00:00:31,510 is we can also run JavaScript on the server with the help of Node.js. 6 00:00:32,200 --> 00:00:37,750 For this particular video, we are going to focus inside the browser. 7 00:00:38,080 --> 00:00:45,130 If we go to Node.js or backend development, you also see how we can run JavaScript on this server. 8 00:00:45,280 --> 00:00:49,450 So what actually is the JavaScript runtime? 9 00:00:49,540 --> 00:00:57,850 Well, JavaScript runtime in a layman's point of view, it is like a box that contains all the things 10 00:00:57,850 --> 00:01:00,100 we need to run our code. 11 00:01:00,550 --> 00:01:01,960 So onto this point. 12 00:01:02,000 --> 00:01:07,000 Can you tell me some of the things that we need to run our code? 13 00:01:07,030 --> 00:01:09,670 Well, example is a browser itself. 14 00:01:09,700 --> 00:01:16,360 So inside the browser we have other components that can help us to run our code. 15 00:01:16,570 --> 00:01:22,450 And one of them is what we call the console, because the console can also help us to run JavaScript 16 00:01:22,450 --> 00:01:24,850 code with the help of the repo. 17 00:01:25,120 --> 00:01:25,810 Okay. 18 00:01:25,810 --> 00:01:31,110 So apart from that, we also have what is called the VH engine itself. 19 00:01:31,120 --> 00:01:34,330 So all these components are in the browser. 20 00:01:34,480 --> 00:01:42,550 So let's have a look at the other component that makes up the JavaScript runtime inside the browser. 21 00:01:42,580 --> 00:01:48,550 Let's see the first component, and that is the JavaScript engine. 22 00:01:49,290 --> 00:01:53,880 And for these we have talked about it before in the previous video. 23 00:01:54,120 --> 00:01:57,870 So the JavaScript engine runs our code. 24 00:01:58,050 --> 00:02:07,320 So inside the JavaScript engine we also have the other component, and the first component is what we 25 00:02:07,320 --> 00:02:08,880 call core stack. 26 00:02:09,150 --> 00:02:18,360 Well, we have dedicated video to talk more about core stock, but in short, the core stock is a data 27 00:02:18,360 --> 00:02:23,880 structure that is used to track the execution of function calls. 28 00:02:24,270 --> 00:02:30,390 And again, it is used to keep track of the order in which function calls are made. 29 00:02:31,200 --> 00:02:35,570 So let's say that we have a function, one that is yet to be called. 30 00:02:35,580 --> 00:02:38,880 It is put on top of the core stock. 31 00:02:39,820 --> 00:02:44,790 And when the function execution is done, it pops up from the coast. 32 00:02:45,370 --> 00:02:53,410 So let's say that we have these functions yet to be run function one, function two, and function three. 33 00:02:54,160 --> 00:03:00,220 After the function three has finished, run it to pop up, meaning it will remove from the coast tag 34 00:03:00,220 --> 00:03:01,360 in that order. 35 00:03:01,840 --> 00:03:06,910 And apart from the cost tag, we also have what is called heap. 36 00:03:07,180 --> 00:03:08,620 So what is heap? 37 00:03:08,650 --> 00:03:13,720 Well, the heap contains all objects that are created. 38 00:03:14,560 --> 00:03:19,840 But the cost tag also contains any reference to those objects. 39 00:03:20,170 --> 00:03:22,030 That is the heap for you. 40 00:03:22,300 --> 00:03:31,300 And apart from the JavaScript engine, we also have what is called web APIs and these web apps are built 41 00:03:31,300 --> 00:03:32,800 inside the browser. 42 00:03:32,950 --> 00:03:35,690 And one of them is what you call timers. 43 00:03:35,710 --> 00:03:42,190 So for this web API, we also have other components called Dom, of which we will cover in the upcoming 44 00:03:42,190 --> 00:03:42,850 videos. 45 00:03:43,060 --> 00:03:50,950 So the DOM also help us to run JavaScript code and apart from the DOM also have what is called timers. 46 00:03:50,950 --> 00:03:55,340 And you talk about it before one of them is what you call the set timeout. 47 00:03:55,360 --> 00:04:02,950 And again, we have a video to talk more about timers like set timeout and then set interval. 48 00:04:03,880 --> 00:04:10,590 So the web API plus the JavaScript engine, help us to run our code successfully. 49 00:04:10,600 --> 00:04:15,700 And apart from the Web API, we also have what is called the callback queue. 50 00:04:16,029 --> 00:04:18,339 So what is a callback queue? 51 00:04:18,790 --> 00:04:25,630 Well, the callback key contains all the callbacks that are waiting to be executed. 52 00:04:26,870 --> 00:04:27,470 All right. 53 00:04:27,470 --> 00:04:34,310 So, for example, set timeout, set interval or place inside the callback queue. 54 00:04:34,910 --> 00:04:41,150 And for that one too, we also have another technique called event loop. 55 00:04:41,600 --> 00:04:48,800 Well, so the web API is the event loop, the callback queue, the JavaScript engine, the code and 56 00:04:48,800 --> 00:04:49,430 a heap. 57 00:04:49,460 --> 00:04:54,890 All these are some of the environments that we can use to run JavaScript code. 58 00:04:54,890 --> 00:04:56,750 So what is event loop? 59 00:04:56,990 --> 00:05:03,230 Again, we have a section to talk more about event loop and see how it works. 60 00:05:03,260 --> 00:05:10,010 Do you remember that we said that JavaScript is non blocking programming language and you made an example 61 00:05:10,010 --> 00:05:14,900 where we use that timeout to execute code concurrently. 62 00:05:14,900 --> 00:05:18,050 Do you remember because of the event loop? 63 00:05:18,080 --> 00:05:21,890 So we talk more about all these terms over here. 64 00:05:22,100 --> 00:05:23,450 So in short. 65 00:05:24,050 --> 00:05:32,120 When a function has a callback, it put inside a callback queue and always the event loop will check 66 00:05:32,120 --> 00:05:32,600 that. 67 00:05:32,610 --> 00:05:33,260 Okay. 68 00:05:33,290 --> 00:05:36,980 Is there any function or callback that's yet to be called? 69 00:05:37,400 --> 00:05:43,590 If there's one, then the event loop will now take that function and put it on a callback queue. 70 00:05:43,610 --> 00:05:46,070 So on the course tag as that. 71 00:05:46,070 --> 00:05:54,710 So the event loop always check if there's a function here and then if there is one, the event loop 72 00:05:54,710 --> 00:05:59,120 will check if this one is empty then to put it on the cost tag. 73 00:05:59,390 --> 00:06:01,700 That is it about the event loop. 74 00:06:01,730 --> 00:06:09,440 Well, so this example of the JavaScript runtime, the next video, we will talk more about the cost.