DEV Community

casiimir
casiimir

Posted on • Originally published at howtoreadcode.com

Higher Order Function in JS

” ‘ THIS, SAID LAYELAH, ‘ IS THE WAY WE HAVE OF ESCAPING. ‘ “

higher-order-functions

const powerOf = (exponent) => {
   return num => num ** exponent;
}
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

As a matter of fact, we can try to find a different approach:

const powerOfThree = powerOf(3);
powerOfThree(4)
> 64              // Holy abstraction!
Enter fullscreen mode Exit fullscreen mode

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}`);
Enter fullscreen mode Exit fullscreen mode

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!


map-in-javascript
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}`);
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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:


post scriptum:

I would like it very much any advice about this article, it's my first post on Dev and my first attempt to write few notes in English. Therefore, I thank you for suggestion about that.
You're Welcome!

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Higher-order functions are functions that execute other functions

This is not correct. A higher order function is a function that takes a function as an argument, or returns a function

Collapse
 
casiimir profile image
casiimir • Edited

True, thanks Jon and sorry for that, my bad mode of expressing. I'll fix it!