What are Higher-Order Functions in JavaScript?

What are Higher-Order Functions in JavaScript?

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.

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?

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.

javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Best Web and App Development Company in Ahmedabad

Contact DataPierce for any questions or queries you have about website development, designing, marketing projects or any small or enterprise software development.

Top 15 Free JavaScript Frameworks for Web Applications

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.

Mobile App Development Company | Web Development & Design Services

WebClues Infotech is a leading website and mobile development services company. We specialize in full stack development services as well as iOS and Andriod app creation.