JS First Class Function

JavaScript is a dynamic scripting language that allows us to use it in the form of an object-oriented style or functional style. In the same way, one such feature of JavaScript is the First class function.

In this section, we will discuss the first class function, what it is, what the use is, and will also look at some of its practical implementations to understand its usage and work in a more précised manner.

What is JS First Class Function

The first class functions are the first class citizens and are treated as the first-class object which can be stored in variables, passed as an argument in functions, returned from other functions, have their own properties. It further means that these first class functions support all the operations which are allowed to other JavaScript objects. Thus, JS first class functions support the following described operations:

Can be stored as a value in a variable
Can be returned by another function
Can be passed as a function's argument
Can be stored in an array, stack, or queue
Can have its own properties and methods.

We will see the implementation of these operations and will try to understand the usage of the first class method in a better way.

Storing in a Variable

The below example code is the implementation of storing a first class function in a variable:

function add(x, y) {
    return x + y;
}
let sum = add;

In the above code:

We have created a function and passed two parameters in it.
After that, we have assigned the function to a variable where we have not defined it as a function (i.e., not used the parenthesis) as we have done until now.
So, the question arises here that how it is going to work. The answer to this is that just we need to invoke the variable or the function itself in the following described way:

let result = add(10, 20);

Here, we have assigned the add () function to a variable and passed two arguments in it. It is one way.

let result = sum(10,20);

Here, as we have already assigned the add () function to the sum variable so we can further assign the sum variable to the result and use it instead of using the add () function. It is because both sum and add points to the same address.

The complete code is as follows:

<html>
<body>
<script>
function add(x, y) {
    return x + y;
}
let sum = add;
let result = sum(10, 20);
console.log(result); 
</script>
</body>
</html>

Test it Now

After executing the code, we got the following output:

Passing the first class function as an argument to another function

As we have discussed that these first class functions can be stored in a variable which means that these functions behave like values also. Thus we can pass them as an argument to other functions too.

Let' s see the below example to understand the working and how we can pass it as other function's argument:

<html>
<body>
<script>
function sum(x, y) {
    return x + y;
}

let assign= sum;

function avg(x,y, z) {
    return z(x, y) / 2;
}
let res = avg(10, 20, assign);
console.log(res);

</script>
</body>
</html>

Test it Now

We got the following output after executing the code:

In the above code,

We can see that we have created the sum () function and assigned the function to a new variable, 'assign'.
Then, we have created an avg () function where we have passed three variables x, y, z, and z is the used for passing the sum () function as an argument to the function avg (). In this way, we can pass the first class function as an argument to another function.

Returning functions from functions

The first-class functions are the values only so we can also return it from a function. Let's see the below example code:

<html>
<body>
<script>
function test() {
   return function() {
      console.log("JavaTpoint");
   }
}
const callFunc = test(); //for invoking the anonymous function
callFunc(); 
</script>
</body>
</html>

Test it Now

Output:

In the above code,

We have created a function test () under which we have further returned a function that is defined under it.
Thus, we can return a first class function from another function.
The function test () is known as the Higher-Order function. A higher-order function is a function that makes a first class function be returned from it as a value.
Also, the function which is being returned is the anonymous function. Thus, we need to invoke this anonymous function, and for doing so, we have two following described methods:

Method 1: Using a Variable

In the above code we have used this method for invoking the anonymous function and in addition to it, we have the below example code that will help us to understand it:

<html>
<body>
<script>
const test = function() {
   return function() {
      console.log("JavaTpoint");
   }
}
const callFunc = test(); //to invoke the anonymous function
callFunc();
</script>
</body>
</html>

Test it Now

Output:

In this, we have simply created a constant variable callFunc, and to it, we have assigned the anonymous function. Then we have invoked the constant function with parenthesis.

Note: In calling such a function, we need to use another variable to which it should be assigned. Otherwise, it will not return the function which it is returning. If we return it without storing it in another variable, it would get returned directly.

Method 2: Using Double Parenthesis

The below code example will let you understand it:

<html>
<body>
<script>
function test() {
   return function() {
      console.log("JavaTpoint");
   }
}
test ()();
</script>
</body>
</html>

Test it Now

Output:

In the above code, for invoking the function, we have used double parenthesis, which is similar to storing the function to another variable and then invoking the variable with single parenthesis as we have done in Method 1.

So, it is all about First class functions, and we have better described its usage and its implementations.

Next TopicJavaScript Default Parameters

← prev next →