I have heard a lot in the programming realm that JavaScript is one of the most confusing languages ever. But personally, for me, I have enjoyed programming in JavaScript, it is my first...Ummm, no actually the second language that I have learned, and until now the language has been quite kind to me.
I recently came across Akshay Saini's video on Higher-Order Functions and Functional Programming. It refreshed the concept for me that I had learned a while ago. It nudged me to write a blog about my learning and understanding of the topic. So here is my attempt at explaining the concept.
What are Higher Order Functions? A function that is operating on other functions either by taking them as argument or by returning them, is known as a higher-order function.
Why do we need Higher-Order Functions? There is famous saying in programming - DRY - Don't Repeat Yourself. Higher Order Functions help us to adhere to that rule.
How? Because of higher-order functions, we can take other functions as the argument of a function. So consider a scenario where we write code to compute some calculation on an array and return a new array. Later we want some other calculation on the same array and a new array in return so, we will be repeating all the boilerplate code that was looping over the array, thus wasting our time and effort. So to avoid this scenario, Higher-Order Functions help abstract away the boilerplate code, and the logic part could be taken as the mini callback functions in the argument. Let's see this with an example.
Without Higher Order Function
const randomArray = [ 1, 2, 3,4 ];
//Double the values of Array
function doubleTheValue(arr) {
newArray = [];
for (var i=0; i<arr.length ;i=i+1){
newArray.push(2*arr[i]);
}
return newArray
}
//Triple the values of Array
function tripleTheValue(arr) {
newArray = [];
for (var i=0; i<arr.length ;i=i+1){
newArray.push(3*arr[i]);
}
return newArray
}
With Higher Order Function
const randomArray = [ 1, 2, 3,4 ];
const doubleTheValue = (arr) => 2*arr;
const tripleTheValue = (arr) => 3*arr;
function calculation(arr, logic) {
const newArray = [];
for (var i=0; i<arr.length; i=i+1) {
newArray.push(logic(arr[i]));
}
return newArray
}
As you can see with the concept of Higher-Order Functions we are writing more reusable, modular, modern code and also adhering to the DRY concept. In larger code bases this will save us from a lot of unnecessary code repetition. We can always reuse our higher-order function and calculate different things based on the logic of our callback function.
Higher-Order Function also makes way to another realm of an interesting style of programming called Functional Programming. But in the interest of keeping the article short and crisp let me take it in detail for some other time.
Thank You
Resources referred: Namaste JavaScript by Akshay Saini, Eloquent JavaScript - Higher Order Functions.
I would be highly obliged if you could provide your valuable feedback and let me know how I could have explained the concept better.