Yes I know, Higher Order Function seems a little bit daunting at first.
Higher order? What does order even mean ?
Don't worry, I will explain it to you with human language :)
Actually its concept is very simple.
It is just a function that takes a parameter (like normal function!) but its parameter is not usual values.
So what is it then ?
Its parameter is some part of its functionality.
But why ?
Let's step back a little bit.
In your journey as a programmer, you must have seen two functions that do stuff similarly, with only minor difference.
Sometimes you feel like "Hmm.. why I need to write this again? It is very similar to that one".
You feel like they should have been a one reusable function, and that minor difference is passed through the function's parameter.
Just like normal functions with different values as their parameter.
But how we do it ?
We do it with, yes, Higher Order Function
Basically, Higher Order function is a reusable function that takes a part of its functionality from its parameter.
Its purpose is one : Generalizing our function. To make it reusable in many places in our code with similar but slightly different use case.
Cool, isn't it ?
It is in accordance to key programming principle :
Don't Repeat Yourself (DRY).
And if you're like me, I like to write something that can be used in different places.
It feels like I invent something, and it feels satisfying.
Now let's start with a little bit of example.
Let's suppose we have a function that takes and array and return array with elements divided by 2 :
(Yes, I know this example use that 'cruel' for loop. It is on purpose, to make a function that somewhat long but simple to understand)
Now, in other place in our code, we have that 'similar but little different' function with the previous one :
Then, we have 'that' type of function, again, somewhere else in our code :
Now it feels repetitive and our code get unnecessarily big. 😞
I know how you feel.
And yes, we break DRY principle.
So, how we simplify these functions then ?
Simple : by passing that different part in the function, as parameter.
But can we pass string like " + 3 " and put it in our function ?
No, we can't do that in Javascript.
Then, how we do it ?
We make it a function and then, pass it as parameter.
Now, this is our "Use It Anywhere Function" :
We gave it a general name too, copyArrayAndManipulate()
We just have to call it with different parameter each time we need slightly different functionality (see the last line).
Now we have a reusable function, and our code get smaller and abstracted.
That's it folks!
Hopefully, now you understand Higher Order Function in Javascript. Congrats! 🎉
See you next time !
Bonus : if you are familiar with map, filter, and reduce functions, now you know how they work under the hood. Yes, they are basically Higher Order Functions that takes your array and your function, and then return a copy of your modified array. Basically the same as copyArrayAndManipulate that we use earlier!
For example = myArray.map(function(element) { return element * 2 })
Arrow version = myArray.map((element) => element * 2 )
Reach me at :
https://www.linkedin.com/in/fadhil-radhian/
Github : fadhilradh
Screenshots credit:
Twitter: @willsentance
Top comments (2)
Nice explanation, good work Fadhil. At first glance, "Higher Order Function" sounds really intimidating... to me, at least. Once I got past that factor, it wasn't too bad to wrap my head around this stuff, and I've started to notice it more and more in tools and libraries I use.
Thanks!
It was the case for me a long time too.
Most familiar use cases are map, filter and reduce. They are basically similar to copyArrayandManipulate in this post.
They are Higher Order Functions that takes array and arrow function as parameter, then return the result