JavaScript Functions and First Class Objects

What is a First Class Object?

This post I am going to cover the reason why we ought to be using function declarations over function expressions and why. But the title refers to first-class objects as well. What do we mean by a first-class object? It’s actually pretty straightforward. A function as a first-class object can be used in the following examples below:

  • functions can be named with a variable.
  • functions may be passed as arguments to other function.
  • functions may be returned as the results of a function.
  • functions can have properties and have a link to the object constructor method
  • functions are an instance of the Object type

In other words, anything you can do with other Javascript types (string, number, array) you can do with a function. So what does this have to do with how we declare our functions? Quite a bit actually and I will show you in the remainder of this post why one way is preferred over the other.

Function Declarations

So what do we mean then when we say a function declaration? Essentially when we are creating a function, we use the function keyword to initialize it. Remember that a function is an Object type!

So take for example this simple function below. It will return the squared value of an input number. Pretty simple right.

// function declaration
function sqaureNumber(number) {
    return number * number;
}

The way JavaScript compilers work is that this function is hoisted to the top of our script so that we can use the function before our implementation and declaration. So for example, if we write our code like below, it will still compile and run correctly.

squareNumber(5); //returns 25

function squareNumber(number){ 
   return number * number; 
}

This is expected behavior, except that there is something slightly different about JavaScript. We mentioned hoisting above, and what actually happens to our code is that the declaration of our function is read by the compiler, before the use of it. You can see what the compiler does to our code. Either way will work.

function squareNumber(number) {
    return number * number;
}
squareNumber(5); //returns 25

Function Expressions

Functions as an expression are not the ideal way that you ought to create a function. But what does it look like to use a function expression?

let squareExpression = function(number){
  return number * number;
}
squareExpression(4); //returns 16

You can see that we declared a variable and then immediately assigned it to our function. This has an effect when it comes to hoisting variables. This code as written will work, but what if you attempt to call the expression before the implementation of it? Uncaught ReferenceError: squareExpression is not defined is what you’ll get back as an error. You can see the code below in for this example.

squareExpression(4); //will throw the Uncaught ReferenceError.

let squareExpression = function(number){
  return number * number;
}

Let’s look at what the JavaScript compiler is essentially doing with our code and why using a function expression is not ideal. Notice that the variable declaration is hoisted, but it was not yet assigned. The next line is then being called, but the variable was not assigned to our function signature, hence the Uncaught ReferenceError. Then finally our variable expression is assigned to the function implementation.

let squareExpression; //the variable is hoisted above our assignment

squareExpression(4); //will throw the Uncaught ReferenceError

squareExpression = function(number){
  return number * number;
}

Best to stick with declarations as hoisting and expressions can lead to issues if you are unaware of them, remember that functions are first-class objects so treat them as such. We create safer and more maintainable code to use function declarations when writing our code.

Next On FoC

JavaScript Array Methods Filter, Map and Reduce

JavaScript Array Methods Filter, Map and Reduce
Previously On FoC

Goals And Why They Are Important As A Developer

Goals And Why They Are Important As A Developer