Higher Order Functions

[00:00:00]
>> Will Sentance: Todd, take it away, Todd. Line one, what are we doing, my friend, here?
>> Speaker 2: We're defining the function, copy, array and divide by two.
>> Will Sentance: Perfect, by the way, I did the worst thing there. I did this right as you're talking, Todd. I know how upset Mark will be by that.

[00:00:14]
Define the function, copy array. People, we're going to through it all over again, because again, I want you to feel in your guts how frustrating it is to do this all over again. This is code you're writing from scratch, again. And you're feeling my pain of it. Ain't no copy and pasting here.

[00:00:33]
In fact, it's a clean whiteboard process. That's how hard it is to rewrite code. Surely, there must be a better way, right? Surely, right now, no. Right now, no, these are doing different things. The functions codes are different. And so we need to do it all over again.

[00:00:49]
I means only one character different, but it's different. All right, Todd, next line.
>> Speaker 2: It'll define the constant myarray. Sign the value. So in the array of 1, 2 and 3.
>> Will Sentance: Beautiful. Thank you, Todd. Next line, Todd.
>> Speaker 2: Define the constant result and call the function copyArrayAndDivideBy2, passing in the argument of 1, 2, and 3.

[00:01:10]
>> Will Sentance: Very nice, exactly, call the function copyArray. Divide by 2 to be really bad if he doesn't exactly same question again, go right divided by 2 parts in my array one two three. Very nice by the way, do we notice how nice that complete technical communication was? I knew exactly what was happening.

[00:01:30]
Thank you, Todd. Okay, we go into the execution context. Exactly, right. Let's put it on there you go put it on the call stack. People, this is for this is for our long term audience. They love it when we complete. CompleteArrayAndDivideBy2, it's being executed Global's always there Don't worry, Dan.

[00:01:56]
Also is there, there it is. Excellent. Let's go into the execution context. And in local memory is what first Kayla?
>> Speaker 3: We define the parameter array with the value passed in of 123.
>> Will Sentance: Yeah, very nice. Which is known as our?
>> Speaker 3: A parameter.
>> Will Sentance: So a parameter is assigned our, everyone together?

[00:02:23]
>> Speaker 2: Argument.
>> Will Sentance: Argument very nice, excellent. And Kayla thanks very much on to the next line, Kayla, what's the fist thing we do in that local memory?
>> Speaker 3: We define a constant output to empty array.
>> Will Sentance: Beautiful. Excellent let's get moving on our iteration our looping through our doing a line of code the body of the for loop multiple times.

[00:02:43]
Okay? There is all right, we hit the body of follow. Eyes value is what initially Taylor?
>> Speaker 3: Zero.
>> Will Sentance: Zero we take array position or asub or array index zero and get the value?
>> Speaker 3: One.
>> Will Sentance: One. We divide it by two, we get, Kayla? [LAUGH]
>> Speaker 3: 0.5.

[00:03:05]
>> Will Sentance: 0.5, or as we say in my country, everybody, maybe you've watched this all before, we say nor point five, which is a real thing. Even though it sounds like something from dynamic. Then we hit array sub, or array index, or array position one, which is the number two we divide by two we get one.

[00:03:26]
Okay, we go it there it is 1.5 as well. Good, there it is. Final line of the function, Jeff, says to do what?
>> Speaker 2: Returned output.
>> Will Sentance: Yeah, I'd like it to be more precise in that Jeff. Is it output which to me output represents this whole combination of label or identifier and value but it's not the whole is it?

[00:03:48]
It's just the-
>> Speaker 2: Return the value assigned.
>> Will Sentance: Yeah, exactly. Very nice. Which. Which is the array 0.51, 1.5. Excellent from Jeff. Thank you. And that's stored in global under what constant Jeff.
>> Speaker 2: Result?
>> Will Sentance: Result. Excellent. There we go. We love this function.
>> Speaker 2: Pop off the coaster.

[00:04:13]
>> Will Sentance: Again Peter, you've got to pop it off the call stack, he's spot on. Do we like this function, nah, his function is fine. Do we like that we wrote this function again from scratch? Everybody, who knows [INAUDIBLE] look at that, okay. Do we like this function? Yes, his usual function we use this with the task a lot, but Did I really have to rebuild it from scratch?

[00:04:34]
I guess I did though. Because any change- I can't edit functions, right? Not once I've saved them. Unless- well, before we see, let's for now see another function. Suppose you wanted to take an array this time, create a brand new array, fill it with each element with three added to it.

[00:04:54]
Yeah, exactly. It's funny people literally do groan slightly, which is very rude, Todd. [LAUGH] So, Todd, which principle are we breaking here do you think?
>> Speaker 2: Not dry.
>> Will Sentance: It's not dry, we've got. The principle is don't repeat yourself, we're rewriting. Every time we do this, we're taking an array, creating a new output array iterating through the looping through the input array, doing something to each element, returning out of the full, fully populated output array.

[00:05:26]
We saw that 10 squared, nine squared, eight squared. We in the end made it well. We did some things to make sure we didn't have to rewrite each time we were able to adjust for new data each time. Can anybody tell me what could we do here? Not in terms of like a fancy title word from the talk, but there's no more intuitive sense.

[00:05:46]
What could we do to save ourselves Adam, perhaps? To save ourselves from writing out these functions one after another and what can we do in a sort of intuitive sense here?
>> Speaker 2: We teeing up for a higher order function.
>> Will Sentance: Okay, I said don't mention the title of the talk [LAUGH] Dan,

[00:06:02]
>> Speaker 2: Pass functionality as a parameter.
>> Will Sentance: Beautifully put by Dan. Yes, spot on. We could leave some of our functionality. We could write these function ones, leave it in a blank where the changes is. We don't call this function copy123 and divide it by 2, copy123 and multiply it by 2.

[00:06:23]
We call it copyArray. And then when we run the function, we fill in that parameter, With the specific data to make that function reusable. Folk, same thing with functionality. We can leave a little blank for the specific functionality and only fill it in once we run the function.

[00:06:42]
But can I do it like this, people? Can I just leave, I don't know, can I just insert Plus three, almost as a string like that. Am I allowed to insert that and have that passed in? Am I allowed to pass in little strings of code and execute them in JavaScript?

[00:06:59]
Nah. You can imagine a language that would. It's not saying you can't. It's not inherently, but not in JavaScript. So instead, how do we wrap up functionality? Bundle up functionality, such that it can execute Such as it can be passed through into and be then executed run inside another function, how can we wrap up functionality code to be passed around in JavaScript?

[00:07:23]
Braden, how can we wrap it up, wrap it up with?
>> Speaker 2: In function.
>> Will Sentance: In a function he's spot on and that's exactly what we're gonna do, we could generalize our function, let's call it copyright and do something. Copy array and manipulate and look at this. I've left a little blank instructions and just as array.

[00:07:42]
Wherever you saw array inside of copyright and divide by two, it literally became 123. We're gonna see that instructions is literally gonna be filled in with Multiply by two. Have a look at that. We've got multiply by two function, now I've kept it on one line but it's no different to a normal function.

[00:08:00]
If run takes the number three, will it turn out three by two? We pass in multiply by two, we're gonna walk through this line by line, don't worry people. But it's literally gonna replace the word instructions there inside of copy array manipulate Save declare define the code, it's going to replace it when we run that code is going to fill in instructions with, multiply by two.

[00:08:26]
And then look, multiply by two parenths. And then a reposition zeros can be the number one, multiply by two persons one. That's to say run, multiply by two With the input of 1 and return out 1 by 2 return out 2 and our instructions array I which will become multiply by 2 array position 0.

[00:08:48]
That is to say the number 1 multiple by 2 parentheses 1 will return out 2 and that 2 will be pushed. Into output. We're gonna achieve exactly the same thing we did here where array position zero with a number one, multiply by two, but now we do a reposition zero is a number one, and then we stick it into multiply by two and do one by two inside their return out.

[00:09:17]
The two inputs to output.