This content originally appeared on DEV Community and was authored by Fadhil Radhian
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 a value.
So what it is 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 be 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 !
Reach me at :
https://www.linkedin.com/in/fadhil-radhian/
Github : fadhilradh
Screenshots credit:
Twitter: @willsentance
Course: Frontend Masters - Javascript the Hard Parts v2
This content originally appeared on DEV Community and was authored by Fadhil Radhian
Fadhil Radhian | Sciencx (2021-11-12T23:47:50+00:00) Javascript Superpower – Higher Order Function. Retrieved from https://www.scien.cx/2021/11/12/javascript-superpower-higher-order-function/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.