JavaScript: The Hard Parts Reviewing Generalizing Function

[00:00:00]
>> Will: Hold on. How much changed here from the last time we wrote this function, copy array, and multiply each element by two? This time, copy and divide by two. How much changed here? We took in at the array, too in an array, sorry, one, two, three, could be anything.

[00:00:16] Create an output array. Looped through the input array. [LAUGH] Took each element, did something to it, and then what pushed the result, multiplied, divided, whatever element to output, and then returned out that full output array. A lot of this functionality was the same. But wait, we have a new function, copy array and add three.

[00:00:45] Who thinks that we're gonna go through this one the whole way through as well? No we're not, because it's boring, come on, Jesus. What principle are we breaking at this point? What principle are we breaking everyone?
>> Speaker 2: Drive.
>> Will: Drive, we're repeating ourselves constantly, all this stuff's the same, everything's the same.

[00:01:00] Which is the only bit that's actually changed? Lindsey, what's the only bit here in each function that's actually changed?
>> Speaker 2: It's what you're doing to the array, or to the-
>> Will: Not to the array, to-
>> Speaker 2: To the element.
>> Will: Individual element of the array each time you loop.

[00:01:14] That's the only thing that's changed here, right, divide by two, multiply by two, add three. What could we do here? We saw with our earlier function. What can we learn from how we handled 10 squared, 9 squared, 100 squared, 200 squared? We handled that in a certain way so that we didn't have to rewrite a function.

[00:01:36] We're creating a brand new function for 10 squared, a brand new function for 9 squared, a brand new function for 100 squared. What could we learn from that, for how we could avoid creating a brand new function? We want the functionality to take an array and add three to each element.

[00:01:51] Take an array, divide each element by two and put in the array. We want that functionality but we don't wanna rewrite all the repetitive functionality. What could we do, Andrea?
>> Speaker 2: We can make a generic call back.
>> Will: We can make a generic callback. I always get confused when fancy words.

[00:02:09] What would we intuitively do? What can we actually-
>> Speaker 2: Add another parameter.
>> Will: Very nice, Andrea. Can we hear that really loudly so all of our audience can celebrate? Andrea, from Minneapolis.
>> Speaker 2: Add a parameter.
>> Will: Very nice, Andrea. Indeed we add a parameter, leave a place holder in our definition.

[00:02:30] We've already got a place holder for our data. But we're gonna pass not just in 1, 2, 3, but 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, or I don't know, 100, 200, 300. Our function is general to any data. What if we also made it general to any specific functionality bait that's gonna be applied to any element?

[00:02:51] Now you might think we can leave a place holder and just pass in directly, add three, or pass in directly, multiply by two. We can't pass functionality operators around like that. So how do we pass functionality around? How do we wrap up functionality in JavaScript, Clara?
>> Speaker 2: In a function.

[00:03:06]
>> Will: In functions, exactly. The quick and dry, what can we do? We could generalize our functions so that we pass in the specific instruction, only, the specific instruction only when we run, copy, array, and manipulate. So right now, before we said, take the element when I is zero take array zero number one and add three to it.

[00:03:34] Now we say, when array I, when I is zero, array zero is one, take that one and throw it in as the input to leave a place holder here instructions, in to which we can add our multiply by two functionality only when we run copy, array, and manipulate.

[00:03:56] And leave a place holder in our copy, we used to call it copy, array, two or three, whatever. Now just put a general function and leave a placeholder for the specific bit of functionality that we're gonna apply to, the specific bit of functionality we're going to apply to the individual element, and just leave it blank for now.

[00:04:15] Say instructions, we know what it's gonna be. Just like we don't know what array's gonna be until we call the function, it could be a 2, 4, 6, 100, 10, whatever. I mean, just the number one passed into a single element of an array. It could be anything.

[00:04:28] In the same way we leave blank what functionality were gonna apply to that individual element. So when we call copy, array, and manipulate, we fill in an array with one two three and we fill an instructions with this multiply by two functionality. The word instructions inside copy, array, and manipulate, the word instructions will literally be replaced.

[00:04:52] Just like array will literally be replaced with one, two, three. Instructions will literally be replaced with what, Mohammad?
>> Speaker 2: The function you're passing through there.
>> Will: Which is?
>> Speaker 2: The parameter.
>> Will: Which is what?
>> Speaker 2: Multiplied.
>> Will: Which is multiplied. Everything has a value, it's not like the function that we passed in, it is with multiplied by two.

[00:05:10] That is what's filling in the instructions placeholder. This up here is the function definition. It says when you use me, fill in my placeholders with actual values. And when we used it, we do, one, two, three takes an array, it takes on the position of array, and multiply by two fills in the blank of instructions.

[00:05:27] So we'd actually see inside this function when it's called output dot push parens multiplied by two open parens. Well i is zero, array zero is one, one inside the parens. Now, we're just seeing multiply by two, parens one. We know how to do that. That's multiply by two with parens one.

[00:05:46] That's gonna be evaluating to two. Everything gets filled in.