Higher Order Functions

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:

1. map()
2. filter()
3. reduce()
4. forEach()
5. 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);

• These are not the only higher order functions in JavaScript. Learning how to use these functions will help you write better code and also you will have a good grasp in the fundamentals of the language.

Comments

[Andrew Baisden]

Nicely explained don't forget to add syntax highlighting in Markdown it makes it more readable. Google it you will figure out how to do it.

[muddassir]

Thanks.. Now I had added syntax highlighting..

[Sarvesh Prajapati]

Great article;
Here are few suggestion

• when wrapping text in a code block, use like this

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);

it will make some color highlight syntax

You can look at my posts:
dev.to/sarveshprajapati/if-else-in...

Try to put the expression that actually generate output, like console.log instead of leave it as

And instead of creating callable function outside of HOF, try to put it inside HOF.. it would make more sense... and express the power of HOF

[muddassir]

Thanks for the suggestion❤️.. I will consider that.

[Sarvesh Prajapati]

anytime.. just go ahead... keep writing