Higher Order Function in JS
Tags: javascript, webdev, functional, beginners
Published: 2020-11-12 08:58:03

######<center>” ‘ THIS, SAID LAYELAH, ‘ IS THE WAY WE HAVE OF ESCAPING. ‘ “</center>
![higher-order-functions](https://howtoreadcode.com/wp-content/uploads/2020/11/higher-order-function-in-javascript.jpg)
```javascript
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*).
<br>

Take a deep breath …

```javascript
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:

```javascript
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**?


```javascript
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!
<br>
![map-in-javascript](https://howtoreadcode.com/wp-content/uploads/2020/11/map-in-javascript.jpeg)
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:

<br>
```javascript
const array1 = [2,4,6,8,10];
const array2 = [];
for (number of array1) array2.push(`Number: ${number}`);
```

***
<br>
#3. Reinventing the wheel

For a proficient understanding of them **let’s rewrite**, step-by-step, our personal *map* function:

```javascript
const iMap = function(array, callback) {
    const newArray = [];
    for (number of array) {
        newArray.push(callback(number));
    }
    return newArray;
}
```
<br>

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**!)
<br><br>
It just so happens that higher-order **functions are related to functional programming paradigm**. But this is a whole other thing …

<br>
***

*Further reading*:

* [Callback - Wiki](https://en.wikipedia.org/wiki/Callback_(computer_programming))
* [Higher-order Function- Wiki](https://en.wikipedia.org/wiki/Higher-order_function)
* [In Eloquent Javascript](https://eloquentjavascript.net/05_higher_order.html)
* [Map - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
* [Author post - HowToReadCode](https://howtoreadcode.com/higher-order-functions-in-javascript/)

</br>

***

######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!](https://howtoreadcode.com/)