alt text
Benjamin Thomson
Web & UX Designer

Drink A Coffee With Me Today

Loading...
Success!
Error!

Follow On Instagram

Mayank Gupta (+91-9711083089)
Menu
Close

Function and Variable Hoisting

The article shall give an overview of "Variable and Function Hoisting Concepts".


Making Variable and Functions available even before its Declaration is called Hoisting.


Both Functions and Variables can be Hoisted.


The Article shall help you understand the following Concepts:

1. Difference between Variable Declaration and Variable Definition

2. What is Variable Hoisting.

3. Difference between Function Expressions and Function Expressions

4. What is Function Hoisting.

5. Why Function Expressions are not Hoisted.

6. Order of Variable and Function Hoisting.


We shall cover all the topics in detail, so that we could have clear understanding of all these concepts.


Variable Declaration and Definition:

We need to understand the concept of Variable Declaration and Definition to understand Hoisting.


Lets consider the following piece of code:


console.log(Employee);

In the above code we have not provided any Declaration and Definition for the variable "Employee".


Therefore, if the variable is accessed, "ReferenceError: Employee is not defined" error shall appear.


This simply means that:

1. JavaScript compiler has no idea about any implementation of variable "Employee".

2. When the variable is encountered in the code it cannot find any reference to the specified variable.

3. Since no reference can be found, it returns "Null Reference Error".


Lets look into details of Declaration and Definition in order to understand Hoisting in Detail.


Variable Declaration:


var Employee;

This is a simple Variable Declaration.


Variable declaration simply signifies that a variable with name "Employee" is containing a reference.

This declared variable shall be accessed shortly. Therefore JavaScript creates a reference for the same.

Although in the above declaration, we are not providing any value to the variable.



console.log(Employee);

// output: undefined

In above code the variable is declared without any value assigned to it.

Since we dont have any value assigned, an implicit value "undefined" shall be assigned to it.

The value "undefined" shall signify that we still need to define / initialize the value of variable.


**Note: we will shortly examine case where Declaration and Definition shall be provided in same line.


Variable Definition / Initialization:

Variable Definition is assignment of a value to a variable.


var Employee; // Variable Declaration

Employee = "Mayank"; // Variable Definition

console.log(Employee); //output: Mayank

Variable Definition gives value to the variable.


The variable Reference is now assigned some value instead of "undefined"



var Employee = "Mayank";

console.log(Employee); //output: Mayank

In the above code, Declaration and Definition of the variable is provided in a single line of code.


Now since we have understanding of Function Declaration and Definition, we can now move to Hoisting.


Variable Hoisting


console.log(Employee);

var Employee = "Mayank"; 
In the above code the variable "Employee" is refered even before it is initialized.


What output do you expect ?

If you are not aware of Hoisting Concepts, we would expect that ouput shall be "Null Reference Exception".


Since there is no prior reference to "Employee" Object when compiler tries to run Line 1


But lets see what is the output of the program:


console.log(Employee); // Output: undefined

var Employee = "Mayank";

Here we can see that the output is "Undefined", rather we expected it to be a "Reference Error".


Why "Undefined" instead of "Reference Error" ?

The reason why the output is "Undefined" is because of Variable Hoising.


Variable Hoisting shall move the Variable Declaration to the top of the execing function.


Since the variable declaration is moved to the top, it is assigned a value "undefined"

Hoisting the declaration on the top makes it available to be accessed, even before the variable is declared.


**Note: Only Function declaration moves to the top, Declaration shall still remain at the same place.

** Also if Declaration is moved to the top, variable is assigned the value at "undefined"


The above function call is equivalant to:


var Employee;

console.log(Employee); // Output: undefined

Employee = "Mayank";

Here the Hoisting is moved to the top of the function.

Therefore when we display the output, it displays: "undefined" rather than giving a "Reference Error".


** Only Variable Declaration are Hoisted

It is important to note that only variable declaration moves to the top and not variable declaration.

Lets understand this with an Example:


console.log(Employee);

var Employee = "Mayank";

console.log(Employee);

Here we can see that the variable is declared and defined in the same line of code.


What output do you expect in this case ?

Since now we know that the variable are hoisted, so "reference Error" shall not be encountered.

So what output do you expect: "undefined" or "Mayank". Lets see the output

The above code id equivalent to the following code after Hoisting:


Line 1: var Employee;

Line 2: console.log(Employee); // output: undefined

Line 3: Employee = "Mayank";

Line 4: console.log(Employee); // output: Mayank


As stated earlier, only the variable declaration is hoisted, variable definition is not Hoisted.

Therefore the variable Definition shall still remain at the same place, but the declaration shall be Hoisted.


We can derive following Conclusions from the above Discussion:

1. Since the variables are Hoisted, Line 2 didnt encountered any Reference Error.

2. The Variable is Hoisted on the top and it is assigned the value "undefined"

3. Function shall output "undefined" at Line 2

4. Variable Declaration shall still remain at Line 3. So the value "Mayank" is assigned instead of "undefined"


This is how Variable Hoisting takes place inside JavaScript


Now lets move to the implementation of Function Hoisting

Function Definition and Function Expressions:

In order to understand the concept of function Hoisting, we need to first understand the following:

1. Function Expression

2. Function Declaration


Function Definition:

Lets look at a very simple "Function Definition":


function demoFunction(){

  alert("This is the function Definition");

}

So the simplest way to understand "Function Declaration" is that, it starts with "function" keyword.

The benefit of Function Definition is that they are "Hoisted" by the JavaScript Compiler.

Functions are automatically Hoisted on the Top of the scope by the compiler, hence making it available to be called, even before it is declared.

This can be understood by this small example:


demoFunction();

function demoFunction(){

  alert("Function is already Hoisted");

}

Here the function definition "demoFunction" is hoisted at the top by default, making it available to the user to be called even before the Declaration of the Function.

The above piece of code is equivalent to:


function demoFunction(){

  alert("Function is already Hoisted");

}

demoFunction();


Function Expressions:

"Function Expression" would be any function defined which does start "function" keyword.

Another way to define a function expression is to assign a function to a variable.

This is another common way to create a function apart from the "Function Declaration" Syntax above.


var demoFunction = function(){

  alert("This is function Expression");

};

Since the above function does start the keyword "function", its a "Function Expression"

The above code assigns a function definition to a variable "demoFunction".

This would mean that the variable "demoFunction" shall now represent a function definition.

The function can now be called using following line of code: "demoFunction()"


Another example of Function Expression is an IIFE:


(function(){

  alert("This is function Expression");

})();

Here also, we can see that the line of code does not start with "function" keyword, therefore its a expression.


Function Hoisting:

Now, since we are familier with the Function Expressions and Function Declaration, lets understand "Hoisting".


Function Hoisting is a concept where just like variables, functions are Hoisted on the top of the Scope.


Any function Declaration is Hoisted on the top of the Scope.


This can be understood by this small example:


demoFunction();

function demoFunction(){

  alert("Function is already Hoisted");

}

The function Declaration shall be Hoisted on the top.

The above piece of code is equivalent to:


function demoFunction(){

  alert("Function is already Hoisted");

}

demoFunction();


** Note: The Hoisting takes place only for Function Declarations. Function Expressions are not Hoisted.


Why Function Expression are Not Hoisted ?

Now since we are familier with the basic concept of Variable and Funation Hoisting, lets evaluate how compiler evaluates a simple function Expression.

Lets consider the following Example:


demoFunction();

var DemoFunction = function(){

  alert("Function is already Hoisted");

}

In the above code, we have a simple function Expression, function is called before the DemoFunction is declared.


Lets see how this code is Hoisted


var demoFunction;

demoFunction();

demoFunction = function(){

  alert("Function is already Hoisted");

}

We can derive following results from the above Example:

1. The above Example can be seen as an example of Variable Hoisting

2. Variable "demoFunction" is assigned a function expression.

3. In this case variable "demoFunction" shall be hoisted on the top instead of function expression.

4. Since the variable is hoisted and not the function, we cannot access the function Expression


Conclusion:

Important Concepts to remember are:

1. Variables are Hoisted at the Top of the Function

2. Hoisted Variable shall take "undefined" as it value

3. Variable Definition shall not be Hoisted (only Declaration)

4. Function Definitions are Hoisted.

5. Function Expressions shall not be hoisted.

6. If we want functions to be Hoisted, use function Declaration instead of Function Expression.






{{Count}} Comments

{{comment.user}}

{{comment.message}}

{{comment.date.substring(0, 10)}}

Leave A Comment

;