Sumit Pandey

Posted on

# Learn about HOF(Higher Order Functions)

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.

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

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.

``````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.

``````      //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
``````
``````      //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.

``````      //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 ]
``````
``````      //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.

``````      //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
``````
``````       //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.