Code

Taking your JavaScript Skills to a Higher (Order) Level - Part 1

Taking your JavaScript Skills to a Higher (Order) Level - Part 1Preview: Taking your JavaScript Skills to a Higher (Order) Level - Part 1

Take your JavaScript knowledge to another level, a 'higher-order'. 

I remember reading about Higher Order Functions, watching videos and still not being 100% sure about what they are and what I should understand about them. Maybe it was a case of trying to run before I could walk but it all seemed so mysterious.

This is the first of a five part series looking at some of the Array methods that are actually Higher Order Functions. So if you’re learning about them for the first time or maybe you're curious to find out what Higher Order Functions are, jump in my car and let’s find out! Speaking of which, from now on I will refer to a Higher Order Function as a HOF as they are pretty wordy!

Taking your JavaScript Skills to a Higher (Order) Level - Part 1Preview: Taking your JavaScript Skills to a Higher (Order) Level - Part 1

No, not that kind of HOF. Get out of the way!

A Quick Recap on Functions

Hopefully your learning journey has taken you to the point where you understand what functions are and how they work. Let’s take a look at a simple function:

Taking your JavaScript Skills to a Higher (Order) Level - Part 1Preview: Taking your JavaScript Skills to a Higher (Order) Level - Part 1

We put the number 3 into our function as an argument and we get 6 out as a result. Nice.

What Are Higher Order Functions?

After the big(ish) build up, you're expecting some crazy explanation and brain warping knowledge. Well, actually HOFs are not as nasty as you think.

A HOF is just a function that does any of the following:

  1. Returns a function
  2. Takes a function as an argument
  3. Does both of the above

That’s it. I know, your mind is blown and your life has changed infinitely for the better!

Taking your JavaScript Skills to a Higher (Order) Level - Part 1Preview: Taking your JavaScript Skills to a Higher (Order) Level - Part 1

Lets checkout some examples.

1. Returns A Function

If a function returns another function, then we have ourselves a HOF!

Taking your JavaScript Skills to a Higher (Order) Level - Part 1Preview: Taking your JavaScript Skills to a Higher (Order) Level - Part 1

Here, `getAFunction` returns another function, qualifying it to be a HOF!

Another way to write `getAFunction` but with exactly the same result is:

Taking your JavaScript Skills to a Higher (Order) Level - Part 1Preview: Taking your JavaScript Skills to a Higher (Order) Level - Part 1

It's the same again that this function returns a function and therefore is a HOF, yeehaa!

Taking your JavaScript Skills to a Higher (Order) Level - Part 1Preview: Taking your JavaScript Skills to a Higher (Order) Level - Part 1

2. Takes A Function As An Argument

Another way that a function can be a HOF is if it takes a function as an argument.

Taking your JavaScript Skills to a Higher (Order) Level - Part 1Preview: Taking your JavaScript Skills to a Higher (Order) Level - Part 1

As we can see from the above, callArgument takes a function as an argument and returns the result of invoking that function. This, my friend, is a HOF.

3. It Does Both

And then there is the mightiest of all HOFs (technically they're all equal but you know what I mean..), the function that not only takes a function as an argument but also returns one.

Taking your JavaScript Skills to a Higher (Order) Level - Part 1Preview: Taking your JavaScript Skills to a Higher (Order) Level - Part 1

Now I am not saying this is a useful example, but it does highlight a function's ability to receive functions as arguments and return functions.

This is a little more complicated but let's break it down.
    1. The `mimic` function takes the `sayHello` function as an argument
    2. It returns a function and stores it in the `sayHelloCopy` variable.
    3. `sayHelloCopy`, when called, calls the `sayHello` function and returns the result.

This creates two functions that will appear to do the same thing, even though `sayHelloCopy` has a (pretty pointless) wrapper around it.

And there we are Pokefans, we've caught them all!

Taking your JavaScript Skills to a Higher (Order) Level - Part 1