JavaScript: The Hard Parts Browser API

[00:00:00]
>> So let's see the first of these three new components, we going to add in action. Let's see the first, the Web Browser API in action. So we going to roll through this code by line and doing so we going to introduce the first of these new features of the platform in which we run our code.

[00:00:19] The web browser API is going to introduce it as we walk through this code line by line. We're going to discover already, we can already figure out our regular model doesn't explain this. We will be able to explain it fairly reasonably just by adding the top one of that list there.

[00:00:37] So, why do we take it off. Let's kick it off with the very first line we're executing our code. As soon as we start executing our code, we create a global
>> Execution context
>> Good, exactly. Actually, that's in the morning. We create a global
>> Execution context Thanks Andrea.

[00:01:01] voluble tone Andrea. Alright, so we enter the global. How am I going to make sure I don't run out of space here? Enter the global. We have our global memory, here it is. Global memory and what's the very first thing inside the global memory, Andrea?
>> Say that again, I'm sorry.

[00:01:27]
>> What's the very first thing we do, sorry, what's the very first we do in executing our code? Create a global execution context, what's the first line say to do, Andrea?
>> It says to add printHello function?
>> Yeah, so how do we, what's a posh way, Shelby, of saying add the printHello function?

[00:01:47] Declare or define, exactly, Art, yeah. Declare or define, we could say add, create. But if you do use, I love using the intruder terms. But if you do, say this,
>> Let's add declare, always make sure you say all the, the words at once. Not all words, but many of the words for it at once.

[00:02:04] Cuz then you can both let the person you're explaining to in an interview show that you know the technical term, but also that you know intuitively what that actually means. I tell you, a lot of developers they say, I declare a function.
>> They're not clear that that's storing that function definition in memory as the value associate with that label.

[00:02:25] They're not clear of that. So I don't mind the intuitive but always have the precise as well. So we declare the function printHello. And it is the whole function definition. There it is, perfect. All right, so instantly we want to, our next line, which Andrea what does it say, that next line?

[00:02:49] What does it look like it's saying?
>> It says that Time out and for.
>> So what does prime tell us?
>> To execute.
>> Yeah, to execute the set timer.
>> And to put down the call.
>> Exactly. That normally means, exactly push the call stack. Now.

[00:03:08]
>> We are going to see with our built in functions. Att the call stack represents our calls to our functions. If you go into Chrome Dev tools and look at calls to functions you will see that the functions that actually get represented in the call stack are the ones that create execution contexts in the sense that we are declaring a function multiply by two and we call it.

[00:03:31]
>> We are creating a typical execution content for a function that we as a developer declared. We will not see in our call stacking crew in dev tools, A call to set timeout. That's something already, what's going on here. So let's just think about this. We are going to call this set timeout.

[00:03:50] And we're gonna parse it, our print.Hello function, there it is. And this value of 0. Now we said that in this scenario here the console.logs are gonna go in which order, Katie? Me first and then print hello.
>> Me first and then print hello. Yeah, me first then hello.

[00:04:17] Seems very odd. So already we know that when call set timeout, normally when call a function and we pass in it's callback function We'll execute set time out. In we go, we'll call printHello inside, and before we ever get out of set time out, we finish running printHello so we'll have console logged.

[00:04:39] So this suggests, when I call set time out, do you think, Katie, that I'm running printHello inside of set time outs? No.
>> It can't be right? Because otherwise how do I get straight out of say it time and move on? I'm not running print hello. Say it time doesn't behave like a typical function being called.

[00:04:59] We're going to say, rather than it behaving the way we're used to [INAUDIBLE] context with a variable environment inside of it It ain't gonna do that stuff. It's gonna do something completely different. It's going to we've said there were three parts of our synchronized JavaScript land. We are now going to discover a new part of our JavaScript land, or not even our JavaScript land, of our environment in which JavaScript is being run.

[00:05:27] JavaScript isn't run in isolation. JavaScript is run, JavaScript is run in a web browser. And so when I run my JavaScript, I'm actually dealing with some things outside of my JavaScript land. And one of them. Is our web browser APIs. Web browser APIs. To be really clear, this is not like that Spotify API, except in the sense that it's a bunch of functionality that we can interact with, which is like any API, it's a bunch of functionality or data we can interact with.

[00:06:08] These are APIs. Let's call them almost features. These are features or functionality of our web browser. Our web browser is a JavaScript runtime. We can run JavaScript. This is the JavaScript runtime, and a bunch of other built-in tools. And one of them In that single JavaScript thread. But it ain't gonna be doing anything else while that time is running.

[00:06:55] So instead, JavaScript is run in an environment in which we can spin up in the background much more flexible number of threads doing stuff like, what do you know? Creating. A background timer. Not in Java script. But using our web browser background features. So we can spin up a timer and what happens when I run set time out?

[00:07:18] You know what happens. I don't get involved in Java script lang. When I run set timer it's a built in function. It speaks. It doesn't behave in a typical way. It instead speaks to our web browser APIs, web browser API. Which one? Well, of course, timer, and it creates A timer, and here it is.

[00:07:48] It creates a timer, All the way down in our web browser API. And this is why we call them APIs, because they're not part of JavaScript, they're an interface to our web browser. Remember, I stands for interface. An interface with our web browser. When we run setTimer behind the scenes, it's making a communication.

[00:08:13] It's interfacing with our web browser and saying, folk, do you mind setting up a timer in the background? And remember, this one, well, I don't know if we're starting with this one. Let's start with this one. This one has a property of 0 milliseconds. So this timer is going to instantly complete.

[00:08:34] This timer's gonna instantly complete in a moment. But for now, there's a timer being created and we now have to Pass along, because we also. Wait, okay. Time is being created down here and the zero has been passed as a property, but also, what's the other core piece of information the timer needs to know?

[00:08:59]
>> What to do when the time's out.
>> What do to when the time out, which is So it has associated with it a reference to that print Hello function. So it nows that okay, when I'm finished, this is the function that I'm going to go and speak to, I'm going to go and run.

[00:09:23] [SOUND] There we go. And then it has, I guess, a column saying complete or not. And what do we know initially? It is, of course, not complete. Okay, that's now been set up. Set timeout is now complete, and we go onto our global execution context, where what do we encounter?

[00:09:47] What's the next line we encounter Griffin?
>> That would be the console.
>> It would be the console log. Let's just create a console for ourselves over here and what's the console log?
>> Me first?
>> Me first. So what's our first thing in our console?
>> Me first.

[00:10:06]
>> Me first. And now, what happens? Our timer completes in the background, our timer completes in the background. And so what is gonna happen, do we think, Art, when our timer completes in the background? How does that happen? How do I start executing the printHello function? Go back to the global.

[00:10:28]
>> It's gonna go back to our call, it's gonna push our call to printHello, somehow, we'll see in a minute how, across to our call stack. Where we then, so we're in global, we're in global, and on the completion of the timer we push the call to print hello to the call stat and well if we're calling print hello Andrea what do we create?

[00:10:58] A new
>> Execution context.
>> Yeah well now we've back in regular javascript land. Print Hello, print contents, by the way, in global. Look at that. Where is print Hello being executed? It ain't being executed inside setTimeout is it? setTimeout didn't do any execution print Hello, it just span up.

[00:11:20] It spoke, it's like setTimeout is almost like Make an API request in the sense that it's speaking outside of JavaScript. It says go to speak to this built in feature of the web browser, a timer. Where it spun a timer with zero milliseconds wait a function and complete.

[00:11:36] But this was all happening separately while set time [INAUDIBLE] set okay we're done and moved on And in the mean time, hit console log at me first. This got hit before we then completed the timer and passed print hello up to the call stack. Call print hello which then did what?

[00:11:58] Dave, what does print hello do? Print hello.
>> [LAUGH] Brilliant. And look at that. Against all the odds, against all the odds, our me first got printed before our print hello fuction ran. Because we span up our web browser API over here. Now, we're gonna see in a second.

[00:12:26] Hold on. Why even though it took Sarah milliseconds did we end up running our console log me first? We're gonna see that in a moment, but at this point let's have thumb and we'll walk through it one more time. I declared a function, printHello. I then ran setTimeout.

[00:12:45] Parsed in printHello functionality, which, by the way, the design of setTimeout, where does that come from? Well, we go and look in the documentation of JavaScript. It says, the first thing that gets parsed is a function that will be run On the completion of a timer of the length of the value that gets passed to the second parameter, okay?

[00:13:05] You could look at the documentation which set time out. The first thing that gets passed is functionality, then we run on the completion of a timer of this length. And we find well, we don't run print hello inside set time out. No, no, no, that would block the thread Instead we, in setTimeout, speak to a whole separate area outside of JavaScript land.

[00:13:25] Up here is JavaScript, this is just the web browser. And there, there's a feature called Timer, no problem. We make Timer do its stuff. It's a very short timer, don't get me wrong, it's a zero-millisecond timer. Attached to it is a function or a reference of the function that was passed in a set time out.

[00:13:44] So we take into this, we take a timer and we take, we pass in a function and this important information into this timer, there's important information in zero milliseconds. There's the function it's not complete initial, it's not complete initially And then Set Timeout's done it's job. Set Timeout's done it's job of speaking to the web browser API land, and so it moves straight on and the next line is console log me first.

[00:14:10] And so we instantly console log me first. We didn't wait a second. And then Only then do we see, timer's completed, and this function is now ready to be executed. Well, it's gotta get back into JavaScript. So how do you get it back into JavaScript? Well, you push it to the call stack.

[00:14:28] And so it gets called, we create that function execution context inside of which it says, console.log("Hello"):. And so our ordering This ends up being, this is first and this is second. And we could never have guessed that from looking at this code in the conventional sense.