[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.
>> 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.
>> 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: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: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: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.
>> 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: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.
>> 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?
>> Andrew: 6.
[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.
>> 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: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?
>> 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?
>> Will Sentance: That was horrible. [LAUGH] The words execution context.
>> Will Sentance: I've done a few of these now. We need a brand new?
>> 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.