Functions in JavaScript

In this article, we will explore more about what are function statements, function expressions, anonymous functions, and first class functions.

As we all know JavaScript is a very flexible and powerful language that supports object-oriented, imperative, and declarative (e.g. functional programming) styles. In this article, we will explore more about the functional aspect of JavaScript.

Let's get started with the different functions one by one.

Function Statements or Function Declaration

If you are using JavaScript for a while then you might be using this way of writing the function which is also known as Function Statement, or Function Declaration or we can also refer to it as the Named Function.

// Function statements or Function Declaration
function Test1(){
    console.log("This is a Function Statement");
}

Function Expressions

Now let's see what is a Function expression, and how it is different from a function statement?🤔

When the function is assigned as a value to a variable it’s known as Function Expression. For example, in the below code snippet, we are assigning a function to variable t.

// Function Expression
let test2 = function (){
              console.log("This is a Function Expression");
          }

The main difference between the function statement and function expression is “Hoisting”. Let me explain a little bit what I want to convey here.

Let's take two functions with different styles which we have used above, and invoke them before declaring in the program.

Test1()
test2()
// Function statements or Function expression statement
function Test1(){
    console.log("This is a Function Statement");
}
// Function Expression
let test2 = function (){
              console.log("This is a Function Expression");
          }
Console Output
==============
This is a Function Statement
TypeError: b is not a function

If you can see that function Test1 has run successfully because while memory creation phase Test1 has allocated memory and the function is stored in it. Whereas in the case of function expression i.e. the function test2 has raised an error. It's because we have assigned the function to variable test2 and as we all know JavaScript executes the program line by line, so until we reach that particular line in the program where we assign some value to any particular variable it is treated as “undefined” in the call stack.

If you want to know more about how the JavaScript works behind the scene, please checkout the awesome Namaste JavaScript series by Akshay Saini

Anonymous Functions

Anonymous Functions are the functions without a name or we can also say that the function that does not have its own identity.

But we can not use the anonymous functions directly in the program as it will throw a syntax error. So you might be wondering where do we use it?🤔 So let me tell you that, anonymous functions are used in scenarios where the functions are used as a value. for eg. in the case of Function Expressions.

// Anonymous Function
function (){
    console.log("This is an Anonymous Function");
}

First Class Functions

An ability where a function can be passed as an argument to other functions or can be returned by another function and can be assigned as a value to a variable which is known as First Class Function.

// First Class Function
// 1. returning function from another function
function Test(){
   return function (){
       console.log("This is a First Class Function")
   }
}
// 2. passing the function as an argument to another function
function XYZ(param){
   ....
}
XYZ(function(){ ... })

Well, this is all about the different functions in JavaScript. I hope you guys have understood the concepts well. If you feel this article helpful, please do share with your friends.🙂