Learn about HOF(Higher Order Functions)

Sumit Pandey — Sun, 19 Apr 2020 19:38:00 +0000

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.
for more info visit the link

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.

DEV Community: Sumit Pandey

Learn about HOF(Higher Order Functions)