Synchronous Execution Review

[00:00:00]
>> Will Sentance: Promises, async, and the event loop. Promises, the most significant ES6 feature added, I think in 2015. We'll see by the end of today that they're used to make our code far, hopefully, easier to read, but if we don't understand how they're working under the hood, they are pretty magic and maybe magic to a fault. So we're going to understand how they work under the hood. We're also actually going to see how to, it's something we'll do new in this Hard Parts, see how to take more control of our promises, not just send off some work to the internet and that's the end of the story, but even to abort those promises if we want to.

[00:00:42]
We'll understand this architectural feature of JavaScript, asynchronous code execution, that's what makes dynamic web applications possible. We will then understand the event loop. This is JavaScript's effort to determine what to run next. It's triage, and to do all this, we'll have to understand the microtask queue, the callback queue, and our web browser APIs and features. But to begin, we need to remember how JavaScript code runs, and so we are going to have each person in the room verbalize a line of code for us, woohoo.

[00:01:20]
And so, here we go. We remember when JavaScript starts running, all it does is create a new global execution context that comprises going through the code line by line, known as what, who wants to tell me what going through the code line by line is known as, Joe, what's going through the code line by line, known as a thread or, yeah, thread of execution, right? And does it, how many things can we do at once in JavaScript?

[00:01:45]
How many things can that thread do at once? One! Exactly, one, well done, Michael. Well done, Joe. And then we also have the chance to save stuff in memory. So let's get going. With that, let's turn on JavaScript. As simple as that, and forgive me, my voice still seems to be holding up. And then we are going to open our memory, a place for us to store stuff. And we're going to hit our first line where Chris, we are going to declare what into this memory.

[00:02:18]
We'll make a place for num, beautiful, and we will put 3 in it. That works for me, declare a constant num and assign it the value of 3. To be honest, I don't mind the very intuitive take by Chris. Next line, Austin, what are we declaring? Setting up a function. Yep, by the name of what? It's multiplyBy2. OK, so we are declaring a function multiplyBy2. Austin, say it again. We're declaring a function, multiplyBy2.

[00:02:43]
Well done, Austin, excellent. Do we go inside the body of that function yet, Austin? No. No, our thread jumps straight down to what? Tenzin goes straight down to declare output. Yeah, do we know what to assign to it yet? Not yet, no. No, because Jarvis would have to do some work, which is the work of doing what? Oh yeah, keep going, go ahead, go ahead, Tenzin. It creates an execution. It creates, oh actually, hold on, so we've gotta call what function, Tenzin.

[00:03:18]
Call multiplyBy2, multiplyBy2 with the argument num, which is going to evaluate to 3, and what tells us to call multiplyBy2? The, and then people, because it's the start of a new day, we're going to create a brand new everyone together. Execution context. I hope you're all saying it online as well. Excellent, there it is, and into it we go. And I think it's worth now adding our third component of our JavaScript execution model, the place where code runs, and that is our call stack that is going to keep track of what function we're currently running, that is to say where in our thread of execution we currently are.

[00:04:00]
Now we learned yesterday that that doesn't always determine what data we had available to us, right? Our lexical scoping also helped with that, gave us closure, but we do know that it keeps track of where we're currently at in our code. As soon as we start running code, global is added, or it's always on the bottom of the execution context, as long as, sorry, on the bottom of the call stack, as long as we are running our JavaScript.

[00:04:27]
But now we're running multiplyBy2 with the input of 3, and so it gets added to the top of the call stack. Into it our thread weaves, where, Brady, what do we hit as the first thing inside of multiplyBy2 for us to do in our local memory. The variable inputNumber is assigned to the value 3. Absolutely, but what do we call our variable name when it's a placeholder as an input to a function, it's known as a parameter, parameter, and it's assigned to the value of 3, our argument.

[00:05:07]
Excellent. Then we declare result, which will be the result of inputNumber by 3, which is no, by 2, which is 6. We then hit the keyword, return, that's going to grab the value of result, return it out into output. Beautiful. What happens in this execution context, Brady? Brady, what happens to this execution context? It goes away, it goes away, it gets popped off the call stack, removed from the call stack.

[00:05:41]
Our first erase, which we love, there it is, off the call stack. And we hit global again because it's now top of the call stack, our thread comes out and we, Ryan, tell us what we do next. Execute the. Well, coming in a second, but first we declare, create a constant of newOutput. Perfect newOutput to which we're going to assign what, do we know yet? No, we don't, we gotta go and do some work because JavaScript never leaves any line unfinished.

[00:06:09]
It never says do that work, well, hmm, we'll see. So we're going to stay here and we're going to have to do some work, which is to call what function again? MultiplyBy2 and passing it the argument. Beautiful, we invoke. We call, we execute, we run, multiplyBy2, because we see parens on the end of it. We create everyone together a brand new execution. That's good. The people who keep the energy up on execution contexts are truly the gift to society.

[00:06:44]
And into it we go and we write local memory because I just love writing stuff on a blackboard and in we go and we assign to our parameter inputNumber, our passed in argument. The value 10, and then we declare inside their result, which we assign the value of 10 by 2, which is, Tenzin, our specialist. 20. Look at that. Amazing, and we hit the return statement which says return out the value of result, so it says go find result, return it out into our global context where we assign it to what global constant, Ryan again.

[00:07:20]
NewOutput, newOutput, beautiful. And that was back on the call stack as well, we popped it off. People, what do we notice here about our JavaScript code? Do we run multiplyBy2 the first time at the same time as the second call and multiplyBy2? No, absolutely not. People are shaking their heads, exactly, we definitely don't. Because in JavaScript, we can only do within our JavaScript land. One thing at a time, we do, did we hit the next line, declaring const newOutput before we finish inside the execution context and multiplyBy2 with the input of num, that was 3?

[00:07:55]
Did we hit that next line before we ran multiplyBy2 the first time? No, we definitely did not. Firstly, well done everyone for walking through our code with clarity. This is our core JavaScript model. I am absolutely certain I do things line by line down the page, it is known as the thread of execution, doing the code line by line. How many threads of execution do I have in JavaScript directly? Everyone together?