<The Northcoders Blog />

 

All Posts

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

stairs.jpg

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!

giphy (1).gif

 

 

 

 

 

 

 

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:

Selection_040.png

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!

giphy (3).gif

Lets checkout some examples.

1. Returns A Function

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

Selection_041.png

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

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


Selection_042.png

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

cowboyPizza.gif

 

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.

Selection_043.png

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.

Selection_044.png

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!

drakePokemon.gif


An important note about passing or returning functions

Let's think about a recipe for a moment. A function can be a little like a recipe in that it is a set of instructions (the function) and it produces a delicious...cupcake (the result).

Let's look at this for a moment:

Selection_045.png

In this case, makeCupcake is my recipe and cake1 is my cupcake (my result).

If I want to pass a function or return a function, I want to pass the recipe and not the result. That is why we only pass the function without executing it, i.e.

makeCupcake and not makeCupcake().

To see this in action let's create another function called logger which can take an argument and logs it.

Selection_046.png

If I invoke `makeCupcake` as I pass it in we will log the following:

Selection_047.png

Here we can see that we are actually passing in the result of the function call and not the function itself. To pass a function in, we only pass the function reference

Selection_048.png

Now we can see it's the actual function that is being passed!

Wrapping Up

So hopefully this has cleared up some confusion or it's made HOFs a little clearer boosting your JavaScript skills. Like I said, this is part of a small series exploring some of the Array methods. Next up is Array.foreach(func) which if you hadn't realised is also a HOF!

I challenge you to have a look at it and figure out why it's a HOF and also to try creating little functions that either take functions as arguments or return functions as arguments.

Stay tuned fellow grasshoppers!

P.s. You might notice that I was feeling slightly nostalgic for my childhood today.

Daryl Carr
Daryl is a Northcoders graduate and enduring hero, having mentored scores of students and helped to kickstart many, many successful Software Development careers.

Related Posts

7 Ways to Build Your Personal Brand Online & In Person

It probably goes without saying that the world of tech is a fast-moving and highly-connected one. The rap...
Josh Gray 13 November 2018

Meet Our Team | Ruth

Digital Marketing Executive Lucy sits down with our Head of Growth, Ruth, to find out more about her jour...
Lucy Adams 06 November 2018

Refactoring Katas

Katas, or miniature self-contained coding challenges, are an essential part of our curriculum at Northcod...
Jonny Rathbone 04 November 2018