“var functionName = function” VS “function functionName”

If you are reading “var functionName = function and function functionName,” we can understand how confusing it is for you. But, before your mind drifts towards more confusion, let us quickly tell you that “var functionName = function vs. function functionName” is one of the easiest comparisons in JavaScript. Oh, yes, it is!

Once you have gone through this guide, this particular comparison won’t ever concern you. But you have to read every statement of this guide quite thoroughly. Programming, as well as its topics, asks for complete attention, is it? 

Now, let’s move straight towards today’s topic.

Function Declarations

Every programming language has its own way of declaring a function. Though in most cases, it is “function functionName(){}” but the syntax could vary as per the language.

In JavaScript, the standard function declaration syntax is “function functionName(){}”. This is the traditional method, and it is termed as Standard Function Declaration.

But if you are writing scripts in JS for quite a long time, then you must have come across another way of declaring a function in JS, i.e., “var functionName = function(){}.” Technically, this way is termed as Function Expression.

Standard Function Declaration

Experienced as well as naive developers are using the Standard function declaration way. The syntax is as follows:

The Hoisting concept backs up this function declaration method. If you are wondering what hoisting is? Then let me quickly explain it using a small script.

Here, the function “functionDemo()” invokes before its declaration. But still, the program won’t throw any errors; it is because of the Hoisting Concept. 

The function “functionDemo()” needs to be invoked with its name like functionDemo(); You must note that declaring the function won’t invoke it automatically.

Note: In JavaScript, whenever the interpreter starts working on a new scope, all the variable and function declarations of that scope line up at the top. Therefore, they execute in the first place with the utmost priority. This whole process is termed Hoisting. 

Now, let’s move to Function Expression.

Function Expression

In function expression, you can declare a function using a statement. Apart from this, you can directly store the return value of a function in a variable. 

Function Expression has the following syntax:

You can invoke the function using the variable name with small brackets and semicolons.

Refer to the illustration for a better understanding:

Now, if you try to invoke the function before its declaration, then the system will throw a TypeError: “result is not a function.” It is because hoisting doesn’t work with function expressions. It is only limited to variable and standard function declarations. 

So, that was all about Standard Function Declaration and Function Expression. Now, have a look at the comparison table attached below:

Function Declaration Vs Function Expression – var functionName = function and function functionName

Final Notes

I think now, the standard function declaration and function expression are clear to you. So, you can use any of these based on your use case; Just refer to the table attached above to understand the performance and usage. 

In my opinion, I would recommend using the standard function declaration if you want to create a function and return a particular output. Whereas, if you want a function to pass its return value as an argument to another function, function expression is a perfect solution for you.

Furthermore, if you still have a doubt about the comparison, drop it down in the comments and discuss it further. 

MCQs Related to “var functionName = function and function functionName“