Day 8 Higher Order Functions

Today was a doozy! Higher order functions are serious business. They are extremely powerful, and can be pretty difficult to wrap your mind around. So what is a higher order function(HOF) you ask? A HOF is a function that either takes another function as an argument or returns a function inside it’s body. Here’s a couple of examples.

  1. function toBeUsedLater(someFunction) {
     someFunction(“Hello World”);
    };

The function above has been given the name toBeUsedLater. Since we gave it a name it is referred to as a named function. We have also outlined in the parenthesis that we will give toBeUsedLater another function as an argument later on when we invoke that function. The name someFunction is just a placeholder for the function that we will pass in later. In the body of our toBeUsedLater function we’re going to return whatever function gets passed in at the time of invocation or when we execute the function toBeUsedLater. Next we need to define the function that we’re going to pass in to toBeUsedLater.

2. function printString(string) {
 console.log(string)
};

Now we have defined another function printString that can be passed into toBeUsedLater. Notice that printString accepts a string as an argument. String is a placeholder that will be replaced with “Hello World” when we invoke toBeUsedLater. Our printString function will simply print that string to the console. Now for the fun part!

3. toBeUsedLater(printString);

Above we are invoking(executing) the toBeUsedLater function. Remember we promised it we would give it another function later on as an argument which we have now done. We’ve passed in our printString function. Also remember that inside of our toBeUsedLater function we stated that whichever function we passed in would be invoked with an argument of “Hello World”. Also remember what our function printString actually does. It accepts a string as an argument and prints that string to the console.

  1. function toBeUsedLater(someFunction) {
    someFunction(“Hello World”);
    };

We’ve finally made it full circle so let’s see what happens when we invoke toBeUsedLater with an argument of higherOrder. Do you have any guesses? Let’s take a look at how the javascript interpreter will execute this function. There’s actually a lot to cover here, but I’m going to keep it simple in this example. I’m not going to talk about hoisting and all of that jazz. I just want you to see how the placeholders get swapped when the function is executed.

toBeUsedLater(printString);//Hello World

In the line above I am executing the toBeUsedLater function. Notice that I’m passing in an argument of printString. Remember we promised toBeUsedLater that we would give it a function and now we have. When javascript sees printString it’s going to go look for a variable or function with that name. It’s going to find our printString function. Next it’s going to jump down to the second line in the toBeUsedLater function and see that it is invoking whatever was passed in (printString) with an argument of “Hello World”. Since printString only takes in one argument and prints it out Hello World is printed to the console. Pretty cool!

But wait, how does all of this work again? So at this point in time the toBeUsedLater function would actually look like the example below. Notice that someFunction has been replaced with printString in both the parenthesis as well as the body. Next printString is being invoked with “Hello World” in parenthesis.

function toBeUsedLater(printString) {

printString(“Hello World”);

}

At the same time we can visualize what out printString function would look like at this point in time. Notice that we have replaced string which was a placeholder with “Hello World”. Our printString function now knows what to print out to the console.

function printString(“Hello World”) {

console.log(“Hello World”);

}

It’s important to keep in mind that while this example may seem complicated the result is really no different than if we had invoked printString with an argument of “Hello World” all on it’s own. We simply decided to invoke it from another function. And that’s basically it. That’s a pretty simple example of a higher order function.

It gets a lot more complicated than this, but this is the basic idea behind higher order functions. It was a pretty grueling day for all of us trying to get our heads around it so don’t feel bad if it seems confusing. There are lots of great resources online that will go into more detail.

Today was really fun! I’m starting to settle into the reality of being challenged every day. It’s a lot to digest at times, but it’s so rewarding at the same time. Tomorrow I think we’re going to cover some of the higher order functions that are built into javascript so that should be fun. More on that later!

8 down 92 to go!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.