Functions as First-Class Citizens in Javascript

Before diving into the topic let me give you some context about functions in Javascript.

Functions in Javascript are beautiful. They are the heart of Javascript and probably everything in Javascript runs on the chariot called FUNCTIONS.

Let us first understand what is are Function Statements and Function Expressions.

Function Statements

Function Statements are when you create a function and you give it a name. It simply means declaring a function with the function keyword and giving it a name.

function add() {
    // logic goes here
}

The above code snippet is nothing but a Function Statement. It is also important to remember that Function Statements are also Function Declarations.

So, whenever someone asks you what is a Function Statement or a Function Declaration it is the same.

Function Expressions

When functions are assigned to a variable they become Function Expressions.

var a = function() {
    // logic goes here
}

The above code snippet is an example of a Function Expression.

The function we used here in the above example is an anonymous function.

It is important to notice that anonymous functions look like function statements but they are not.

function () {
    // logic goes here
}

The above code snipped when complied would throw a SyntaxError.

So, what exactly are anonymous functions?

Anonymous functions are generally used as values. In the above example we have used an anonymous function as a value to assign it to variable a.

We also use anonymous functions as a callback function (inside setTimeout).

There are also another kind of function expressions which are named function expressions. Instead of using anonymous functions we give the function a name.

var a = function add() {
    // logic goes here
}

The above code snippet is an example of named function expression.

Now, finally coming to the topic. Functions in Javascript supports all operational properties inherent to other entities. They can be assigned to a variable, passed as an argument to another function (setTimeout), they can also be returned from another function. Basically functions can do whatever every other entity on Javascript does. Hence, the name First-Class Citizens.

I hope this article helps. If you have any questions reach me out on Github and LinkedIn.

Follow me on Twitter

Also, please do check out Boot.dev. Boot.dev is a computer science program. You learn the same kinds of things that you would learn in a 4-year degree from college.

Have a nice day :)

Comments

[Jon Randy 🎖️]

The function we used here in the above example is an anonymous function.

In actual fact, the function in the example is not anonymous. The act of assigning it to a variable or constant on creation results in it taking that as it's name. Try displaying a.name after the assignment - the function has the name 'a'.

[Rakshit]

Thanks :)