Execution Context

[00:00:00]
>> Will Sentance: But it all starts with something far, far less, well, perhaps more profound, but far less complex. Well, maybe it isn't. And that is how code actually runs. Flipping it, what actually happens when we start running code? I can't believe we're here already, people, we are about to start walking through our code, and we are going to describe what actually happens when we run our code here. We have a constant declaration, a function declaration, and then we're going to run some functions, and maybe you look at this code and go immediately, how did I manage to get stuck in a setting where we're going to walk through this code, but in fact, people understanding how this code runs is crucial, and even many seasoned engineers will have misunderstandings about how this code is running.

[00:00:53]
But really, all it's going to do is two things, because all we do in programming are two things. One, we go through code line by line. Fancy phrase for that is the thread of execution, and we're going to map it down the page, we're going to map down the blackboard as our code goes through, line by line, and does the code line by line, executes the code line by line. It threads down the page, takes each line and does it.

[00:01:26]
OK, and as we go, we're going to save data, functionality, and that's it. So let's get started with this very first line of code here, and I'm going to ask Austin to do the honors, because I'm going to start blackboarding people the code as it runs, I'm going to switch on JavaScript. There you go, it's been turned on. There it is. It's remarkably simple to do on a blackboard, to turn on JavaScript, but that is actually all that's happening, we switch on our JavaScript runtime, our app that can interpret code and do the stuff it says, and the very first thing we'll do is start our thread of execution that's going to go through our code line by line and start doing it.

[00:02:14]
And the first thing we're going to encounter is some code that says save some data. And in programming, all we're ever going to do is save some data and then use that data, and maybe change that data. So, without further ado, let's go ahead with that. We are going to save some data in a store for data as we go, known as a memory, a place where we can store data. Austin, you are up, line one, and these fundamentals, people, everything will build on this.

[00:02:51]
Line one, Austin, what am I doing? You're assigning to a value. And it's going to carve off some memory in your system. That's very exactly, very sophisticated, we're assigning what value to what constant? 3 to num. That's right, we are declaring a constant num and assigning it the value of 3. Beautiful, let's give Austin a hand for the very first piece of code. I promise you people we're going to get to meta-programming before the end of the day, but it all starts with Austin declaring that num is 3.

[00:03:24]
Austin, next line, this time we're not saving a value, well we are, but what is this value we're saving, what are we saving here? Establishing a function. But people, the reason I said we're saving it is we're actually going to go and save this whole function multiplyBy2 in our memory, and I'm going to draw it, people, as this little F here, meaning all of the code in that multiplyBy2 function is going to be saved right there.

[00:03:51]
Meaning, Austin, what is the next line of code that JavaScript actually runs? And it's a little bit cheeky, is it what we think? We're going to save all of multiplyBy2's code and jump right down to declaring output. Perfect. And what are we going to store in output, Austin, at least initially, do we know what to store yet? And is this a pointer to the function then? Well, it's going to exactly go and point to where we saved the function's code multiplyBy2 and start doing what?

[00:04:23]
Chris, it's going to start running the function. Spot on, exactly. What symbols tell me, Chris, that we're going to go and execute a function here? The parentheses. Well done to Chris, exactly right. So we as yet have assigned to output uninitialized. We don't even know yet what to store because we've gotta go and do some work. Our thread has gotta go into, well, declaring, not declaring, evaluating, running, executing, calling, all of these things mean the same thing, our function, multiplyBy2, into which we're passing what value, Chris?

[00:05:13]
The name of the variable, which is num, which is going to evaluate to what number? 3, excellent. There it is. And people, I am just going to mark off here my memory to the side, because we're about to do the most important thing in JavaScript, we're about to start executing a function which allows us to make a little mini program. In fact, it's going to make a mini version of what we were just doing, a thread of execution running through our code line by line, a place to store data, and it's known as an execution context, a space, a context, a place in which we can run some code, in which we can execute some code.

[00:06:01]
There it is. I'm going to be drawing those quite a lot during our session. Into it our thread, which is our fancy way of saying, doing the code line by line, into it it goes, into multiplyBy2, and immediately we get to create a new memory just for inside this function. It is known as a local memory, just available while we're inside the running of this function. Into it we go and Tenzin, what is the first thing that we get to store inside this local memory of the function multiplyBy2?

[00:06:40]
It const results. Almost, that's the second thing we're going to store. What's the actual first thing that we might store as we evaluate, as we run, as we execute, multiplyBy2 with the input of 3? What's our first thing we always do when we jump into a function? The argument. Exactly, and the argument's value is what? 3. Excellent. And what is the name for the sort of like the identifier, the label we put there ready to receive that input number 3, what's the name for that?

[00:07:14]
Um, how do you mean? What do we call, we have our arguments and we have our parameter. Excellent, thank you, Matt. And the parameter name Matt is what? InputNumber. Was that not Matt? Excellent, thank you, Matt. Exactly. InputNumber is the value of our argument, which exactly as Tenzin said, is 3. And now, Tenzin, we do actually hit our little bit of math, which is to assign to result the value of inputNumber, which is 3, multiplied by 2, which gives us what, Tenzin?

[00:07:57]
6. Excellent, thank you to Tenzin. And we then get the chance to return the value of result, which is 6, exactly, so it's going to evaluate to 6, that gets assigned to result, we then hit the key line, which is get us out of this function, return out, do we return out result? I would say more precisely, we return out the value of result. That is the actual number, we lose the interior labels, they're forgotten, and we return out the value of result, which is 6.

[00:08:36]
And in fact, people, our entire execution of this line evaluates, turns to value, it turns into the output value of 6, and that gets assigned, turns into what global label? What global label do we assign the result value to from executing multiplyBy2. We assign that 6 to what global label? Output. Output, exactly. Hooray, well done, and our execution context, people, the place in which we ran that code gets closed, and we weave our thread of execution, it threads its way in, it weaves its way in, does the code, it weaves its way out, finishes doing the code, and we hit a new global label, which Brady, is what?

[00:09:33]
Yeah. OK, let's, Brady, as a brilliant regular at Hard Parts, how do we describe what we're going to do in this very last line? Give it a go as precisely as possible. The constant newOutput assigned the value of the call to multiplyBy2 where the argument is 10. Oh, let's give Brady a hand. Excellent Brady. The constant newOutput is assigned the return value of the call to multiplyBy2, where the argument 10 has been passed.

[00:10:09]
Give me a round, no, I'm joking, obviously not. Good, exactly. So our thread of execution is going to weave now back into our second call to multiplyBy2 with the input of 10, we create a brand new, everybody, can you remember what it was called? A brand new what, 3-2-1? Execution context. Excellent. Well done, there it is, and into it we go, and it too has a little local memory. I'm going to really work on my handwriting here, a little local memory.

[00:10:45]
And in it, we are going to first deal with our parameters and our arguments, we saw that right. So Tenzin, help me out this time, talk me through the parameter argument assignment inside the second call to multiplyBy2 here. The constant 10 is assigned to inputNumber. The number 10, I don't think it's a constant here, I just guess the number 10 is assigned to our parameter inputNumber. One on Tenzin, there it is, inputNumber.

[00:11:25]
And we're then going to declare what constant Tenzin? Result. Result. And we are going to assign to result the value of inputNumber times 2. Yeah, we like that, which evaluates to what? 20. For folk online, every time Tenzin does some serious processing, there it is, 20, we are comical serious processing, to be clear. And then we're going to return the value of result, which is our 20 out into our newOutput.

[00:11:55]
Our execution context closes, everything inside is forgotten, don't panic, we return the value out and oh shoot, and stored it in, the irony of teasing Tenzin about the math before immediately getting it wrong myself and storing it into newOutput. People, raise your hands if you could have gleaned from this code instantly that it was doing that, or roughly quickly that it was doing that work. Yeah, for sure.

[00:12:24]
Absolutely. And yet, even here, I hope you could see that verbalizing through it, that level of precision about which values are being passed where. What is a value, what is an identifier, the fancy word for a label. What is a constant, what is the function call versus the function definition? We defined, saved, declared our function when we saw the keyword function, we then invoked it when we saw, we called it, we invoked it, we ran it when we saw the parentheses.

[00:12:54]
When we did so, we actually created a mini version of our entire program, and our entire program had only two parts to it. We'll see a third part in a moment, but had only two parts to it, thread of execution going through the code line by line, and memory place to store stuff. And when we run a function, we create just a mini one of those with a thread of execution running through it and a local memory, people having this precision down for stuff that might seem, and again I apologize, for folk who are brand new to programming, as some, you know, will be, we might be like, you know, why are you saying this is too basic, bloody hell, I'm struggling with this.

[00:13:23]
Absolutely, and but I think we should also recognize for folk who are newer to programming, that even people who are very, very seasoned engineers will work on getting the precision down right for this. Doing so helps them get all the hard parts to come.