” ‘ THIS, SAID LAYELAH, ‘ IS THE WAY WE HAVE OF ESCAPING. ‘ “
const powerOf = (exponent) => {
return num => num ** exponent;
}1. If you can read this, then you’re able to understand the rest
Higher-order functions are functions that operate on other functions, for example, one of these can take functions as arguments or return another function. We can have three different types of these:
- Functions inside functions
- Functions that change functions
- Function that manage the control flow
Lucky for me, we have here an inner function example inside a mainly function (give a reading to closure). In this example, powerOf requires an ‘exponent‘ parameter and returns an anonymous function. The latter, accept a ‘num‘ parameter which will be multiplied by itself for ‘exponent‘ times (the ** operator was introduced by ECMAScript7).
Take a deep breath …
powerOf(3)(4); // powerOf(exponent)(num)
> 64 // 3 times 4 multiplied by itself = 64, wasn't it?As a matter of fact, we can try to find a different approach:
const powerOfThree = powerOf(3);
powerOfThree(4)
> 64 // Holy abstraction!Hey, check that out! Let’s read it and find out what’s in there. First of all we have assigned the function ‘powerOf(3)‘ to ‘powerOfThree‘ constant. Makes sense? But beware… powerOfThree need another argument, namely ‘num‘. So let’s give him num 4 and … ta-dah: it returns 64!
2. Becouse when the going gets tough, the tough get going
Higher-order functions are important to understand the three main built-in array methods, such as:
- Map
- Filter
- Reduce
Map is very simple to understand. It takes a callback, then, it returns an operation with the same. The operation returns a new array, because map does not mutate the array on which it is called. How does it works?
const array1 = [2,4,6,8,10];
const array2 = array1.map(num => `Number: ${num}`);Well, first of all, the callback is called for every element of the array, then, each element is added to ‘array2‘. It is very simple to read this code!
Sometimes we don’t need to use map:
- When you don’t use the array that map returns
- When you are not returning any value from the callback
Well, in these cases, you can use the good ol’ For-of:
const array1 = [2,4,6,8,10];
const array2 = [];
for (number of array1) array2.push(`Number: ${number}`);3. Reinventing the wheel
For a proficient understanding of them let’s rewrite, step-by-step, our personal map function:
const iMap = function(array, callback) {
const newArray = [];
for (number of array) {
newArray.push(callback(number));
}
return newArray;
}Does it make sense? Now try to read it!
(If you feel so lost, don’t worry about that. Logical processes are extremely hard to understand. So give yourself time!)
It just so happens that higher-order functions are related to functional programming paradigm. But this is a whole other thing…
Further reading
https://en.wikipedia.org/wiki/Callback_(computer_programming)
https://en.wikipedia.org/wiki/Higher-order_function
https://eloquentjavascript.net/05_higher_order.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map