JavaScript Function — Declaration vs Expression

Ravi Roshan

·

Follow

4 min read

·

Dec 24, 2017

--

1

Listen

Share

Functions are considered as First Class citizen in JavaScript and it is really important to be clear with the concept of creating function in JS.

Unlike other programming languages, we can create function in JavaScript using 3 distinct ways :

1. Function Declaration
2. Function Expression
3. Named Function Expression

Function Declaration

function [name](param1, param2, ...param3) {
    // Function Body & Logic
}

In this case, we prefix [function keyword] before respective [function name].
One major advantage of this approach is that the complete function is Hoisted.

Because of that, we can execute the function before declaring it.

It is helpful when you want to abstract some logic into a function body and the actual implementation will be done at some later point of time.

var num1 = 10;
var num2 = 20;var result = add(num1, num2); // ==> 30 [Executing before declaring]function add(param1, param2) {
    return param1 + param2 ;
}

Best practice: Always declare the function first and then execute it instead of relying on JavaScript Hoisting.

Function Expression

Any statement which assigns some value to some other variable is considered as an Expression.

var a = 100;
var b = 'Hello World';

In case of Function Expression, a function is created without any name and then assigned to a variable.

var [name] = function(param1, param2, ...param3) {
    // Function Body & Logic
}foo(1,3,4);

Limitation : Function can’t be executed until defined.

var num1 = 10;
var num2 = 20;var result = add(num1, num2);  
// Uncaught TypeError: add is not a functionvar add = function(param1, param2) {
    return param1 + param2 ;
} 

The below approach will work.

var num1 = 10;
var num2 = 20;var add = function(param1, param2) {
    return param1 + param2 ;
}var result = add(num1, num2); // ==> 30

Named function expressions — Combination of Both Approaches

Now as you understand the differences between the function Declaration vs Expression, let’s explore what happens when we mix both of them.

var num1 = 10;
var num2 = 20;var addVariable = function addFunction(param1, param2) {
    return param1 + param2 ;
}

Pay close attention to the fact that the function is NOT anonymous anymore and having a name as addFunction.
Also, it is assigned to a variable — addVariable.

Now just because you have appended a name to function keyword, that doesn’t mean that it can be executed by that name.

var result = addFunction(num1, num2); 
// ==> Uncaught ReferenceError: addFunction is not defined

Rather, only the assigned variable name addVariable can be used to refer & execute it.

var result = addVariable(num1, num2); 
// ==> 30

Important points to consider:

1. addFunction overshadows the addVariable in call stack of debugging tools.

2. In case of Named function expression, calling addFunction() outside throws error

Uncaught ReferenceError: addFunction is not defined

But you can call it from Inside the function and that will work 🤷🏼‍.

var num1 = 10;
var num2 = 20;var addVariable = function addFunction(param1, param2) {
   var res = param1 + param2;   if (res === 30) {
        res = addFunction(res, 10);
   }   return res;
}var result = addVariable(num1, num2); // ==> 40

In this scenario, we are checking if res is 30.
If so, then calling the same function again by it’s name addFunction with 30 & 10 as parameters which will return 40 as final output.

3. One serious caveat of using Named function expression in IE8 and below is that it mistakenly creates two completely separate function objects at two completely different times (Double take).

If you need to support IE8, it’s probably best to stick with anonymous function expressions or function declarations, but avoid named function expressions.

Hopefully this article was able to give you clear context on the differences between Function Declaration vs Function Expression along with Named function expression.

Please put your thoughts, feedback or queries in the comment section and we can discuss further on that. ✌🏻👋🏼