Learn about HOF(Higher Order Functions)
Tags: javascript, es6
Published: 2020-04-19 19:38:00

Before starting off with the HOF part lets discuss about functional programming.
You get to hear a lot about FP(Functional Programming) these days.
So, wtf is Functional Programming??
Functional programming is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects.
A "pure" function doesn’t depend on and doesn’t modify the states of variables out of its scope.


![Pure function](https://dev-to-uploads.s3.amazonaws.com/i/279dfz16bkuqussh40fl.png)

Below is the example of impure function because it modifies foo object which is out of its own scope

![Impure function](https://dev-to-uploads.s3.amazonaws.com/i/wj54874gyi3wk7z5ewkw.png)

Pure functions are pillar of functional programming.

I digress a little from my original topic, So let's get back to
it. Higher Order Functions are most important part of functional programming. A higher order function is a function that takes a function as an argument, or returns a function.

In javascript functions are values.
[for more info visit the link](https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function)

```javascript
var foo = function() { 
  console.log("bar")
}
foo()
//expected output: bar
```
So, let me go ahead and make you guys familiar with some higher order functions.
 => filter() method creates a new array with all elements that pass the test 
    implemented by the provided function.

   ```javascript
      //filtering out even numbers
      const arr = [1, 2, 3, 4, 5, 6, 7, 8];
      const filteredArr = [];

      for (let i = 0; i <= arr.length; i++) {
       if (i % 2 == 0) filteredArr.push(i);
      }
      console.log(filteredArr)
      //expected output: [ 2, 4, 6, 8 ]
      //above code is the imperative way to filter out even numbers and store it 
     // in filterdArr
   ``` 
    
   ```javascript
      //filtering values using filter
        const arr = [1, 2, 3, 4, 5, 6, 7, 8];
        const filteredArr = arr.filter((value) => value % 2 === 0);
        console.log(filteredArr)
      //expected output: [ 2, 4, 6, 8 ]
     //declarative way using filter
   ```
 => map() method creates a new array populated with the results of calling a 
    provided function on every element in the calling array.
   ```javascript
      //imperative way 
      const array = [1, 2, 3, 4, 5];
      const newArr = [];

      for (var i = 1; i <= array.length; i++) {
        newArr.push(i * 2);
      }
      console.log(newArr)
      //expected output: [ 2, 4, 6, 8, 10 ]
   ```
   ```javascript
      //declarative way
       const array = [1, 2, 3, 4, 5];
       const newArr = array.map((value) => value * 2);
       console.log(newArr)
      //expected output: [ 2, 4, 6, 8, 10 ]
   ```

 => reduce() method executes a reducer function (that you provide) on each 
    element of the array, resulting in a single output value.
   ```javascript
      //imperative way to sum up the values in array
       const arr = [1, 2, 3, 4, 5];
       var total = 0;
       for (var i = 0; i <= arr.length; i++) {
         total += i;
       }
       console.log(total)
      //expected output: 15
   ```
   ```javascript
       //declarative way to sum up the values in array
        const arr = [1, 2, 3, 4, 5];
        var total = arr.reduce((sum, value) => sum + value, 0);
        console.log(total)
       //expected output: 15
   ```
The main advantage of functional programming is that you will be able to write code with less bugs in less time.