Higher Order Functions

muddassir — Fri, 18 Feb 2022 16:58:43 +0000

JavaScript is a functional programming language because, it accepts Higher Order functions.
Before going on to higher order functions. We can learn how we can make our code clean by using higher order functions
rather than normal functions.

Say we want to change all negative numbers in an array to positive and vice versa. Code using normal functions would be
similar like below :

const numbers = [1, 2, 3, 4, 5];

function changeSign(array) {
  for (let index = 0; index < array.length; index++) {
    console.log(array[index] * -1);
  }
}

changeSign(numbers);

If we use Higher order functions like forEach() for the same problem, it would finish in a line.

numbers.forEach((value)=>console.log(value*-1));

Higher Order functions is a function that takes function as an argument or returns a function.

We can see some of the higher order functions in JavaScript:

map()
filter()
reduce()
forEach()
every()

map()

The map() method just maps the given function to every value in an array and it return backs a new array.
map() method can be used when we want to go through every value in the array and alter if a specific condition occurs.
Say we want to square each element in an array, we can do that without worrying about index of the array or even without a for-loop

  let numbers=[1,2,3,4,5];
  const squares=numbers.map(value=>value*value);

filter()

The filter() method creates a new array from the values that satisfies the condition provided inside the function.
It filters the required item from the array and creates a new array from it.
filter() method comes in handy when you want to eliminate un-necessary elements from the array.
Let's say if we want to return even elements from the array.

  let numbers=[2,3,17,18,4,6];
  const even=numbers.filter(value=>value%2==0); //returns 2,18,4,6

reduce()

The reduce() method reduces array into a single entity
It takes four parameters at maximum in its function -

previousValue, currentValue, currentIndex, array

reduce() method can be easily understood by implementing sum of all values in an array.

  let numbers = [1, 2, 3];
  let initialValue=0;
  let sum = numbers.reduce(function (previousValue, currentValue) {
      return previousValue + currentValue;
  },initialValue);

The reduce method starts with initial value as 0 , initially previousValue will be 0(initialValue) and currentValue will be array's first element. Then, currentValue will be added to previousValue and the result will be stored in previousValue. This process will repeat until the end of the array and the previousValue will be returned and it will be stored in sum.

forEach()

The forEach() method executes a given function atleast once for every element.
Normally, it is used to print the elements in the array. But the usage of forEach() didn't stop there. Since it can be applied to every element in an array. We can even use it to change the individual elements in the array.

  let students = ['John', 'Sara', 'Jack'];

  // using forEach
  students.forEach((item, index, arr)=>{
        // adding strings to the array elements
        arr[index] = 'Hello ' + item;

  });
   //returns ["Hello John", "Hello Sara", "Hello Jack"]

every()

The every() method tests whether all elements in the array satisfies the condition in the provided function
If condition satisifes all the elements in the array then the method will return true otherwise it will return false.
Let's say we want to check if all the elements is greater than 10 or given number.

  function isBigEnough(element, index, array) {
    return element >= 10;
  }
  let numbers=[12, 5, 8, 130, 44];
  numbers.every(isBig);