--- title: Higher Order Functions --- ## Higher Order Functions A Higher Order Function is any function that returns a function when executed, takes a function as one or more of its arguments, or both. If you have used any of the `Array` methods like `map` or `filter`, or passed a callback function to jQuery's `$.get`, you have already worked with Higher Order Functions. ## Map When you use `Array.map`, you provide a function as its only argument, which it applies to every element contained in the array. ```javascript const arr = [ 1, 2, 3 ]; const arrDoubled = arr.map(function(num) { return num * 2; }); console.log(arrDoubled); // [ 2, 4, 6 ] ``` Higher order functions can also return a function. For example, you can make a function called `multiplyBy` that takes a number and returns a function that multiplies another number you provide by the first number provided. You can use this approach to create a `multiplyByTwo` function to pass to `Array.map`. This will give you the same result you saw above. ```javascript function multiplyBy(num1) { return function(num2) { return num1 * num2; } } const multiplyByTwo = multiplyBy(2); const arr = [ 1, 2, 3 ]; const arrDoubled = arr.map(multiplyByTwo); console.log(arrDoubled); // [ 2, 4, 6 ] ``` ## Filter One amazing example of higher order function is the filter function. * Filter: It is the function on the array which loops through the array and filter out the value we are looking for. Below example: ```javascript const animals = [ {name: 'Fluffykins', species: 'rabbit'}, {name:'Caro', species: 'dog'}, {name: 'Hamilton', species: 'dog'}, {name: 'Harold', species: 'fish'}, {name: 'Ursula', species: 'cat'} ] ``` This example illustrates filtering using imperative programming to simply return a list of species belonging to **dog**. ```javascript let dogs = []; for(let i = 0; i < animals.length; i++) { if(animals[i].species === 'dog') dogs.push(animals[i]) } ``` Now if we wanted to do the same but this time using filter. ```javascript const dogs = animals.filter(function(animal) { return animal.species === 'dog'; }) ``` So what is happening here is that filter function takes in an argument, which is another function. A function passed as an argument inside another function is called a callback function. Here `function animal()` is an callback function. As you can see, the higher-order function has lot less code as compared to the traditional for-loop code. It's not because the syntax is shorter, but because there is lot less logic involved. The only logic used in the filter function in the above example is `return animal.species === 'dog'` which determines which animal goes into the array. Another reason there is a lot less code, is because this code below ```javascript for(let i = 0; i < animals.length; i++) { if(animal[i].species === 'dog') { dogs.push(animals[i]) } } ``` is already handled inside the filter function for us so we dont have to worry about it. The callback function and the filter function just **compose** in one another. We can decouple the callback function from the filter function like this... ```javascript const isDog = function(animal) { return animal.species === 'dog' } const dogs = animals.filter(isDog) ``` ## Reduce The Reduce function takes an array and "reduces" to a single variable. An example most people use is summing the numbers in an array: ```javascript const nums = [1,2,3]; const sum = nums.reduce((acc,curr)=> acc+curr); console.log(sum) // 6 ``` The Reduce function usually takes two parameters, an accumulator and the current value, you can also specify a starting value: ```javascript nums.reduce((acc,curr)=> acc+curr, 1); //returns 7 ``` Reduce is a very powerful function, a more advanced way to use it would be to take an array and return an object counting the occurances of each element: ```javascript [1,2,3,4,true,2].reduce((a,b)=>{ a[b] = a[b] || 0; a[b]++; return a },{}) //returns { '1': 1, '2': 2, '3': 1, '4': 1, true: 1 } ``` There are limitations to this for example, the int 3 and the string '3' will be counted as the same item due to JavaScripts typing system, but this is still a very useful function. #### More Information See the guide on [Closures](https://guide.freecodecamp.org/javascript/closures) for more information on how `multiplyByTwo` keeps a reference to `num1` in the example above. - [More info about Closures](https://eloquentjavascript.net/05_higher_order.html) - [Eloquent Javascript](https://eloquentjavascript.net/05_higher_order.html) - [Medium Article](https://medium.freecodecamp.org/higher-order-functions-in-javascript-d9101f9cf528)