What is Higher Order Function In JavaScript?

Functions are the Heart of JavaScript. As JavaScript Developers, we use functions more than we drink water as humans.

In this article, We will discuss about First Class Function and Higher Order Function.

First Class Function

In a programming language if we treat a Function like another variable then that programming language is said to have First Class Function.

In another word, the function can be assigned to another variable or passed as an argument, or can be returned by another function.

Our very own JavaScript treats functions as first-class-citizen. Let us see an example to understand this.

Example:- Function Expression

let add = function () {
    console.log(5+4)
}
add();

In this example, we are storing an Anonymous Function to a variable called add and then we are invoking that Anonymous Function by using that variable name and parenthesis. This way of writing a function is known as Function Expression

Output: 9

What is Anonymous Function?

• When we Declare a function without using a name that is known as Anonymous Function. Example:-

  function () {
    console.log('I am Anonymous Function')
  }
  

  Note that if we use the above code we will get an error, as that is a function statement so it needs a name. So we can use the Anonymous function only as values of another variable or as a callback.

Higher Order Function

A Function that takes another function or functions as an argument or returns a function or does both is known as the Higher Order Function. So we can conclude that if First Class Function is present in a programming language then Higher Order Function will also be a part of that language.

Let's see some examples of Higher Order Functions.

Example 1:- Passed As Argument.

function cb(name){
    return `I am ${name}`
}

function parent (param){
    console.log(`${param('JavaScript')} Higher Order Function`)
}

parent(cb)

Here we are passing cb Function to the parent function.

Note:- This function which we pass to other functions as an argument is known as Callback Functions.

Output: I am JavaScript Higher Order Function

Example 2:- Returning From A Function

function parent (myName){
    return function(myType) {
            console.log(`I am ${myName} ${myType}`)
    }
}

Here we are returning an Anonymous function from the parent function. Now we can call this function in 2 ways:-

Way 1:- By Using a variable

const myFunc = parent('JavaScript')
myFunc ('Higher order function')

Here we are first calling the parent function and storing the returned function in the myFunc variable and then invoking the returned function.

Way 2: By using double parentheses

parent('JavaScript')('Higher Order Function')

Here we are using double parentheses to invoke the parent and return function together.

In both cases, the output will be the same.

Output: I am JavaScript Higher Order Function

Use Cases:-

Here are a few use cases of JavaScript where we treat a function as a value.

• setTimeOut:- The first argument of setTimeOut is a function.

setTimeout(function (){
       console.log('Timeout called ')
}, 3000)

• addEventListner:- The second argument of assEventListner is a function.

function handleClick(){
      console.log('Button Clicked ') 
}

document.querySelector('button').addEventListener('click',handleClick)