Transcript from the "Browser API" Lesson
>> 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.
>> 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.
>> 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.
>> 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: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: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?
>> 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.
>> 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.
>> 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.
[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: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: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.