What are the differences between first-class vs higher-order functions in JavaScript?

It's easy to see that functions are an important part of JavaScript. In fact, functions are so important that they have their own keyword: function. Functions are objects that take one or more arguments. When a function is called, the JavaScript engine creates a new execution context for that function.

There are two types of functions in JavaScript:

  • first-class functions
  • and higher-order functions.

First-class functions are functions that can be assigned to variables, passed as arguments, and returned from functions.

Higher-order functions are functions that take one or more functions as arguments or return a function as the result.

Let's take a look at an example of a higher-order function.

The map() function is a higher-order function that takes a function as an argument. The map() function applies the function to every item in an array, and returns a new array with the results.

Here's an example of how to use the map() function:

var numbers = [1, 2, 3, 4, 5];

var doubled = numbers.map(function(number) {
	return number * 2;
});

console.log(doubled);

The output of the code will be: [2, 4, 6, 8, 10].

As you can see, the map() function takes a function as an argument, and applies it to every item in the array. It then returns a new array with the results.

The map() function is a useful function for performing operations on arrays. You can use it to filter arrays, create arrays of arrays, and more.

JavaScript also includes a number of higher-order functions built-in, such as map() and reduce(). You can also create your own higher-order functions if you need more flexibility.

Higher-order functions are an important part of JavaScript, and can be used to perform a variety of tasks. They're a great way to abstract away complex code, and make your code more readable and maintainable.

What about first-class functions?

The first time a function is called, it is assigned to the variable "fn" in the global namespace.

function fn() {
console.log("fn called");
}

And then you can call it like this:

fn();

This is a first-class function.

First-class functions are functions that are assigned to variables and can be passed around like any other variable. In JavaScript, first-class functions are created when a function is defined with the "function" keyword.

function fn() {
	console.log("fn called");
}

var callback = fn();

callback();

In the example above, "callback" is a first-class function that references the function "fn". First-class functions can also be returned from other functions, as shown here:

function getCallback() {
	return fn;
}

var callback = getCallback();
callback();

In this example, "callback" is a first-class function that references the function "fn". First-class functions can also be stored in arrays and objects.

var callbackList = [];
callbackList.push(fn);
callbackList.push(callback);

In the example above, "callbackList" is an array that stores two first-class functions. First-class functions can also be used as callbacks.

function callback() {
	console.log("callback called");
}

var fn = function() {
	console.log("fn called");
};

callback();
fn();
💡
Need a writer? Want to work with me? I have a subscription copywriting service available at Zipply.io. Subscribe to a set number of words and split it into as many copy assets as you need. Scale your startup, small business, or MVP. Upgrade, downgrade and pause at any time. Start your subscription here.