JavaScript: The Hard Parts Deconstructing Example

Transcript from the "Deconstructing Example" Lesson

[00:00:00]
>> Will Sentance: We just saw the function's gonna be returned from the functions in jobs. We want a hint of that. We say from high order functions, we know we can return a function from a function, and then store it in a new label globally and run it by that new label.

[00:00:11] Let's do this very precisely line by line. Again, this is gonna feel like, why are we doing this? If we get our head around this, closure follows so naturally, so line 1, Katy, what are we doing Katy?
>> Katy: We're declaring the function instruction generated.
>> Will Sentance: Excellent Katy, getting the hang of it, very nice.

[00:00:36] Instruction,
>> Will Sentance: Generator. Instruction generator is a whole function definition sort of memory. Excellent. Next line of code, who's gonna be the lucky person? It is Kara.
>> Will Sentance: Next line of code, Kara.
>> Kara: Let generated function.
>> Will Sentance: So that's just saying create a label, generate a func. And folks, this is clearly, right, as anything on the left hand side of a function call is a placeholder, right?

[00:01:21] We don't yet know what's gonna be stored there. So what's temporarily, Andrea, gonna be stored there?
>> Andrea: Undefined?
>> Will Sentance: Undefined, right. So we've gotta go and do what?
>> Andrea: Execute instruction generator.
>> Will Sentance: Execute instruction generator. That's what you're spot on, Andrea. Okay, generated func. Generated func is going to be the result of running exactly as Andrea rightly said of running instruction generator.

[00:01:52] Andrea, remind sorry of how I'm running instruction generator here?
>> Andrea: Parens.
>> Will Sentance: Parens, right, there's no input. All parens do is say go look for this function description and do its code. And if there's input, great. Fill those in. But if there's none, this just says go run me.

[00:02:08] So go run me. Create everybody a brand new-
>> class: Execution counters.
>> Will Sentance: I'm gonna try again man, I'm not even joking, everyone we create a brand new?
>> class: Execution counters.
>> Will Sentance: Beautiful
>> Will Sentance: It's so important. Create new execution context, here it is,
>> Will Sentance: In which we are, that's a bit big, actually.

[00:02:31] In which we are going to do. Firstly, if we're creating this new execution context, Griffin, what are we doing in our call stack?
>> Griffin: We push it off.
>> Will Sentance: Push, push what? The call to.
>> Griffin: The instruction generator.
>> Will Sentance: Right, how do I know it's the call to instruction generator?

[00:02:50] What's those key symbols on the end of instruction generator?
>> Griffin: The parantheses.
>> Will Sentance: Good, exactly. It knows to be confused by that. And into instruction generators execution context we go. And it has a local memory and a thread. So the thread is no longer running globally. It's now in here.

[00:03:10] I'm gonna give this its other name, which is its variable environment. That's the variable environment for the call to instruction generator. That's the posh name for it. You got a?
>> Katy: Yeah, I have a question about. When you're in the-
>> Will Sentance: Local executition context.
>> Katy: Yep, the local executition context do you have access to global memory?

[00:03:28]
>> Will Sentance: We're gonna see that in a second. Absolutely, absolutely you do. We're gonna see that process, actually in just a second. So let's see local memory, everything that get's saved here goes to local memory. I was giving a preview. Anything that gets referred to looks in local memory first.

[00:03:45] It doesn't find it there, it looks down its call stack, looks out to global memory. You're gonna see in a moment where that actually plays out. Actually Katie's here about to get to the heart of this whole section. This is the heart of this whole section. Katie has almost posed the question that we're gonna find the answer to in this session.

[00:04:06] Cool, right Katie?
>> Katy: [LAUGH]
>> Will Sentance: Exactly, cool. Okay so we said, announce generated funct, left hand side as a placeholder. We do not know what's gonna be stored in it. It could be anything. It could be, you know, a number, it could be a string. Could be a function.

[00:04:26] Makes sense, right? Could be anything. Whatever comes out the bottom of instruction generator is what's gonna be stored there. So we gotta go run instruction generator. Let's have Clara. Clara, we jump inside the instruction generator. There's no parameters to handle this time. What do we do, Clara?
>> Kara: So you're creating the name multiplied by two because it's a function?

[00:04:48]
>> Will Sentance: It's a function, there it is. A whole function definition and there it is. Okay, I'm gonna highlight it so we really know which function this is. There it is. So I've already called console log call immediately after that definition. I've called console log, not my console, immediately after that function definition multiplied by 2.

[00:05:10] Inside instruction generator, what would I see?
>> Kara: You'd see the function.
>> Will Sentance: Yeah, because folks, when I declare a function, I'm not saying like, I'm not saying JavaScript He is a function vaguely. I'm saying Java Script. Free up some position in memory to put the description of that functionality in.

[00:05:27] And that label is gonna point to that description. This is not like, when JavaScript sees that line in function mode what it'll do is it'll start saying okay now there's a. I'm saying that literally. Go and free some space up in memory. Use that label to refer to the functionality that we just defined.

[00:05:42] And there's a little bit of memory now with the functionality counter plus plus. And the inputs or whatever's, I'm sorry number by two. Whatever's in that, not counter plus plus obviously. Whatever's in that definition. It's a little bit of memory this bit here, with that label, for that definition.

[00:05:57] Okay, next line of code, Lindsey. We've declared multiply by two, we've stored it the actual function in memory. Now do we now execute multiply by 2, Lindsay, do we call it?
>> [BLANK AUDIO]
>> Will Sentance: No. That was my the answer's no voice, question voice. Do we now call it?

[00:06:15] We do not right? What would it take to be called here?
>> Katy: Multply by 2 with parenthesis?
>> Will Sentance: Yeah exactly. Everyone getting that yet? Now we're gonna see why it is so important. This throws seasoned developers all the time, this bit here. What am I actually doing in my next line?

[00:06:31] This one's on you, Lindsay.
>> [SOUND]
>> Lindsey: Returning the actual function?
>> Will Sentance: Fantastic. Spot on, I'm returning the whole. And by the way, know its label, the value. The function is a value. It is that description that you see. I'm returning it out. And I'm gonna store it, whatever gets returned out of instruction generator was gonna be stored where, Lindsey?

[00:06:59] Whatever gets returned out in instruction generator is gonna be stored where?
>> Lindsey: In the local.
>> Will Sentance: Whatever gets returned, whatever the output of instruction generator.
>> Lindsey: In the generated func.
>> Will Sentance: In generated func, that's where you're gonna store it, wasn't it? There it is, generated func. And what's ended up being returned out then, Lindsay?

[00:07:15]
>> Lindsey: The actual function of multiply by 2, the value.
>> Will Sentance: Very good job, Lindsay, I like this. There it is. The whole function, there it is the whole function. I try, and representing like this. Is this whole function definition. I'm actually going to write out exactly what we see.

[00:07:32] Yeah, I'm gonna write the whole function definition is returned out, function Num, it doesn't have a name yet, it's just the definition of it, cuz it's not got a name if we return that as a value, num return num by 2. That's what got returned out and is stored in generated func.

[00:07:59] This whole. This whole function definition. Out it got returned and we stored it in generated func. My friends, this is the thing that throws seasoned developers all the time. This particular thing. And I'll ask you a question. And I'll ask Lindsay it. How can I now- Let's just finish up with our execution context.

[00:08:25] Just to make sure we're really clear. We've returned our multiplier by two, stored it under what label Andrea? We've returned our multiplier by two from running instruction generator, it's the output stored in what label? The internal function? We've returned out multiplied by two, stored it where Mohammed.
>> Muhammed: In the generated func.

[00:08:50]
>> Will Sentance: In generated func, what's happened to the call to instruction generator Lindsay.
>> Lindsey: Wait, ask that again please.
>> Will Sentance: It's done. It's done It's finished. So Griffin, call stack expert. What happens to our call stack?
>> Griffin: It gets popped off.
>> Will Sentance: It gets popped off. So that means that yes, fine we returned out the whole definition, which is multiplied by two's definitions.

[00:09:21] But all of this. All of this local memory. All these, all gone. I still don't know how to say to show visually without it becoming a complete mess, which obviously it did. There you go. All gone. Except this function that got returned out and stored in the new label generated That's the only thing that got hold onto.

[00:09:43] So now which execution context are we into Griffin?
>> Griffin: The global.
>> Will Sentance: Global. In global is there a function named multiply by 2 Griffin?
>> Griffin: No.
>> Will Sentance: So how can I run/call invoke execute multiply by 2 in global?
>> Griffin: On parentheses.
>> Will Sentance: Is he right? He's so right.

[00:10:01] Very nice round. Exactly. If I run now generated func, it is that functionality multiplied by two. I just stick parenthesis on the end of it because this is generated func is this functionality. Multiply by two that we return that as wholesale, the whole description of the function and gave it a new label.

[00:10:21] We said whatever comes out of the ball instruction generator it's this whole functionality where it said return multiply by two pulls the whole function out. It's the output of running instruction generator, that whole functionality gets stored in funct. So now if you wanna run that previously, the function previously known, general function previously known is multiplied by two, a new label, we just put prints on the end obviously parse in a parameter because this function has a place holder, num, waiting for parameter, there it is.

[00:10:56] Same code but we've now at the bottom we're now calling, invoking, running the function value formerly known as multiply by 2 by its new label, generated func, and we're passing it the input 3. Well, if I'm calling a function, Katie what do I do? Create a new?
>> Label?

[00:11:18] Wait.
>> Will Sentance: Everyone together!
>> Katy: Execution code!.
>> Will Sentance: Good job, Katie!
>> class: [LAUGH]
>> Will Sentance: [LAUGH] I'm calling a function. But I forgot the left hand side actually. So I'm calling Jenny to with input three. What's the left hand side said to do Katie?
>> Katy: Assign it to result.
>> Will Sentance: Right, so we're gonna have result.

[00:11:33] Do we know what result's gonna be yet? We do not. We do not, just like any function call being assigned to a variable, we don't know yet. The call generated func, and we know that whatever is going to get returned out or generated func will be assigned to the placeholder result, because result is set to be the evaluated output of running the function.

[00:11:57] And whenever you see a statement like this, it means go create an execution context, friends, and whatever is the return statement inside that execution context. Whatever's after the return statement is what's going to be assigned to whatever's on the left hand side of equals. All right, so in we go.

[00:12:14] Katie, generated func at this point is really the functionality known as, is that's what's we're [INAUDIBLE] is really what the functionality we used to call when we created that function inside an instruction generator. What was this functionality called?
>> Katy: Multiply by two.
>> Will Sentance: Multiply by two, exactly. But we said inside an instruction generator and we called it, we created multiply by two.

[00:12:37] How do we create multiply by two? What key words says create multiply by two?
>> Katy: F, function.
>> Will Sentance: Keyword function, correct. That created it, said stall the description in memory under the label multiply by two. But we then said return multiplied by two, and JavaScript went to look for multiplied by two, saw what it was.

[00:12:57] It's this function description as a value. Return out that description, this description, and that's now the output of running instruction generator which we've said store in generated func. So generated func is now that functionality multiplied by 2. And so if that's the case, this functionality, what's the first thing we we have to handle in the core degenerator's function ,Katie?

[00:13:25]
>> Katy: We set num to be three.
>> Will Sentance: Yep, spot on. Then we do three by two, six, and that's our return now value, which is assigned to result.
>> Will Sentance: [EXHALES] My good, and we forgot to add generator's func Jesus, we've got add to generated func, let's add it, generated func.

[00:13:48] When we were calling generated func we were inside pool vaccuum stack. Next thing that happens when we continue running generated func Katie?
>> Katy: It gets popped off.
>> Will Sentance: Popped off, perfect.
>> Katy: And then everything is done.
>> Will Sentance: And yeah, then we're back to global and then the code's done.

[00:14:03] Very good job, Katie. Okay, so, we're gonna have funcs in a second, on. I create a function instruction generator, I then create a placeholder generated func, that's gonna have in it whatever value gets returned from instriction generator. Even if that value is just a function description. What do you know I called in instruction generator that means I start running through the code inside the instruction generators.

[00:14:28] What’s it say to do? It says JavaScript go create a space in memory for this function description, return num by two with the input of num and sort it under the label multiplied by two. Don’t then run it, don’t ever invoke it, don’t call it, just return that whole description out, and it's now the output of running instruction generator and store that whole description in generator func.

[00:14:52] So now globally, we have access even though we've finished instruction generator. We still have access to that formerly known as multiplied by 2 functionality under a new label. Generated func. And then we say, okay, well, I wanna run that functionality. How do I do it? Use a new label.

[00:15:10] Generated func. Pass in three. And I'm really running the multiplier by two functionality. By the way, I ain't going back in here to look for multiplier by two. This was done. It's only because I returned that function out. To give it a new label globally. This whole names, all gone, because it's returned that.

[00:15:29] By the way, we returned that function and stored it in generatedfunc. We lost this label and then we run generatedfunc really multiplied by 2, but a 3, fine. Num is 3, 3 by 2, 6. Return that out and store it in results.