JavaScript: The Hard Parts Paramaterizing Functions

[00:00:00]
>> Will Sentance: And we left off before lunch encountering the premise that we could generalize our functions by adding what? How do I generalize my function, Amin?
>> Amin: Parameters?
>> Will Sentance: Parameters, I can parametize my functions, that's where we left off before lunch. To allow us to determine the data we wanna apply the functionality to when we call the function.

[00:00:22] And we said, who knows, we may actually want to determine some of the functionality we want to apply to our data only when we call our function. Here we go, we look at this function here, copy an array and multiply by 2. We're gonna walk through our code here with that same level of precision that we did before.

[00:00:42] And now it's gonna start to get a little bit harder. Not dramatically, but a little bit harder as we execute this code. This, though, is our penultimate function before we reach our higher order functions. So Griffin, what a nice name, by the way.
>> Griffin: Thank you.
>> Will Sentance: Like a Harry Potter house, all right, Griffin, what are we doing in line one, Griffin?

[00:01:11]
>> Griffin: We are saying that copyArray and multiply by 2 is a function. And then we're saving all the text that is that function into our global memory.
>> Will Sentance: Yeah, exactly, that's very intuitive. I'm not gonna cut that, I think, but just know, how would we say that formally?

[00:01:27] What's the formal way of saying we are making a function, creating a function, what's the formal term for that? Two of them begin with d.
>> Griffin: Declare.
>> Will Sentance: Declaring or defining, so we're declaring a function, which means just storing it under that label in memory. We're declaring the funciton, so I don't mind you left your intuitive description.

[00:01:45] We're storing it under the table, copyArrayMultiply, I'm just shortening it slightly just to make it easy to write, copyArrayMultiplyBy2. And just as Griffin said, it's our entire function description definition. The whole, this is what I do, stored in memory under that label. Okay, next line,
>> Will Sentance: Next line, Dave, what's the next line that's gonna be called or gonna be run in this block of code?

[00:02:24]
>> Dave: The declaration of myArray?
>> Will Sentance: Is he right, he is so spot on. What did you do there Dave, different to what you might otherwise have done? Where did you not go for your, where did JavaScript not go for its next line?
>> Dave: The function's never called, so I-

[00:02:39]
>> Will Sentance: The function hadn't been called yet, so we did not go inside the function. Dave, spot on, so tell me again, what's the next line, sorry?
>> Dave: Makes an array called myArray that has those values in it.
>> Will Sentance: Good, and stores those values, perfect, Dave, such precision, those values, 1, 2, 3, okay, good.

[00:02:58] Dave's like, god, I got through that line. All right, Dave, but don't panic, when you do well, you get called on again. Dave, next line, what are you gonna do, left-hand side first. So think very precise, what's the left hand say, Dave?
>> Dave: Let result.
>> Will Sentance: Okay, what's that mean, just means create a label, result.

[00:03:21] Okay, now, what is gonna be assigned to result? Andrea, go ahead, Andrea, what's ultimately gonna be assigned to result?
>> Andrea: The function, copyArrayAndMultiply?
>> Will Sentance: Is it, what's actually gonna be assigned to result?
>> Andrea: Well, undefined.
>> Will Sentance: Undefined, but it's not even ever gonna be copyArrayMultiplyBy2. What do these parens on the end tell us to do?

[00:03:49] They say, take my function description, and go run my function description, passing in this value to fill in my placeholder array inside this function definition. So what's gonna be assigned to result is the output. I can't do this with a cursor, this is too annoying. It's gonna be assigned the output of calling, copyArrayAndMultiplyBy2 with the input of my array, the output of it.

[00:04:21] That whole block of code from here to here, that whole block, that whole expression, that whole statement, copyArrayAndMultiplyBy2 open parens, myArray, close parens. That's gonna literally become to JavaScript the output value, it's gonna evaluate down. Before we move on to the next line in global, that block is gonna become the returned value from running that function.

[00:04:48] And then that, yeah, it's gonna be stored in result. So result does not care about copyArrayAndMultiplyBy2, it does not care about it. It only cares about, what does that statement become once it's been run with those parens? And just remind me, Matt, how do I know I'm running that function there?

[00:05:10]
>> Matt: I don't know.
>> Will Sentance: What symbols tell me I'm running a function, Amin?
>> Amin: Parentheses.
>> Will Sentance: Parentheses, exactly, parens say, go run me, go look up my description in memory and do me, do my code, run my code. Okay, all right, so let's go run that code. In the global execution context, we're still in the global execution context right now, but now we hit this all-important line.

[00:05:39] Result is gonna be the return, the output, the returned value, of calling this copyArrayMultiplyBy2 function with what input, Art?
>> Will Sentance: What's the input?
>> Group: The array?
>> Will Sentance: Yeah, you can't see it from that angle. Forgive Art, he can't quite see from that angle. What's being passed to copyArrayAndMultiplyBy2?

[00:06:09]
>> Art: myArray.
>> Will Sentance: myArray, which is what value?
>> Art: 1, 2, 3.
>> Will Sentance: 1, 2, 3, so we'll pass in 1, 2, 3, there it is, and everyone together. We're calling a function, we're executing a function, we create a brand new?
>> Group: Execution context.
>> Will Sentance: Again, a brand new?

[00:06:30]
>> Group: Execution context [LAUGH].
>> Will Sentance: Good, there we go, a brand new execution context, here it is. And what's in an execution context, I mean, what goes into an execution context?
>> Amin: Declarations for that function
>> Will Sentance: Okay, so all of our stuff that gets announced, any variables, any functions.

[00:06:57] They're all gonna be stored by name in this execution context in the local memory, that's this side here. And we're gonna go through the code line by line in the function on the left hand side. We're not gonna write it out line by line, some of it, we might write out where it's useful.

[00:07:12] We're gonna go through the code line by line on the left hand side. Okay, Art, first thing inside copyArrayAndMultiplyBy2. What's the first thing we're gonna put in our local memory?
>> Art: The output array?
>> Will Sentance: That's the second thing we're gonna do, isn't it? Output is declared as an empty array.

[00:07:30] What's the first thing we're gonna do, Griffin?
>> Griffin: We're gonna set the parameters.
>> Will Sentance: Does that make sense, Art?
>> Art: Yes.
>> Will Sentance: So give it a shot, what's the first thing we're gonna do?
>> Art: Set that parameters to array.
>> Will Sentance: Array, and array is assigned what?
>> Art: myArray.

[00:07:43]
>> Will Sentance: myArray, which is?
>> Art: 1, 2, 3.
>> Will Sentance: 1, 2, 3, so now throughout the internals of this function, wherever you see the word array, it is no longer hypothetical array, what is it, Art?
>> Art: 1, 2, 3.
>> Will Sentance: 1, 2, 3, it is 1, 2, 3. Wherever you see that word array inside this function call, cuz we're now running this function with an actual value.

[00:08:04] Wherever you see the word array, what's its value, Barb?
>> Barb: 1, 2, 3.
>> Will Sentance: What's its value, Dave?
>> Dave: 1, 2, 3.
>> Will Sentance: Good, our parameter has taken on actual value inside the function body. Okay, but we've created a new execution context, and we've forgotten something. We've called a function, and we're not keeping track of where we are.

[00:08:25] JavaScript, when it finishes running this function, won't know where to go. We've gotta keep track of it, what do we need to use? What special data structure do we need to use to determine where we are, Mohammed?
>> Mohammed: Call stack.
>> Will Sentance: Call stack, brilliant, exactly, a gifted man over here.

[00:08:43] And what's the first thing, when we start running any code in JavaScript, we instantly create what execution context?
>> Group: Global.
>> Will Sentance: The global one, exactly, that's bottom of the call stack, good.
>> Will Sentance: We started running copyArrayMultiplyBy2. Mohammed, what do I do to my call stack at this point?

[00:09:01]
>> Mohammed: You push local copyArrayMultiplyBy2.
>> Will Sentance: Yeah, I push the execution context, or I push the call to copyArrayMultiplyBy2, I push it to the call stack next. Yeah, absolutely, very good, Mohammed. There it is, multiply it by 2, and now JavaScript checks, where am I, what's on the call stack?

[00:09:19] copyArrayMultiplyBy2, I've paused global, I'm not running any more code in global right now. I'm not having two of these running at the same time. This one's on hold until I finish with this one here. I'm not running any code global, I've gotta finish what I'm doing inside of the call to copyArrayMultiplyBy2.

[00:09:33] It's synchronous execution, one thing at a time one after another, pausing any code running out here until I finish in here. So in we go, we've done array is 1, 2, 3, output's empty array, and I'm actually gonna write these on the left-hand side here as well. Not because, I know, it just helps sort of to visualize.

[00:09:54] I'm not making copies, I'm just making, it's like a little working area for us, output's an empty array. Okay, so at this point, Andrew, I hit the body of the for loop, I'm hitting the inside of the for loop, output.put, so forth. I don't to like to talk about for loops in hypotheticals either.

[00:10:12] It's very tempting to go, we loop through the array and take each element. That can get very confusing fast, I like to say the zeroth time, the time when i is zero. The first time we hit the body of the for loop, what is the value of i, zero.

[00:10:29] What is the value of array sub zero, in other words, array at index zero? Well, that is 1, and then now we know that 1, what are we gonna do to it? By 2, now that bit is evaluated, this portion is here is evaluated to the number 2.

[00:10:44] And so forth, we're gonna do it that way. And that's gonna ensure we really know how our for loop is executing. So into the for loop we go, into the for loop we go, Lindsay, what is our value of i in the for loop, Lindsay?
>> Lindsay: One.
>> Will Sentance: Value of i, the first time we said, let i equal zero.

[00:11:03]
>> Lindsay: Zero.
>> Will Sentance: Zero, perfect, what is array 0, array square bracket 0, possibly known as array sub 0, more typically, we say array at index 0. So what is array at index 0 at this point, Lindsay?
>> Lindsay: 1.
>> Will Sentance: 1, spot on, Lindsay, very nice, 1, so index 0 is 1.

[00:11:27] And what do we do with that 1, Lindsay?
>> Lindsay: We multiply it by 2.
>> Will Sentance: Multiply it by 2, and then what do we, that's evaluated to 2. That means this little portion here now, this was 0, this together was 1, this together is 2. What do we do with that 2 now, Lindsay?

[00:11:46]
>> Lindsay: We push it into the output.
>> Will Sentance: Perfect, there it is, good, but as the for loops, we're gonna hit this line again. Which this time, Barb, this time, Barb, what's the value?
>> Barb: 1.
>> Will Sentance: Good, yes, you got ahead of me, very good, it's 1. So we take the array sub 1, which is the value 2, 2 by 2, we get 4, we push that 4 into our output array.

[00:12:10] Into our output array, and than finally with our 3 and we get 6. Now we hit the all-important line, Art, we finished our for loop. Just to be clear why we finished our for loop, we finished it cuz now we've done 2, 4, 6, we've set our i is now of the value 2.

[00:12:26] Let's see if after we've incremented it to 3, should we still run the body of the for loop? Well, 3 is no longer less than the length of the array, that was 3, so we just skip over the body of the for loop and continue on. And so we hit what line, Art?

[00:12:43]
>> Art: Return output.
>> Will Sentance: Return, so talk me through what happens there.
>> Art: So we're moving away from the local into the global.
>> Will Sentance: Yeah, so JavaScript sees return output. Be really clear, which side of this does JavaScript return out, Mohammed, which side is it? The label output or the value associated with it?

[00:13:04]
>> Mohammed: The value associated with it.
>> Will Sentance: Yeah, JavaScript sees return output and it goes, output. Well, I can't just pass out a word, a label, I gotta go figure out what that is. So it goes and looks in memory, let's be really clear. It goes and looks in memory and says, what's output at?

[00:13:19] It's the value, variable, value, variable, value, the value (2, 4, 6), the array (2, 4, 6). Take that out, does that value have a label, Mohammed, out here, globally?
>> Mohammed: It does, it's-
>> Will Sentance: Does it get returned out with a label?
>> Mohammed: No.
>> Will Sentance: No, you're just gonna return out the value.

[00:13:36] Out returns 2, 4, 6, give me one second, return out 2, 4, 6, and it's in the ether now. That means this portion of code here, copyArrayMultiplyBy2 (1, 2, 3) has evaluated to what, Mohammed?
>> Mohammed: 2, 4, 6.
>> Will Sentance: 2, 4, 6, yeah, this little block has literally become, to JavaScript's eyes, the 2, 4, 6.

[00:13:58] And now, it's out in the ether unless we hold onto it somehow. How do we hold onto it, Mohammed?
>> Mohammed: We label it with the result.
>> Will Sentance: Exactly, and how do we assign it? We assign it to the variable, don't we?
>> Mohammed: A label, yeah.
>> Will Sentance: Yeah, exactly, we assign it a label, and that is result, there it is.

[00:14:16] Now in result, we have 2, 4, 6, call stack, what happened to it, Griffin?
>> Griffin: That copyArrayAndMultiplyBy2 got popped off.
>> Will Sentance: Got popped off, popped off, everybody. When we remove it from the stack, it gets popped off.
>> Griffin: Then we went back into the global.
>> Will Sentance: Because?
>> Griffin: Cuz then that would now be the top of the call stack.

[00:14:40]
>> Will Sentance: Spot on, very good job, Griffin, yep, exactly right, yep, and we're back in global. When you create a function called copyArrayAndMultiplyBy2, it takes in an array, in this case, 1, 2, 3, could be anything. When we then call copyArrayMultiplyBy2 with that specific array, 1, 2, 3. We jump inside, we've got a new empty output array.

[00:15:02] We got our 1, 2, 3, and empty output array, brand new. We take each element of the input array, multiply the element by 2, and push to the output array that multiplied element. That new output array, we then return out and store in global memory under the label result.