Javascript Superpower - Higher Order Function
Yes I know, Higher Order Function term 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 uses the old way of 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 'similar but little different' 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.
Here 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.
If you are familiar with map
, filter
, and reduce
, 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 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 )
That's it folks! Hopefully, now you understand Higher Order Function in Javascript. Congrats! ๐
See you next time !
Reach me at : linkedin.com/in/fadhil-radhian
Screenshots credit: Twitter: @willsentance