Comments

What are Higher-Order Functions in JavaScript?

higher-order function

Have you heard your peers talk about Higher-Order functions in JavaScript? Don’t worry if you are lost in the conversation and are unsure about what it is. In this post, we will learn about Higher-Order functions, and why they are useful.

Let’s get the definition out of the way:

A function that accepts and/or returns another function is called a higher-order function.

It’s higher-order because instead of strings, numbers, or booleans, it goes higher to operate on functions.

A Higher-Order function is a function that receives a function as an input argument or returns a function as output. This is a concept that was born out of functional programming. This maybe an alien concepts for those who are more used to the Object Oriented Programming world. JavaScript, is a language that has started to use a lot of the functional programming concepts lately. Higher-Order functions is one of them.

Why Higher Order Functions?

Pure Functions

Before we get started to learn something, we need to understand why that is important. You maybe curious, what purpose do higher-order functions serve?

Simple and Elegant Code

Higher-Order functions allow you to write simple and clean code. It allows you to write smaller functions, that do only on thing. This kind of composition results in simple, readable code.

Fewer Bugs

With simple and elegant code you end up with fewer bugs. Trust me on this one.

Easy to Test and Debug

With functions that do only one thing, you end up with code that is easy to test. Testable code, results in fewer bugs. Therefore debugging these simple functional units is also easy.

Built-in Higher Order Functions in JavaScript

JavaScript comes with some built-in higher-order functions. You may already be using them, without realising that they are higher-order functions. Let’s take a look at some of them, to understand how they work.

Array.prototype.map

The map() method creates a new array with the results of calling a provided function on every element in the calling array. What this means is map() calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.

The callback accepts three arguments:

  • value of the element
  • index of the element
  • array object

You may have used the map() function before. It qualifies as a higher-order function, because it takes in a callback function as an input argument.

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles is now [2, 8, 18]
// numbers is still [1, 4, 9]

In the example above, we have an array of numbers and creating a new array using the map(). The map() takes a function as an argument. The argument num within the function will automatically be assigned from each element of the array as map() loops through the original array.

Array.prototype.filter

The filter() method is another example of an in-built higher-order function. It creates a new array with all the elements that pass the test provided by a callback function. It also takes in a function as an argument, hence making it a higher-order function. The callback function passed to the filter() method accepts three arguments:

  • value of the element
  • index of the element
  • array object

Array elements which do not pass the callback test are simply skipped, and are not included in the new array.

Let’s take a look at an example that shows filter() in action.

function isAboveMyRange(value) {
  return value >= 25;
}
var filtered = [12, 5, 8, 130, 44].filter(isAboveMyRange);
// filtered is [130, 44]

The example is used to find values greater than 25 and filter the array. The values that don’t pass this test, will not be a part of the filtered array. The filter() function takes the isAboveMyRange function as an input parameter.

Array.prototype.reduce

Another built-in higher-order function in JavaScript is the reduce() method. It executes the callback function on each member of the calling array, and results in a single output value. The reduce() method takes in two input parameters:

  • The reducer callback function (making this method a higher-order function)
  • Optional initial value
arr.reduce(callback[, initialValue])

The reducer function (callback) accepts four parameters:

  • accumulator
  • currentValue
  • currentIndex
  • sourceArray

If an initialValue is provided, then the accumulator will be equal to the initialValue, and the currentValue will be equal to the first element in the array. Suppose no initialValue is provided, then the accumulator will be equal to the first element in the array and the currentValue will be equal to the second element in the array. Let’s try to understand this better with a simple example.

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6

In this example, we have passed an initialValue of zero, this is assigned to the accumulator in the beginning. Every time the reduce() function is called on each value in the array, the accumulator keeps the result of previous operation returned from the function, and the currentValue is set to the current value of the array. In the end the result is stored in the sum variable.

You can write your own higher-order functions

We saw some examples of in-built higher-order functions that come with JavaScript. But that’s not all. You can always create your own higher-order functions based on your needs.

Conclusion

In this article, we learned what higher-order functions are and we also learned some in-built higher-order functions in JavaScript. You may have already been writing higher-order functions or using them, without realising their significance.

Higher-order functions are just like regular functions, but they can accept a function as an argument and/or return a function as an output. If you enjoyed this post, please do share this.

Mosh has a bundle of amazing courses out there that will enable you to become proficient in JavaScript. Checkout the course below to become a JavaScript master.

Mosh’s JavaScript Course Bundle

If you enjoyed this post, share and spread the word. You can follow me on twitter at @AdhithiRavi

Adhithi Ravichandran is a Senior Software Engineer based in Kansas City. She is currently working on building mobile apps using React Native for critical healthcare scenarios. Adhithi is a regular conference speaker at various tech conferences. Adhithi graduated with a Masters degree in Computer Science from the University of Kansas and has been in the tech industry for over 7 years. She has worked on several technologies over the years, and one of her recent favorite is React Native.
Tags: ,

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts