JavaScript vs. Browser APIs

[00:00:00]
>> Will Sentance: We want to be able to talk to this web browser set of features, so let's just have a little bit of our, let's remind ourselves, and we have our JavaScript, and it's going to not sit in isolation, it sits within the web browser as a whole, which has a whole bunch of additional features we saw, we have the DOM. We saw we have the DOM, we saw we had timers, we saw we had storage, which is the other 10 we had network access, speak to the internet, right, that's why our JavaScript's interesting in the browser.

[00:00:38]
And then we get to use these via very unrelated labels. Ah well. OK, but now we're going to turn on our JavaScript, but our JavaScript engine that we know has, and I'm going to start doing my call stack here, I think it's going to fit, oh, call stack here. I JavaScript engine. Has our 3 big parts, has anyone forgotten them yet? No, it's our memory, it's our thread of execution that is single and synchronous, do stuff one at a time.

[00:01:15]
When people tell you JavaScript's asynchronous, well, I'm pretty sure that main thread is very synchronous, unless something else is going on. And then we have our web browser down here. Everything below here, people, is going to be features of the web browser. We're going to call them APIs, they are features that we can, I stands for interface with, from within JavaScript. So everything underneath here is actually not going to be running in our JavaScript engine.

[00:01:52]
It is not going to be running out of JavaScript engine, but we know what we're doing in the first line here. Brady, line one, what are we declaring? Be as precise as possible, well, be as fancy technical communication as possible. What are we doing in line one, Brady? We're declaring the function print hello. Excellent, it's spot on. From Brady, there it is, my F that represents the code of that function being saved in JavaScript memory.

[00:02:18]
Now we hit, oh we're in global. Now we hit our first interesting line of code in here. We are calling what looks to me like a good old regular JavaScript function, one that takes in what, a callback, what function's being inserted over to Chris. Print hello, print hello. There it is, our whole function definition, our whole code, and our second input to setTimeout, and we can go and check this on our, where Tenzin, where do we go and check the rules of, say, setTimeout?

[00:02:59]
The documentation, excellent, MDN. Whereas the second input is going to be the number of milliseconds that we want to, oh, not MS, that we want to delay our print hello function before we run it, so we thought, well, presumably that has to happen in JavaScript. Wait 1000 milliseconds before we then hit our console of me first, and yet we also remembered, maybe we've seen it before, as Matt said, there's no way that we're blocking that single thread.

[00:03:36]
Because of what? Because as setTimeout's consequence people, is it, is setTimeout's consequence in JavaScript land, everyone? No. Is it in web browser land? Yes. I'm not going to let anyone come up and oh Michael, come on up. Michael, thank you so much. Michael, I need a big old line between where setTimeout is being called and where its consequences are going to be. Thank you to the wonderful Michael.

[00:04:08]
There we go. So it's called up here in JavaScript and then it's run in the API. I need to see a line. You want a full line alright. Let's give Michael a hand. Excellent on Michael, thank you, Michael. Yay, well done, Michael. I was going to say we could have done a line down this way, but why take the fastest route? Why not take the literal longest route that we could take? Well done, Michael, an experienced blackboarder there, like a blackboard prankster to make my life.

[00:04:40]
OK, excellent, so down into web browser API as we go, where we are going to, well, what did we say setTimeout is going to use Chris within the web browser. Timers, timer. So I setTimeout is a label for our timer feature, and I'm going to draw these people like this, I'm just going to say, we spin up a timer, in fact, yes, our setTimeout is going to, in the web browser, I'm going to do this little, I'm sorry, this is not me being in any way partisan to Chrome, but it's the only logo I can draw of a web browser.

[00:05:17]
There, you know, there's a web browser, others are available, and into the web browser we go where we turn on a timer. What pieces of information would this timer critically need to function? Chris, what information does it need to function? It needs the callback in the time. It needs the amount of milliseconds, exactly, so let's set it to 1000 milliseconds, and it also needs the function to run, let's call it on completion, maybe, on completion, you know, when complete, we're going to call our print hello function, and I'm sure you'll have questions about whether that is, you know, fully, but we can probably imagine we're not actually fully copying that function in here, suppose, as opposed to just referencing back to where it was saved in JavaScript.

[00:06:08]
And, oh, you know what I need to add people, forgive me, I need to start tracking our time as we go. So we started this, and I'm going to do green for time passing at 0 milliseconds. OK, so at 0 milliseconds, let's track at 0 milliseconds, is our 1000 millisecond timer, Chris, complete? No, no, it is absolutely not, it is not complete. And so what do we do? Well, people, all of our JavaScript work in this line is complete.

[00:06:40]
We ain't sitting on that line any longer. It's only meaningful consequence, technically in JavaScript, it does actually return out some sort of ID that is an ID for the timer, that's not a bad idea. It's to be able to get some information about the timer potentially, but we are all intents and purposes, finished with this line. So in one further millisecond, and in reality it's much faster than that, but just I'm using these ones and zeros that's sort of ordinal to say this is the next thing that happens, roughly.

[00:07:20]
The next thing that therefore happens in JavaScript, Chris, is what? Console log. Console log, our me first. And there we go, and I'm going to put my console people here, which I know, I know it should be in our web browser, but it's sort of, there you go, the console there, and into our console at one millisecond, what do we get? We get our me first. Our global code is finished running. Maybe our global execution context is popped off and we leave.

[00:08:03]
And we'll see why later, because time is ticking by, time is ticking by, and at 1000 milliseconds. At 1000 milliseconds, is our timer now going to be complete, Tenzin? Yes, it certainly is, and when it's complete, what is going to be executed, Tenzin? Print hello, print hello. How does a function get executed? What needs to be added to the end of it, Tenzin? The parens. Do we manually put those parens on?

[00:08:30]
No, I didn't see them anywhere here, right? There's no parens on the end of print hello when it's passed into to setTimeout, we just passed a reference or a link back to that function definition. When something's going to be executed, Tenzin, where does it need to be added to the call stack, excellent from Tenzin. Exactly, and so at 1000 milliseconds, our print hello function is added to our call stack parens, and there we have much time passed and 1000 milliseconds, our print hello function is executed.

[00:09:25]
Everyone together brand new execution context, into it we go, where we are simply going to console log our hello, and there it is at 1000 milliseconds, we have our hello in our console. People, we've added a whole new part and some lovely new colors to our JavaScript and web browser architecture, system, we've added our web browser features that can be spun up, can be kicked off, not, oh yeah, when I use a word really loudly and it's the wrong word, I do reverse.

[00:10:01]
It can be spun up by our facade function. It looks just like a JavaScript function, looks like the ones we wrote earlier. But this one ain't doing anything of interest in JavaScript. Instead, as we saw from Michael, it's doing stuff in the web browser, where we span up a timer, using the information passed in. You can see why I called it, you know, a facade function, because it looks like it's doing a bunch of JavaScript type stuff.

[00:10:29]
No, this is an accessor, this is a facade for functionality very much outside of our JavaScript engine. And so we grab our time, that's going to spin up a timer for 1000 milliseconds, we grab the code we want to have run on completion, technically a link back to where it was saved in JavaScript, and then we count the timer up in the background. But in the meantime, in JavaScript, we plow through in our single thread of execution, and hit our console log me first straight after, and then JavaScript just sits around and goes, well, and we'll see later how it knows, it goes, well, there's stuff tracking on down here, so I ain't going to close up, I ain't going to close up shop, I'm going to stay on.

[00:11:16]
And 1000 milliseconds later, our timer completes in the web browser, and the on completion print hello function says, hey, I'm ready to get back into JavaScript, run me, and to run me, it gets put on the call stack, at which point we get a new execution context, and at 1000 milliseconds, we have our console log hello from our print hello function.