Executing JavaScript Code: A Review

[00:00:01]
>> Will Sentance: If you have been to hard parts before you know what about to do, we're about to go into what exactly happens really when JavaScript runs my code. And it's gonna seem profoundly easy, too easy, way [LAUGH] to easy. But we're gonna understand it properly so that there's no mystery about what our code is doing when we get to all the hard parts.

[00:00:24]
Okay, here we go. When JavaScript runs our code, here's some code, two things I said it does, one, saving data, saving stuff. When you play a quiz game that data your score, the last move you took, quiz questions, they're not like saved on the view on the display that's where they render, that's where they displayed.

[00:00:46]
They're saved behind the scenes in JavaScript. Well, JavaScript, therefore, needs a store of data in which we store stuff, we call it the memory. And so with that in mind, David what are we doing in this first line of code here in terms of memory sort of storage space?

[00:01:05]
And I'm going to put everything we store over here, I'm gonna call it memory. And I'm gonna list it all off bump, bump, bump, bump stuff we're storing as we go. So on those terms, David, what are we doing here in the very first line of code?
>> Alex: We're declaring a variable named num.

[00:01:19]
>> Will Sentance: Num.
>> Alex: And we're giving it the value 3.
>> Will Sentance: 3, perfect. That means from now on people anywhere in my app you see num it's referring to that 3. Already we can see three lines of code, that's okay. 10,000?
>> Will Sentance: This global memory, they sometimes call it global state, saved data.

[00:01:43]
>> Will Sentance: I don't know how good I feel about globally saved stuff like this. Anyway, never the less up next lets have Alex. Alex what are we doing in line two here?
>> Alex: Declaring a variable named multiplyBy2.
>> Will Sentance: Ok so a label multiplyBy2 and we're storing associated with that label here a whole block of code it's in the kind of new style of writing.

[00:02:06]
Well, writing what, Alex?
>> Alex: Function.
>> Will Sentance: A function, excellent from Alex, a function. Now, it doesn't might a little nice keyword function that tells me specifically its code but we know it's a function, it's got the little parenthesis there, that's gonna await an input. When we run multiplyBy2 that'll be filled in, these are known as arrow functions, and then in the curly braces, when the code is run, that well that's the code that gets run.

[00:02:28]
Now, that's line two that JavaScript does. It grabs all of that code and saves it, I'm not gonna write all the code out, but it does save it all, I'm gonna instead put a little box here with an f in representing the code of the function, and that's the input output.

[00:02:44]
So what then, Anna, what is line 3 here? If that was line 2, saving multiplyBy2 is the code, what's line 3, Anna?
>> Anna: It is declaring the variable name and setting it equal to will.
>> Will Sentance: Declaring the constant name and setting equal to will. Notice what Anna did there she skipped over the body of multiplyBy2, it saved, it's done, it's finished with, unless we run it.

[00:03:10]
By the way, we never run it, it never gets done. It never even gets done. Excellent, thank you to Anna. People we've seen already two mega parts of what JavaScript does. One, save stuff to memory, there it is, and the other we didn't actually explicitly state but I sort of hinted it earlier even is we went through the code line by line.

[00:03:32]
Finish on line one didn't stop went to line two, didn't stop went to the next line, that's known as a thread of execution. It threads its way down the page and executes each line of code as we go, a lot of the time its saving is stuck into memory, into store.

[00:03:49]
Okay, those two things together are all you need really to run JavaScript, a place to store the stuff and the processing power to go through the code line by line, the thread of execution. They're known together as an execution context. Context is a space to do something, well, to space to execute my code.

[00:04:09]
All right, this known as the global execution context. It's the one which we kick off when we start running all of our code, and by the way, anything in its memory is available for the whole rest of the application. This is in contrast to the local execution context, which is a mini-version of this that we create when we run a function.

[00:04:33]
Cuz what’s a function but a mini-program. People actually call it that a sub program of our overall program. A little mini-app within our overall app. And that’s exactly what we’re gonna do down here. We’re gonna execute code that we previously saved, we’re gonna run it. I’ve got my name will here.

[00:04:52]
We jump straight down instead to Virginia what? If you just start with the left-hand side there, we're declaring what, after you declare multiplyBy2, we're declaring what on the left-hand side?
>> Virginia: Output.
>> Will Sentance: We're declaring the constant output, there is from Virginia. Virginia do we know what to store in output at this point?

[00:05:12]
Does Java know what to store?
>> Virginia: Yes.
>> Will Sentance: It does?
>> Virginia: Well not yet.
>> Will Sentance: Not yet because that right-hand side there is unfinished business. It's an expression that needs to be sent away to be executed. Thank you to David, for our online audience, the whisper approach is excellent.

[00:05:32]
[LAUGH] It needs to be executed. I thought it was perfect. It needs to be executed and we got to get an output from it, a returned value. We're gonna go and run the code of that function, and that little mini-program that little mini-app, the multipleBy2 function, is gonna give us an output, some data, which will then be stored into, well, output.

[00:05:53]
Perfect, so for now output is uninitialized, we don't even give it a value yet it's blank. While we go ahead and run, we go ahead and run, multiplyBy2. Virginia what symbols tell me that I've gotta go and run multiplyBy2 here? What are our call symbols in JavaScript to say, go do that code?

[00:06:16]
>> Virginia: The parentheses.
>> Will Sentance: The parentheses, she's spot on. And we're passing in what, Sam?
>> Sam: 3.
>> Will Sentance: 3. Num which is 3. And so everybody we're executing a function.
>> Will Sentance: I already told you [LAUGH] when you execute a function we create a little mini-app to execute it, it's got a memory and it's got the thread.

[00:06:36]
So we only got one thread, can only do one thing at a time in JavaScript, so it's gonna weave its way in and start running the code and multiplyBy2. To do so we need something called an execution context, excellent from Virginia. An execution context it is basically what we just saw but now a mini-version.

[00:06:59]
A mini-version of our overall program just to run the multiplyBy2 function. It's got two parts the same as the main one, a thread of execution, that is the computer goes through the code of this function line by line, and a little mini-local memory just for stuff we store.

[00:07:18]
So by the way already we can see how noise functions are, they break our main program up into mini-programs. The problem is there may be 10, 15 lines of code in here. And you've seen those functions? They aren't much easier to understand just cuz they're only 15 lines long, it's still full of computer code.

[00:07:36]
And 15 of them, that's 15 by 15 dependencies, like that line, 14 lines depend on that line, 14 lines depend on that line, 14 lines depend on that line, that's still pretty hard. But, let's go into it for now, we'll see how to improve this, but let's go into it for now.

[00:07:50]
What is the first thing inside this execution context as it's known as? What's the first thing that we pull into the execution context? I'm going to call on Andrew.
>> Andrew: The variable?
>> Will Sentance: The variable, talk it out to me.
>> Andrew: The input number.
>> Will Sentance: Input number. We don't call that a variable so much as a parameter.

[00:08:06]
So I like to think of this as a, this overall thing is a constant, people do still call them variables. Variable literally means you can vary what you save in them. So I don't know if I wannna call it that, but let's call it find a constant or you want one variable fine.

[00:08:20]
I like to split that into two parts label, value. Thing you can store, label for thing you store. When you're passing in an actual value to fill in a placeholder of your multiplyBy2 function, as you say to create in local variable. That local label has got a special name.

[00:08:44]
Virginia?
>> Virginia: Parameter.
>> Will Sentance: Parameter, excellent. There it is parameter, argument, parameter, argument. Okay, Andrew now we hit the body of multiplyBy2, what do we do?
>> Andrew: Create result.
>> Will Sentance: We create results and assign to it?
>> Andrew: Well executes, I guess that-
>> Will Sentance: Yeah, so assigned to result input number which is?

[00:09:07]
>> Andrew: 6.
>> Will Sentance: 6, 3 by 2 which is 6, there it is. And the final line says return result. And because this is gonna come up later I wanna stress, what actually happens here is JavaScript holds return for now cuz it doesn't know what to return. It knows it's gotta do something, but hold that, and it looks at this and goes, what is this?

[00:09:27]
And it gets it down to a value, cuz you can only ever a return a value. And so it looks at this and goes, what is result? What its value? Cuz that's definitely not a thing that's a value. That's definitely something that could be evaluated, turned into a value, but it's not a value in its own right.

[00:09:42]
And what is its value, Virginia? Actually, Jasmine?
>> Jasmine: 6.
>> Will Sentance: Is 6. And so what actually gets returned out is 6 out into what global label, Jasmine?
>> Jasmine: It gets put out into output.
>> Will Sentance: Into output, she's spot on, and there it is.
>> Will Sentance: If you are experienced senior developers you must be thinking, aha, I can tell that multiplyBy2 the input of 3 puts 6 in output.

[00:10:14]
>> Will Sentance: But we hand wave, as professors at college used to say, you hand wave, like sort of understand things all the time. And if you build upon sort of understanding of the fundamentals your next level up will only ever be sort of understandings. If you have true clarity over what the fundamentals are actually doing, you will your next up you can now build upon solid foundations.

[00:10:36]
And that's what we're gonna do today. All right, so our thread of execution comes out of this function, we exit it. This whole function is now [SOUND] deleted, its local memory's deleted, it's set for what got returned out. Again, I'm gonna be a little bit more specific here because its come up again and again.

[00:10:53]
The way JavaScript works is, I'll try and keep this clean and neat, but when the functions output comes out that little bit there, the running of multiplyBy2 with the input of 3, actually turns into, before we move on from that line, turns into the output. That's known as soon as evaluates to, let me get it right, value turn into value.

[00:11:16]
And remember, value, value, value, even function saved code is value. Running of code, the command to run code that's not a value. That's a command to go and try and get a value. It'll literally turn into the output. And now we can easily see output is assigned 6.

[00:11:31]
Next line, we now come back out to global where we declare new output is the return value. The return value of running multiplyBy2, again. This time, people with the input of everyone together?
>> 10.
>> Will Sentance: Well done. By the way, Frontend Masters team, Richard Martin loves it when I do the group shout out because they have to turn on all your mics, all at once, it's their favorite thing to do.

[00:12:00]
All right, as create, on that note, we're executing a function multiplyBy2. What do we need to execute a function, we a need a brand new?
>> [CROSSTALK]
>> Will Sentance: That was horrible. [LAUGH] The words execution context.
>> [LAUGH]
>> Will Sentance: I've done a few of these now. We need a brand new?

[00:12:19]
>> Execution context.
>> Will Sentance: Yeah, especially, thank you very much for that great voluble clarity there. We're nothing going to actually create it we'll just know that it's gonna return out 20 into new outputs. I made you go through all that people and I didn't even draw out but or whatever, and there it is new outputs 20.

[00:12:38]
So the thread of execution wove in, actually let me just use a different pen for the thread of execution, it wove in, it wove out, it wove in, and it wove back out. We didn't show this using context here, we went into it, we came back out.
>> Will Sentance: I wanna stress one other thing with this, which I don't usually stress at this point but it's gonna come up again and again.

[00:13:02]
MultiplyBy2 I saved it not saying what, I really should've actually called it this, multiply something by 2. And when I saved the code and multiply something by 2, did I preset what value I was gonna multiply by 2? Sam?
>> Sam: No.
>> Will Sentance: No. Already I can start to see one of the core uses of my functions, save it once, use it again and again in different scenarios with different data.

[00:13:32]
When I run the function dynamically live turn it into multiply 3 by 2. Dynamically live in that line turn it into multiply 10 by 2. And it might turn out people that we don't just want to dynamically set some of our data when we run a function, rather when we save it.

[00:13:58]
When we saved it we set it to, we set 2 when we saved it, but we didn't set the other value we're gonna multiply by.
>> Will Sentance: Only when we ran the function. It turns out that we may also want to only determine some of our actual functionality when we run our function and leave it TBD until then.

[00:14:21]
And that's gonna be our very, very first part of our functional programming paradigm, but we'll see it in a moment. For now, let's just stress again, when you execute when you do a function, Virginia which symbol say execute a function?
>> Virginia: Parentheses.
>> Will Sentance: Parentheses, thank you dear. We create a new execution context comprising the thread of execution.

[00:14:39]
That just now means, we go through the code of the function line by line. I don't always write it all out, but know we're going through its code. And a little local memory, they call it local cuz it's only inside the function, it's also temporary. If we exit that function, ha ha except as we'll see this afternoon, is that it's temporary memory, it gets deleted except for the returned out value.

[00:14:59]
They often call it the variable, well no one calls it variable environment, if you wanna be really fancy they call it the variable environment. Environment it's the stuff around me, this is my environment, and these are the variables that are around me while I'm in this function. Yep, good?

[00:15:14]
Okay, one final piece I wanna add before we dive into functional programming itself.