First class functions in JavaScript: how comes functions are objects in JS (part 1)

We often hear that JavaScript functions are first-class functions, meaning both functions and objects are treated by the language as the same thing. In practical terms, a function can be stored as a variable, inside an array or an object, as well as it can be passed as an argument or be returned by another function. That makes functions “first-class citizens” in JavaScript.

While this is understood by most JavaScript programmers, I believe the whole process of how this works is kinda obscure to most web developers and most of the time prefer to accept it as a statement of faith, so I’d briefly like to discuss how this works behind curtains, demonstrating and showing how (almost) everything in JS is an object.

In this first post, I’ll address one of the main reasons programmers do not fully grasp the fact that in JavaScript functions are objects too: its literal notation syntax.

Literal notations

In JavaScript, you can initialize an object as follows:

But you may be also familiar with this notation:

Both declarations work fine as they’re are equivalent. Note that by using new we are calling the contructor function of Object. You can empirically validate this doing:

Similarly, consider the following array declarations

Again, both declarations are equivalent. JavaScript provides shortcuts —called “literals”— so using [ ] is just a shorter representation for instantiating the constructor of Arraynew Array() ).

Now, when declaring a function in JavaScript, you probably are familiar with this two notations

Guess what. Both declarations* are also “shortchuts” or literal expressions for the constructor of the object called Function. Just as Array is an object and can be initialized with new Array() or [ ], functions are also objects and can be initialize either with a “short” expression or a explicit one, using the new keyword

To summarize, just remember:

literal notation explicit initialisation
var myObj = { }; var myObj = new Object();
var myArray = [ ];  var myArray = new Array();
var myFunction = function( ){ }; var myFunction = new Function();

 

You can learn more about the Function object in MDN. By now you know that whatever construction notation you use, it’s just a fancy way to initialize an instance of the Function object. It’s also evident that Function or Array are just objects too.

Conclusion

The literal notation used for declaring a function in JavaScript is actually a shortcut to instantiate the Function object, equivalent to use new Function().  All functions are created from a Function() constructor, even if you do not directly invoke the Function() constructor (e.g. var add = new Function(‘x’, ‘y’, ‘return x + z’);) and instead use the literal notation (e.g. var add = function(x,y){return x + z};).

By this we can infer that functions are also objects in JavaScript.

 

*Even though both function expressions and function statements can be used to instantiate a Function object, they’re not quite equivalent, specially in the way they’re hoisted. It might be I’ll write about JS hoisting later, but there’s still plenty of explanations out there.

Next part…

If you’re a very curious person, you might be wondering why an Array and a Function are objects, moreover if you come from a language where an array, a function and an object are completely different things. For this we’ll have to go deeper in our understanding of JavaScript objects and prototypal inheritance, which will be the subject of my next post.