Understanding First Class Functions in Javascript with Examples

Introduction

In this section, we will look at what is meant by “First Class Functions” in Javascript, how to define and use them with examples.

What are First Class Functions?

Let us begin by understanding what is a first class function? In simple terms, First class functions are functions that can be treated as variables i.e, functions can be assigned as value to a variable or it can be passed as an argument to another function or even can be returned by another function just like any other variable in Javascript.

We will look at how the above functionality can be achieved in Javascript with examples.

Assigning function to a variable

Just like assigning any value to a variable, we can also assign a function in a similar manner.

For example,

var greet = function() {
    return "Hello!";
};

Here, we have assigned the variable greet to an anonymous function than returns a text.

To call this function we can simply write the name of the variable followed by the parentheses greet().

> greet();
'Hello!'

We can also use a named function instead of an anonymous function.

var greet = function hello() {
    return "Hello!";
};

This will still result in the same output.

> greet();
'Hello!'

Passing function as an argument to another function

We can pass a function as an argument to another function. The function is passed as a reference.

To illustrate this we will create a function fullName which will take two arguments fname and lname and return a string containing full name separated by a space.

We will then declare another function anotherFunc that will make use of fullName function as its argument along with two additional arguments containing first and the last name.

function fullName(fname, lname) {
    return fname + ' ' + lname;
};

function anotherFunc(fullName, fname, lname) {
    return fullName(fname, lname);
};

var name = anotherFunc(fullName, "Mickey", "Mouse");

console.log(name);

Output:

‘Mickey Mouse’

As you can see from the above example, passing a function as argument to another function is possible.

We can also pass an anonymous function directly in the anotherFunc function as follows:

function anotherFunc(fullName, fname, lname) {
    return fullName(fname, lname);
};
var name = anotherFunc(function(fname, lname){
    return fname + ' ' + lname;
}, "Mickey", "Mouse");

console.log(name);

As we can notice in the above example, an anonymous function is declared directly during the calling of function anotherFunction along with two more arguments.

Output:

‘Mickey Mouse’

Returning a function: Higher-Order function

A function in Javascript can also return a function as its return value. When a function returns a function it is called Higher-Order function. For example, in the below example, we are using a function greet() that returns an anonymous function.

function greet() {
    return function() {
        return "Hello there!";
    }
}

const message = greet();
console.log(message());

Notice, we are assigning the output of the greet() function to a variable message that is later used with parentheses to print the output.

If you want to avoid using the variable simply use the double parentheses.

greet()();