First-class functions and higher-order functions change the way we write JavaScript and they provide us completely different approaches to solving problems.

In this article, we are going to dive into the first-class functions starting from its definition to examples. Moreover, we will talk further on the higher-order functions which helps us write more efficient code.

What is first-class functions

In programming language, First-class functions are when functions are treated as any other types. In JavaScript, functions are object which means it supports all the operations that objects are allowed such as attaching primitive, object and other functions.

In addition, the function object has other special properties such as name (could be anonymous) and code (invocable).

Let’s see the code below.

function speak() {
  console.log('meow');
}

speak.animal = 'cat';
console.log(speak.animal); // cat

From the code above, in JavaScript, we can attache a property, animal, to the speak function just like the object and when we console.log the animal property of the function, we get cat.

This little feature in JavaScript allows us having completely different approaches to solving problems.

Let’s take a look at more examples to understand the first-class function in details.

Examples of first-class functions

1. Assigning a function to a variable

We can assign a function to a variable and invoke the function by calling the variable with a pair of parentheses at the end of the variable name.

const speak = function() {
  console.log('meow');
}

speak();

In this example, we assigned an anonymous function to the variable speak and when we call the variable speak(), the function will be invoked.

2. Passing a function as an argument

We can pass a function (treated as a value) as an argument to another function.

function speak() {
  return 'meow';
}

function sayHi(message, animal) {
  return `${animal} says ${message()}`;
}

sayHi(speak, 'Cat'); // Cat says meow

In this example, we are passing speak function as an argument to the sayHi function. In the sayHi function, the message variable will point to the speak function in memory and when we invoke the message(), the speak function will be called.

The speak function is a Callback function which passed into another function as an argument and then invoked inside the outer function.

3. Returning a function

We can return a function from another function.

function sayHi(message) {
  return function(animal) {
    return `${animal} says ${message}`;
  }
}

In sayHi function, we can return the anonymous function because the function is treated as a value.

To invoke sayHi function and its returned function, there are two ways we can do, using a variable and using double parentheses.

// using a variable
const voice = sayHi('meow');
voice('Cat');

// using double parentheses
sayHi('meow')('Cat');

So far we have talked about what first-class functions are and saw the examples of it. Now let’s talk about Higher-Order Functions.

Higher-Order Functions

In JavaScript, a Higher-Order Function is a function that receives another function as an argument and/or returns a function. Higher-order functions are possible because of the First-class function as we saw from the above examples.

Probably you may not have noticed but we are already using it every day with built-in JS methods such as Array.prototype.map, Array.prototype.filter and Array.prototype.reduce.

Let’s see map() as an example. It can receive arrow function, callback function or inline anonymous function shown below.

Array.prototype.map

Let’s say we have an array of numbers and we want to create new array which contains the numbers doubled from each number from the array we defined.

const array = [1, 3, 6, 8, 9];

// Arrow function
const newArray = array.map(x => x * 2);

// Callback function
function callbackFn(x) {
  return x * 2;
}
const newArray2 = array.map(callbackFn);

// Inline anonymous function
const newArray3 = array.map(function(x) { return x * 2 });

The map() receives a function (higher-order function) and returns a new array with each element resulted from the callback function.

Let’s take a look at some more practical examples with the higher-order function.

Example 1 – getStatus

In this example, the getStatus (higher-order function) will receive an object and a callback function. The getStatus function will then construct a sentence and return it.

The sentence contains the name, population and conservation status of the animal. To get the conservation status, we will invoke the callback function which will add a relevant animal emoji.

// Reference: https://www.worldwildlife.org/species/directory?direction=desc&page=2&sort=extinction_status

const statusList = {
  cr: 'Critically Endangered',
  en: 'Endangered',
  vu: 'Vulnerable',
  nt: 'Near Threatened',
  lc: 'Least Concern',
};

function getStatus(species, fn) {
  const {name, population, conservationStatus} = species;

  return `${name}: ${fn(conservationStatus)} (population: ${population})`;
}

const blackRhino = getStatus({name: 'Black Rhino', population: '5,500', conservationStatus: 'cr'}, (conservationStatus) => {
  return `🦏 ${statusList[conservationStatus]}`;  
});

const tiger = getStatus({name: 'Tiger', population: '3,900', conservationStatus: 'en'}, (conservationStatus) => {
  return `🐅 ${statusList[conservationStatus]}`;  
});

// Black Rhino: 🦏 Critically Endangered (Population: 5,500)
console.log(blackRhino);

// Tiger: 🐅 Endangered (population: 3,900)
console.log(tiger);

Example 2 – addCurrency

In this example, the addCurrency (higher-order function) receives a sign and returns a function which will combine the sign and the amount.

We can either use a variable (line7) or double parentheses (line 10) to invoke the addCurrency function.

function addCurrency(sign) {
  return function(amount) {
    return `${sign}${amount}`;
  }
}

const dollarSign = addCurrency('$');
const dollarAmount = dollarSign('17');

const wonAmount = addCurrency('₩')('17,000');

// $17
console.log(dollarAmount);

// ₩17,000
console.log(wonAmount);

Example 3 – storeState

This example is a mini local state manager and is quite similar to the example 2 above.

The storeState function (higher-order function) will receive the previous state and return a function which returns the combined state of the previous state and the next state.

function storeState(prevState) {
  const state = {...prevState};

  return function(nextState) {
    return {...state, ...nextState};
  }
}

const movieDetails = {
  title: 'Parasite',
  director: 'Bong Joon-ho'
};

const movieInitState = storeState(movieDetails);
const movieInfo = movieInitState({awards: ['Academy Award for Best Picture', 'Busan Film Critics Awards', 'Cannes Film Festival']});

// { title: 'Parasite', director: 'Bong Joon-ho', awards: ['Academy Award for Best Picture', 'Busan Film Critics Awards', 'Cannes Film Festival']};
console.log(movieInfo);

Example 4 – Debounce

A debounce function is another great example of using the higher-order function. ~~I am going to publish the debounce function soon, so stay tuned~~ I have published this article deep-diving into the debounce (note: writing a debounce function is a common interview question so I strongly recommend to read the article ~~once it’s available~~ 😉).

Composition

One of the great benefits from higher-order functions is composition. As we saw from the examples above, we create smaller functions which take care of its own small logic and then we compose more sophisticated functions constructing with the smaller functions. It helps us make the code easier to read and reduce the bugs overall.