Higher-Order Functions in JavaScript

Every Javascript developer uses higher-order functions knowingly or unknowingly.

In JavaScript, functions are first-class citizens, meaning

• They can be treated like any other variable.

• They can be passed to a function.

• They can be returned from any other function.

Higher-order Function

A function that takes another function as an argument or A function that returns any other function, is known as a Higher-order Function.

But Why do we use it?

Higher-order functions are used to modularize our code. To make our code flexible and more maintainable. Enough theory?

Let's write some code

function morning(name){
    return `Good morning, ${name}`;
}

function evening(name){
    return `Good evening, ${name}`;
}

function happyBirthday(name){
    return `Happy Birthday, ${name}`;
}

function greet(name, func){
    return func(name);
}

console.log(greet("Faheem",morning));
console.log(greet("Jack",evening));
console.log(greet("Nat",happyBirthday));

Let's understand this example step by step -

First, notice that the greet is a higher-order function because it is taking another function as an argument.

See, how our code is modularized. We have defined different greetings messages in different small functions. Those functions are passed to greet() and greet() calls them and returns the message back to the caller.

Here in the example above, functions morning(), evening() and happyBirthday() are examples of callback function because they are getting passed to another function (greet in this case) and then called by that function greet.

Function returning another function

Higher-order functions can return another function.

function calculateTotalPrice(money){

    return function (){
      return money + money *0.1;
  }

}

const addTaxestoo = calculateTotalPrice(100);
console.log(addTaxestoo());

// calling in a single line
console.log(calculateTotalPrice(100)())

Notice, calculateTotalPrice() is a higher-order function which returns another function.

Also, note how to call the returned function in a single line.

Some of the most used built-in higher-order functions are map(), reduce() and filter().

I have written a separate blog covering these functions. Here is the link to that post

faheemkhan97.hashnode.dev/map-reduce-filter..

Summary

Higher-order functions are the heart of functional programming.

Higher-order functions take another function as an argument or return another from it.

A function passed to another function and called later is termed as a callback function.

If you got any questions or doubts, feel free to ping me on Twitter.

twitter.com/faheem_khan_dev

I hope it was a great read for you. If you have any feedback please share it in the comment below. Also, if you find it helpful, please like and hit the follow button on the right top corner.