JavaScript: The Hard Parts Local Execution Context

Transcript from the "Local Execution Context" Lesson

[00:00:00]
>> Will Sentance: Now, we introduce executing, or running, or invoking, or calling a function. So what happens when we do this? This is not the same as defining a function. But how do we tell JavaScript to define a function? Keyword, function. How do I tell JavaScript to call a function, Art?

[00:00:23] How do I tell JavaScript to call a function?
>> Will Sentance: All I have to do is add parenthesis, that's it. I take the name of the function and I add parens, not an input. Adding parens is enough it say, it just says go run the code of that function.

[00:00:36] It may not have actually therefore an argument path with actual value, but it's still running a function. So let's keep going. Line 1, num is 3. Line 2, multiplyBy2 as a function. We may be thinking, man, yeah, I know how this is working. I can look at this straight away and figure it out.

[00:00:55] Getting this level of precision down now is what makes closure, higher order functions, OOP, all flow much more naturally. So what's our next line of code after declaring multiply by 2 ,Clara?
>> Clara: After declaring the function then you'll declared in your outputs constants.
>> Will Sentance: Perfect there it is, and what are we going to assign to it Clara?

[00:01:22]
>> Clara: So eventually would be the return value of the function.
>> Will Sentance: Correct eventually it would be the return value of calling the multiplyBy2 function with the input of 4, but we haven't done that yet. We've got to go do that work. But JavaScript likes to have everything over value even when it's in the waiting game.

[00:01:39] So what's its Default waiting value.
>> Clara: Undefined.
>> Will Sentance: Undefined, I'm gonna draw it as an old dotted line, we don't know what's gonna be there yet. So just to be really clear, what's definitely not there is multiplyBy2. Output has no interest in multipleBy2, it only gets interested in multiply 2 in the sense of it's run multiplyBy2 and the values come back as a return value, the result.

[00:02:03] Whatever is in the return, or whatever's after the return keyword inside the function, that is what's gonna be stored in output. So you gotta go do some work. So let's do that work. We're gonna see what happens when I run multiplyBy2, and assign the result of calling it, with the input of 4, assign the result to output.

[00:02:30] So who knows what we do when we start with an outcome we create a global execution context. What about when we start running a function? What do we create, Lindsay? How do we start running that function?
>> Lindsay: A local.
>> Will Sentance: Local what?
>> Lindsay: Execution.
>> Will Sentance: Everyone together, we create a local?

[00:02:49]
>> Lindsay: Execution content.
>> Will Sentance: Excellent, perfect, good job Linsey and the team. There we are. What's in it? Llet's have a look. Here's our local execution context. And it has, just like a global one, had a global memory and a global thread in which we are doing all this work, right.

[00:03:10] We are doing work line by line. Now we got a local one and we just got a local memory and a local thread and a local thread just means doing the code inside the function now line by line. Before we were doing the code globally, now we're doing the code inside the function line by line.

[00:03:25] And we paused doing the code globally. We're not hitting the line new output. We're just paused before this line here, we're waiting to go back to this global execution context while we're busy inside running this local execution context for multiplyBy2 with an input of 4. So Andrea, what's the first thing we do inside of multiplyBy2 with the input of 4?

[00:03:53]
>> Andrea: We take four and we put it in input number and then we times it by two.
>> Will Sentance: Yes, very good, well yes, we take four put it in input number. What's the posh way of saying we take four and put it in inputNumber. Andrew, you wanna give a shot?

[00:04:08]
>> Andrew: We assign it to the-
>> Will Sentance: What's a posh word for the input, the placeholder?
>> Andrew: Parameter?
>> Will Sentance: Parameter, exactly. So we take the parameter inputNumber, assign it our argument value, which is 4. Hooray, okay next line, Andrew?
>> Andrew: Would be the constant result.
>> Will Sentance: Good, there it is.

[00:04:32] Also stored in our local memory and what do we assign to it?
>> Andrew: Four times two.
>> Will Sentance: Yep, and the posh word, by the way, for saying that is the evaluated resulted. Evaluate means they did the work, did the calculation. The evaluated result of input number, which is you look at that memory, 4 by 2, which gives us 8.

[00:04:53] Excellent, good, and now what do we do with that result, Andrew?
>> Andrew: Return it.
>> Will Sentance: Exactly, so we already said, whatever gets returned out of calling this multipliedBy2 function, will be stored in this output variable. We turned out, put the value 8. I'm gonna store that 8 in output, there it is, all right, perfect.

[00:05:29]
>> Will Sentance: Beautiful, very, very nice. Andrew, go ahead.
>> Andrew: Were you saying that the output, when it's officially or when it's first put out, is designed as undefined, until it's changed to eight?
>> Will Sentance: Correct, until it gets it's return value of eight assigned to it. All right, until it gets return multipliedBy2 return value of 8 assigned to it.

[00:05:51] Okay, so now what's happened to this execution context? Griffin, ee finished calling multiply by two, what do you think happens to this execution context, Griffin?
>> Griffin: It gets erased.
>> Will Sentance: Erased, gets removed, except for the return value out, which gets stored in output. I've never figured out a way of indicating that it gets erased, but I'm gonna do this, I'm gonna write DONE like that, that execution context is done.

[00:06:22] That's not great, I grant you. I'll come up with a better way doing it but, there we go. So now which execution context do we go back to Griffin?
>> Griffin: Global.
>> Will Sentance: Global. Now, JavaScript doesn't know that by default. It needs to keep track of that fact somehow.

[00:06:39] We are gonna see that bonus thing that it uses to keep track of which execution context it is in and which one to go to next, in a moment, raise your hand if you think you know what that's called. The place it keeps track of that. Okay, we'll come to it in a second.

[00:06:53] For now we're back in global. And what's the next line, Shelby, in the global execution context tell us to do?
>> Shelby: New output is the new variable?
>> Will Sentance: New output is the new constant. There it is, newOutput. And what are we assigning it.
>> Shelby: We are gonna pass the parameter of ten into input.

[00:07:15]
>> Will Sentance: Yeah, because we don't yet know do we what we gonna assign it. For now, it's undefine because we've gonna cool multiplyBy2. Figure out what comes out at the bottom and that's what's gonna be stored in new output. So Clara, talk me through as in a complete form as you can Clara, this final line in our global execution context.

[00:07:43] New output is the return value of multiplied by 2 when called with 10. Talk me through this as completely as you can Clara.
>> Clara: All right, so once you started your new local execution-
>> Will Sentance: That's the first thing, got it? Doing that now. Excellent, it's got a, what is it comprise?

[00:08:01] What is it an execution called it's comprise?
>> Clara: Local memory.
>> Will Sentance: Local memory, which has a portion name we'll say what is in a second. But local memory and the thread jumps inside To run the code inside the function. Clara, go ahead.
>> Clara: Right, so your parameter, input number, so the value 10.

[00:08:20]
>> Will Sentance: Yeah.
>> Clara: And then setting up your constant results.
>> Will Sentance: Yeah, and assign it with what?
>> Clara: Some maths.
>> Will Sentance: Yeah, good, exactly, get 20, and what's the final line of the boolean function tell us to do?
>> Clara: Returning result.
>> Will Sentance: Returning result, and I realize already we're reaching the extremity of the board.

[00:08:40] There we go. So the result value is gonna be returned, and where did we say that result value is gonna be stored?
>> Clara: That's gonna go to your newOutput.
>> Will Sentance: There it is.
>> Clara: In the global context.
>> Will Sentance: In the global execution context memory. And so out returned 20, and we store 20 in newOutput.

[00:09:00] What happens to this execution context, Clara?
>> Clara: It goes away.
>> Will Sentance: Goes away.