JavaScript: The Hard Parts, v2

Higher Order Functions Example

Will Sentance

Will Sentance

JavaScript: The Hard Parts, v2

Check out a free preview of the full JavaScript: The Hard Parts, v2 course

The "Higher Order Functions Example" Lesson is part of the full, JavaScript: The Hard Parts, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Will diagrams a proposed solution that generalizes a function to accept an argument and a function as parameters.


Transcript from the "Higher Order Functions Example" Lesson

>> Will Sentance: People, let's walk through this but I can already feel that this may be making our code profoundly more reusable, have a think, whatever else I could pass to this besides multiplyBy2? All right, here we go, people. Line 1, what are we doing, my friend, here?
>> Speaker 2: We're defining the function, copyArrayAndManipulate?

>> Will Sentance: That's absolutely correct, let's just get that beautiful so definition, fantastic copyArray and manipulate, there it is saved in global memory. Note now, takes in two inputs when it gets run, both an array and some actual code, isn't that crazy? All right say, next line Matt, what are we saving next?

>> Speaker 2: We're gonna define in the global memory, the multiplyBy2 function.
>> Will Sentance: Beautiful, there it is, multplyBy2, little baby function, that is when run I'm gonna take hopefully a number and return out that number by 2, that's what we hope it does. Next line over to Ethan left hand side.

>> Ethan: We're defining the const result, which then calling the array copyArrayAndManipulate.
>> Will Sentance: Yeah, so we've got to go and call copyArrayManipulate. Hopefully we've got enough room here, because I wrote this in, dear. CopyArrayManipulate with the first input being the array 1,2,3, and Ethan, how do you describe the second thing we're passing in there?

>> Ethan: It is the function multiplyBy2.
>> Will Sentance: Yeah, it's the entire function definitionnpeople, the whole thing is being grabbed and inserted in. So we're gonna see that wherever you see the word instruction it's gonna be fully replaced by multiplyBy2. Okay, so everybody, hold on, hold on. I know we're doing enough of my favorite chant, here's a call Stack, we're gonna add copyArrayAndManipulate, there it is to it and we're gonna create.

I'm gonna be very happy, we're gonna create a brand new.
>> Ethan: Execution context.
>> Will Sentance: Beautiful, that's a radiant sound, abundant energy and sound from your. Alright, let’s create it, there it is. To run copyArrayAndManipulate, I had very hard time with vertical lines and into it, we go, where?

Our thread's gonna weave in, and start running copyArrayAndManipulate, what did I forget, Dan?
>> Ethan: Global at the bottom.
>> Will Sentance: Global at the bottom, yep, exactly. There it is, and into it we go, and in our Local Memory, look at this lovely new pen. In our local memory, what is the first thing in there?

Adam at the back, what is the first thing we're gonna stick in that copyArrayAndManipulate, execution context, local memory?
>> Adam: The parameter of array.
>> Will Sentance: Yeah, Fab with what assigned argument?
>> Adam: The array 1,2,3.
>> Will Sentance: Beautiful and now the interesting bit, what's that next parameter?
>> Adam: Instructions?
>> Will Sentance: Yes, assign what?

>> Adam: The entire function, multiplyBy2.
>> Will Sentance: Very nicely put, but what could it be called, if we don't know? Nobody knows, exactly. MultiplyBy2, the entire function definition, there it is stored under the labor instructions. If I now want to run that multiplyBy2 function inside of this execution context, Kayla what labor will I use for the multiplyBy2 function?

>> Kayla: Instructions
>> Will Sentance: Instructions, she spawn. So I would have to write in order to execute multiplyBy2 inside here, I will write what, Kayla?
>> Kayla: Instructions and then primes.
>> Will Sentance: Fantastic, If I wanna provide presumably an argument because it's expecting an input, I put like you know, be like instruction.

I don't wanna write it because we got to do a full pause and wipe down but I'm gonna do it instructions, primes is gonna run multiplyBy2, input 3 is gonna run it like that, that's really running, Kayla again.
>> Kayla: MultiplyBy-
>> Will Sentance: MultiplyBy2 with the input of three, exactly.

I made a horrible mistake here. So if you see instructions anywhere inside the code of copyArrayManipulate, know that it's really running everybody together what? MultiplyBy2. Excellent us execution got it for no, MultiplyBy2, excellent. Okay, now let's get into the body to over to Mark, Mark what's the first thing in the body the function say to do?

>> Mark: Find output. Yeah, and then we'll complete?
>> Will Sentance: Empty array. Empty array, well yeah, exactly. Okay, now we're gonna start working through this function and I know we're taking this, maybe for some people and a patient pace, but we wanna really make sure everything covered here, at a measured pace in the middle to a more and more hard stuff as we go.

All right, there it is output empty array, array 1,2,3. Let's get into that four loop. All right, we entered the body of the four loop, the first time we entered it, Dan, I's value is what? Yeah, 0, array position 0 is
>> Dan: 1.
>> Will Sentance: 1, we take the 1, and we're going to, what it's gonna say, is it instructions?

Dan, is gonna be what?
>> Dan: MultipliedBy2.
>> Will Sentance: MultiplyBy2, so we're gonna have multiplyBy2 input, array position 0 primes around number multipliedBy2, which was previously. Kayla remind us again, previously?
>> Kayla: Instructions.
>> Will Sentance: Instruction, right? Input of the array position 0 which is 1, into it we've got, that looks to me much like we're gonna create a brand new what, everybody.

>> Speaker 2: Execution context.
>> Will Sentance: Execution context, exactly. It's our execution context to run and that 1 is gonna be thrown into, the 1 is gonna be thrown into instructions which is thrown into multiplyBy2 as the input, well let's see. Let's create that execution context, let's put it on the call Stack,

>> Will Sentance: There it is multiplyBy2 input of 1 on the calls that, into it we go folk and in the local memory, we have our 1. Let's have Jeff, Jeff what is our parameter name for that label for that value 1?
>> Jeff: Input.
>> Will Sentance: He is right, it's the input parameter and there it is.

We then do input by 2, 1 by 2, we get 2, we return it out and look at that folks, instructions which is, multiplyBy2, input of 1 multiply by input of 1 is literally going to evaluate. So is gonna become the output of 2, there it is an outcomes of 2 and Kayla what do we do with that 2?

>> Kayla: We've pushed it into the output array.
>> Will Sentance: We push it into the output array. There is people, into the output array it goes and there's execution causes what happens with it, Kayla?
>> Kayla: It goes away.
>> Will Sentance: We pop it off the call Stack, it goes away, also lead you besides the returned out value.

Perfect we get it off the call Stack, more energetic erasing, there is this is not as kinda roughing not bad at all. Now we hit the array, into the four loop we go again and this time, i's value, Brayden, is what?
>> Braydon: 1.
>> Will Sentance: It's 1, array at position 1 is number 2.

We take that 2, Brayden, and we stick it into what, Brayden?
>> Braydon: Instructions.
>> Will Sentance: Which is really?
>> Braydon: multiplyBy2.
>> Will Sentance: Fantastic, it's multiplyBy2. Which will then return out, in goes the 2, what returns out, Braden?
>> Braydon: 4.
>> Will Sentance: 4, exactly, the execution context is created, put it on the call stack.

Okay, we do it-
>> Speaker 2: [LAUGH]
>> Will Sentance: There it is on the call stack, there it is with the 2, so I'll just draw it, outcomes 4 and it's gonna be stored where, Braden?
>> Braydon: Pushed on into the output array
>> Will Sentance: Pushed into the output array. The label for 2 inside multiplyBy2 was what, Braden?

>> Speaker 2: Input.
>> Will Sentance: Input, that was the parameter name, exactly, spot on, I got 6, there is 2, 4, 6, excellent. And now Ethan, we finished our four loop, we're gonna do what finally?
>> Ethan: We're gonna return the value of output.
>> Will Sentance: Beautiful, return the value of output, the array, 2, 4, 6, into results, there it is, the array 2, 4, 6.

Fork wonderful, we've built out a function that, look at this we didn't have to in any way predetermine what we're gonna do to each element of the array. We left it blank with institutions, and just like we had our place order our parameter in our best position. Does it have a placeholder parameter for passing in that array 1,2,3, which could have been 1, 2, 3, 4, 5, 6, could have been 7, 8, 9, could have been whatever.

So 2, we left a placeholder for what we're gonna do to each element of that array, a little blank, and we filled it in with a function that took in one input, we were ready for it, we used it, we took that input, we returned out the result and we pushed it into output.

For we've made our copy of a manipulate function general reusable, we can now edit its code because we left a little blank bit that we can fill in later on, you can't edit functions. But if you leave a little space, a little placeholder for some of their code, you can edit functions, save them once, use it again and again.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now