First-Class Functions in JavaScript

In this article, we will be talking about programming term “First-Class Function” with code examples written in JavaScript for better understanding. So, if you are not familiar with JavaScript, there is nothing to worry about. All functional programming languages and some other languages support first-class functions. It is not important in which programming language we are writing. What is important that to get the concept of first-class functions. Understanding this topic will help you to comprehend higher-order functions, nested functions, closures and other terms later.

Let’s look at the definition of first-class functions retrieved from Wikipedia.

“Programming language is said to have first-class functions if it treats functions as first-class citizens”.

So, if programming language treats functions as first-class citizens then it supports first-class functions. Another question arises that what is first-class citizen?

“First-class citizen (also called a first-class object) in a programming language is an entity which supports all the operations generally available to other entities. These operations typically include being passed as an argument returned from a function and assigned to a variable”.

With simple words, first-class function means that we need to be able to treat functions just like any other object or variable. For better understanding let’s skip all this wordiness definitions and start coding.

Now, we will see what it means to assign function to variable. This is where tricky part that most of the people confuse it with assigning result of function, in other words, return of the function. No, we don’t do that here. We literally assign function to variable without passing parameters.

As you see in the first example, we assign function result to variable ‘a’ with passing parameter and result is 33 = 27. In contrast, in the second example, we assigned to variable a function without any parameter. When we print that variable, it gives us function itself. What we have seen in second example is a basic property of being first-class function.

As our variable ‘a’ is a variable with assigned function, we can treat it as a function.

We can also pass functions as arguments and return functions as the result of other functions. In extra, if a function accepts other functions as arguments or returns functions as their result, that function is called higher-order function. Let’s see both examples.

First example is passing function to the function. Map function is a great example in JavaScript. This function takes 2 arguments; a function and an array. Simply, it runs that argument function with parameters of each value of array. And return a new array with results of that function.

Here, I implemented my own map function which takes 2 arguments; function and array. It creates an array ‘res’. Through the for loop, it takes each value of argument array and execute with argument function. Then it pushes the result to ‘res’ array. At the end, it returns that array. In the main part of the program, I call the ‘my_map’ function with cube function and example array as arguments. And I assign that returned array to variable ‘a’. Finally, I print it. Note that when I pass cube function to ‘my_map’ function, I didn’t put parentheses after ‘cube’. Parentheses means execution of the function. Here, rather than executing function, I want it to pass as a parameter. Later on, ‘my_map’ function will execute it. Results are above.

Second example is to return function as the result of another function. Now, things are getting little bit complicated.

In this example, we have a function ‘html_tag’ takes argument ‘tag’. Inside of this function, we have declared another function ‘wrap_text’ which also takes argument ‘msg’. This function prints something using its own parameter ‘msg’ and his father function’s parameter ‘tag’. Just like a closure. Then our ‘html_tag’ function returns another function ‘wrap_text’. This is the 2nd property of First-class functions which we have discussed previously.

Now, let’s concentrate on main part of the program. We declare a variable ‘print_h1’. We execute ‘html_tag’ function with parameter ‘h1’ and assign result to the ‘print_h1’. As ‘html_tag’ return ‘wrap_text’ function, our variable is equal to unexecuted ‘wrap_text’ function. To execute it, we also need to pass a parameter due to ‘wrap_text(msg)’. I passed a string saying that ‘This is a HEADER!’ and it wrote to the console. BRILLIANT!

In this article, I tried to explain programming term “First-class Functions” with my best. I described 2 main properties of it and illustrated code examples written on JavaScript. For further information, you can refer to my another article “Closures in Python” where first-class functions are prerequisite of it.