JavaScript: The Hard Parts Deconstructing Generalize Function

Transcript from the "Deconstructing Generalize Function" Lesson

[00:00:00]
>> Will Sentance: Folk we're gonna walk through this line by line this is our final function for our higher order functions. So we're gonna walk through this line by line and to kick us off Mohammed line one no this was a mistake. Mohammed line one, what are we doing Mohammed?

[00:00:18] Talk me through line one of this function of this set of code.
>> Mohammed: Declaring a function called copyArray, and manipulating it.
>> Will Sentance: Perfect thank you, man. CopyArrayManipulate, and of course, we're at the global level right, aren't we? We're not inside a function, so where's that being stored, Mohammed?

[00:00:36]
>> Mohammed: In the global memory.
>> Will Sentance: In the global memory. There it is. I'm gonna draw it as a little function box, a little function, a whole description. Okay, next line is what, Shelby?
>> Shelby: Declaring the function multiplyBy2.
>> Will Sentance: There it is, multiplyBy2. As a little baby function that only takes in a single what?

[00:00:57]
>> multiple: [LAUGH]
>> Will Sentance: Little baby function, so it takes in a single element, and then multiplies it by 2. Little baby function, there it is. And let's just highlight it slightly so we know which function it is. And if I were, Shelby, in the line after that definition, declaration multiplyBy2.

[00:01:17] If I were to console.log. Let's write it up. If I were to do this, console.log multiplyBy2, no parens. What would this display on my console Shelby. Just to make sure we're really clear, what would this display on my console?
>> Shelby: Undefined.
>> Will Sentance: Undefined, What have we stored in multiplyBy2?

[00:01:40] JavaScript goes and looks in global memory, sees multiplyBy2. What's it see?
>> multiple: The whole function.
>> Will Sentance: The whole function definition. So if I were console log the word multiplyBy2, what would I see in my console, Mohamed?
>> Mohammed: Just the whole function.
>> Will Sentance: The whole function definition, multiplyBy2 is label for my whole function description.

[00:01:58] Okay, okay, it is the whole function definition. Meaning, if I then pass multiplyBy2 in to instructions, I'm not passing undefined in. I'm not running copyArrayandManipulate with multiplyBy2 as actually undefined. No, it's gonna literally be the whole function definition, being passed in to replace the placeholder word, instructions. All right, so now, we've declared copyArrayandManipulate declared multiplyBy2, what's the next line tell us to do?

[00:02:31] Matthew, what's the final line on the left hand side say?
>> Matthew: Leb results.
>> Will Sentance: Which is saying give JavaScript label results, right?
>> Matthew: Right.
>> Will Sentance: Good, and Matthew, do we know what's gonna be stored Matthew in result yet?
>> Matthew: No.
>> Will Sentance: No, cuz we've got to go run that function.

[00:02:50] Matthew, how do I know I've gotta go run that function what symbols?
>> Matthew: Paranthesis.
>> Will Sentance: Good job Matthew very nice yeah correct. I'm gonna go run that function. It's undefined for now. I'm gonna go run that function. And I'm gonna do it copyArrayManipulate code with what? What's our first argument, Griffin?

[00:03:17]
>> Griffin: Is the array 1, 2, 3.
>> Will Sentance: Good, there it is, array 1, 2, 3. And our second value, Griffin?
>> Griffin: Is the function multiplyBy2.
>> Will Sentance: Spot on, multiplyBy2 and it's the whole function definition, right Shelby? It's a whole function definition that wasn't a passive aggressive statement, it sort of was but no, no.

[00:03:38] It was not intentionally there. The whole function definition, right? The who node description, if I would say, yeah. I know, it's the whole function definition. Good job, there it is. And the output, we're saying already that we know that whatever gets returned out of this function, whatever comes out the bottom of this function, is gonna be stored where, Shelby?

[00:03:58] The output of running this function is gonna be stored where Shelby?
>> Shelby: Global.
>> Will Sentance: In what label? What's it say?
>> Shelby: In result.
>> Will Sentance: In result, exactly. In result. But we've got a whole set of instructions copyArrayandManipulate, that we've gotta run through line by line. That's the thread of execution.

[00:04:18] And we got a whole bunch of data we gotta store, output array, that's the variable environment, the local memory. What do we call those two things together? Everyone together, a?
>> multiple: Execution context.
>> Will Sentance: Perfect, there it is. We're gonna create it, there it is, execution context with a local memory.

[00:04:40] Local memory, in which anything we declare, define, create inside of the code of a running copyArrayandManipulate stored in there not in global. So, at this point,
>> Will Sentance: Bob, what's the first thing we do inside copyArrayandManipulate before we even get inside copyArrayandManipulate what's the first thing we're gonna handle?

[00:05:11]
>> Bob: The placeholder passing array in.
>> Will Sentance: Yeah, nice, so what do we say, what's the posh way of saying that we're gonna yeah here we go.
>> Bob: Sorry, the [LAUGH] placeholder.
>> Will Sentance: So what's the first placeholder we've gotta handle?
>> Bob: The 1, 2, 3.
>> Will Sentance: Which is gonna fill in what sort of a placeholder?

[00:05:28] That's the actual value, the argument-
>> Bob: The array param.
>> Will Sentance: Array parameter, exactly. And what will array now be, because of what you just said, everywhere inside this function called? 1,2,3, spot on. And now, Clara, Clara when someone's on their phone, they get called upon. Clara, we filled an array as 1,2,3, we now have another parameter, which is what?

[00:06:00]
>> Clara: Instructions.
>> Will Sentance: And what is instructions, Clara, going to be replaced with? It's just a placeholder. What's it gonna point to? What's its value gonna be throughout the life of this function call?
>> Clara: It's a function the multiplyBy2 function.
>> Will Sentance: Spot on, the entire multiplyBy2 functionality. We no longer, are gonna refer to it as multiplyBy2 inside.

[00:06:24] We're gonna refer to these instructions. But it is that entire function definition that we gave birth to out here, in global, we defined here and then pass in, to be available inside copyArrayManipulate under its new label instructions. So Clara, if I wanted to, inside copyArrayManipulate, run that multiplyBy2 functionality in here under its new label, what's the exact wording I would use to run it?

[00:06:50]
>> Clara: You'd say instructions.
>> Will Sentance: Instructions, I'm sorry, say that again.
>> Clara: Instructions, parentheses.
>> Will Sentance: Parentheses, I probably wanna parse something because right if you look at the definition and multiplyBy2 it's got a placeholder so I pass in 3. Because instructions literally evaluate to, that becomes the multiplyBy2 function.

[00:07:09] Just like Array if we were to go array position 1, inside of here, we are gonna look at this array. Instructions, we are gonna look at what it is. It is the multiplyBy2 functionality. It has literally replaced the placeholder, that was previously a placeholder instructions. All right, let's walk through it as precisely as we can, okay.

[00:07:31] So we've done our parameters. Art, we've done our parameters. What's our next line in our local memory? We've done our parameters, our arguments. What's the next bit in our local memory?
>> Art: We're sending our output to our array.
>> Will Sentance: Spot on, I'm gonna put again our sort of working area over here.

[00:07:47] So sort of not, I have no idea but there we go. Output exactly is an empty array. There we go output, just so we can work with this slightly easier. Okay, big moment, Andrea, we're gonna hit the body of that for loop, we've done outputs and MD array, we're gonna hit the body of that for loop.

[00:08:08] First time we do, what's the first, I guess, variable of whose value we're interested in? JavaScript kind of works inwards, outwards. So what's the first one we're interested in?
>> Andrea: I guess the i to zero.
>> Will Sentance: I is zero, spot on. So i is zero, so array index zero is what, Andrea?

[00:08:29]
>> Andrea: Sub zero one.
>> Will Sentance: It's spot on Andrea, really nice. So array sub zero is?
>> Andrea: 1.
>> Will Sentance: The value 1.
>> Andrea: Yes.
>> Will Sentance: My goodness, exactly. There it is, the value 1. And now that 1, that means this little portion here, zero, one, what's this instruction's placeholder now being filled in with, Andrea?

[00:08:54]
>> Andrea: MultiplyBy2.
>> Will Sentance: The function, multiplyBy2. So actually, what has this little portion here become, but multiplyBy2 (1). That's saying go run the multiplyBy2 function. And when we start running a function, Andrea, what do we do? We declare a brand new? Everyone together. Execution context. We forgot to add this one in the first place, well.

[00:09:20] So copyArrayandManipulate. When we started running it, we added it to the call stack so it's already inside, copyArrayandManipulate. So you see JavaScript needs to know these stuff. There we are that's all that calls that and yes we now exactly as Andrea said start calling, instructions which is really just multiplyBy2, but let's refer to as instructions here, instructions, which is really just what, Andrea?

[00:09:47]
>> Andrea: Parameter?
>> Will Sentance: What is instructions really just?
>> Andrea: MultiplyBy2.
>> Will Sentance: MultiplyBy2, and we pass in the what value?
>> Andrea: First value in the array.
>> Will Sentance: Which is?
>> Andrea: 1.
>> Will Sentance: 1, exactly. And if we're calling it, we're creating new execution context. There it is, with a local memory of it's own and Andrea what happens to our call stack?

[00:10:14]
>> Andrea: It gets added to the call stack.
>> Will Sentance: The call to instructions, multiplied by two there the same thing, get's added to the call stack. There it is. Now we know when we finish running it, where we gonna go back to, Andrea?
>> Andrea: It's gonna go back down-

[00:10:29]
>> Will Sentance: CopyArray exactly, that's what stack is such a good way of tracking this, you add something, start running it. When you finish running, you wanna go out one step, or you go down then you take it off and your back out to copyArrayandManipulate. And so as we go, this is a tough bit Clara?

[00:10:43] I'm inside the call to instructions, I've passed which is really multiplyBy2 I've passed in one, what's my first pairing of label and data inside the local memory, given this is really multiplyBy2 Clara?
>> Clara: So inputs.
>> Will Sentance: Input, exactly. And it's assigned what?
>> Clara: You equate it with 1, right?

[00:11:04]
>> Will Sentance: The 1, exactly. Exactly, and then we, cuz we're now really running the functionality of multiplyBy2 everyone. So this portion here 0, 1, and that one got thrown into instructions, which is really multiplyBy2. So that one got thrown in. As input, and there it is, shit, there it is, input 1.

[00:11:26] And so we do 1 which is input by 2 and return that 2 out. Which means now multiplyBy2 with the input of 1 this whole statement. multiplyBy2 has evaluated, has become that output value 2. And what do we do with that 2, Andrea?
>> Andrea: We times it.
>> Will Sentance: What do we do with that evaluated result, Lindsey?

[00:11:52]
>> Lindsey: We push it into the output.
>> Will Sentance: We push it into output, spot on, there it is. And what happens to our execution context, Lindsey?
>> Lindsey: It goes away.
>> Will Sentance: It goes away. We poshly say it gets popped off.
>> Lindsey: It gets popped off.
>> Will Sentance: Yeah, it goes away, but it's a for loop.

[00:12:08] It's a for loop so what happens. Even though we throw away our execution context, it's all gone for the running of instructions that first time. Well, what do you know? It's a for loop, so we're gonna hit the body of the for loop again, and this time, Griffin.

[00:12:29] This time Griffin, what is the value of i?
>> Griffin: 1.
>> Will Sentance: 1 and therefore we get array sub one which is?
>> Griffin: 2.
>> Will Sentance: And we take that 2, and do what with it?
>> Griffin: Pass it into instruction.
>> Will Sentance: Which is really just?
>> Griffin: MultiplyBy2.
>> Will Sentance: Very good, exactly, instructions.

[00:12:43] And we call that instructions, there is the 2 gets parsed into the local memory. Call stack, what happens?
>> Griffin: It gets push out of there.
>> Will Sentance: Gets pushed on again. A new execution context. Inside, what's the first data pairing?
>> Griffin: Input and 2.
>> Will Sentance: Yeah, input and 2, and we to 2 by 2, which becomes 4.

[00:13:08] Out it returns, return out 4. That means this little portion here, multiplyBy2, the input of 2 is evaluated to 4, and that 4 gets pushed where?
>> Griffin: To outputs?
>> Will Sentance: Perfect, there it is, and then it gets created again we get 6. Our output is now 2,4,6 and we hit the key line, Mohamed which is?

[00:13:34] What's the final line of the function?
>> Griffin: Return output.
>> Will Sentance: Return, see I have an amazing habit of always calling on the same people for the same thing. So what will it actually return out, Mohamed?
>> Mohammed: 2, 4, 6.
>> Will Sentance: Yeah, the value associated with output, right? JavaScript never sees a word and leaves it.

[00:13:51] It evaluates everything down to its lowest possible part. So it sees the word output, it goes hold on, what is that? It's 2, 4, 6, returns that. Output out, 2,4,6, and where do we say Mohamed we're gonna assign it?
>> Mohammed: To the label result.
>> Will Sentance: To the label result, and there it is.

[00:14:15] So this is hard, this is supposedly profound areas of JavaScript. We'll see in a moment we have already encountered all the material of high order functions list with cool backs. But I wanna have thumps in a moment on what we saw here. But look we achieved with generalized copyArrayandManipulate, and then a specific little baby function that we passed in, for the specifics, of what we're gonna do to each element.

[00:14:43] We achieved exactly the same as we did with copyArrayAndMultiplyBy2. Where we took in 1, 2, and 3, and came out with 2, 4, and 6. Look at this, went in 1, 2, 3, but we add no specificity of multiplyBy2 in there, instead we left a placeholder. Which we then determined what it would be when we called copyArrayAndManipulate and what do we end up with?

[00:15:06] But 2, 4, 6, the very same result. We could have parsed in not multiplyBy2 but add 3 or divide by 2. We ended up with the same results. We parametrized, we generalized our function.