Higher-Order Functions in Javascript

cathrynbmcdonald — Thu, 04 May 2023 20:09:02 +0000

What are `HoF`'s and Why Should We Use Them?

Javascript functions that take in another function as an argument or return another function are called higher-order functions. Using these functions allows us to save time, write cleaner code, and reduce the possibility of typing errors. Let’s take a look at each type.

Type 1: What are Functions That Take Another Function as an Argument?

Suppose we need to write several functions so we can add different types of punctuation to an array of names. Instead of writing similar code multiple times, we can write a single HoF that takes in a function as an argument. Here’s an example:

function arrayPunctuation(array, func) {
   var newArray = [];
   for (let i = 0; i < array.length; i++) {
      newArray.push(func(array[i]));
   }
   return newArray;
}

This function can then be used to add different types of punctuation to each element in an array, depending on the function we pass in as an argument. For example, we might pass in a function which capitalizes each element:

function capitalize(string) {
   return string.toUpperCase();
}

var capital = arrayPunctuation(['John', 'Mary'], capitalize);
console.log(capital);  // output: ['JOHN', 'MARY']

Similarly, we can call the function and pass in a function that adds a comma after each element:

function addComma(string) {
   return `${string},`;
}

var comma = arrayPunctuation(['John', 'Mary'], addComma);
console.log(comma);  // output: ['John,', 'Mary,']

Or call the function and pass in a function that adds the title of Dr. before each element:

function addTitle(string) {
   return `Dr. ${string}`;
}

var title = arrayPunctuation(['John', 'Mary'], addTitle);
console.log(title);  // output: ['Dr. John', 'Dr. Mary']

Type 2: What are Functions That Return Another Function?

Now suppose we need to write several functions so we can add different types of punctuation to the end of a string. Instead of writing similar code multiple times, we can write a single HoF that returns a function. Here’s an example:

function stringPunctuation(string) {
   return function(punctuation) {
      return string + punctuation;
   }
}

This function can then be used to add different types of punctuation to the end of a string, depending on the arguments we pass in. For example, we can call the function and pass in the strings Where and ?.

var question = stringPunctuation(`Where`)(`?`);
console.log(question);  // output: `Where?`

Or we can call the function and pass in the strings Wow and !.

var exclamation = stringPunctuation(`Wow`)(`!`);
console.log(exclamation);  // output: `Wow!`

Summary

In this article, we've learned about the importance of using higher order functions. By using these functions we can break our code into smaller chunks, which makes it easier to understand and debug. We can also speed up the development process. HoF's are a powerful addition to our coding toolbox.

DEV Community: cathrynbmcdonald

Higher-Order Functions in Javascript

What are HoF's and Why Should We Use Them?

Type 1: What are Functions That Take Another Function as an Argument?

Type 2: What are Functions That Return Another Function?

Summary

What are `HoF`'s and Why Should We Use Them?