Back to Top

What is JavaScript Hoisting


Javascript is very powerful language but can easily misunderstand the language. Hoisting is the basic concepts of JavaScript. Understanding of JavaScript Hoisting is simple but very interesting to learn.

Javascript variable declaration has the hoisting mechanism.Today I will explain about the JavaScript Hoisting for further understanding of JavaScript Language.This article improves your knowledge about writing a JavaScript Code and reduce the chances of generating JavaScript Errors.

JavaScript supports different scope variables like global, local etc which can be declared using var keyword for a variable scope.

What is JavaScript hoisting?

You can use the multiple var statement in Javascript function. Usually declaring the var statements act if declared at the top of the function.Hoisting is the act of moving the declarations context to the top of the function. Synonym of hoisting is to lift up and as name implies, it lift (top) the variable declaration to the context of the statement is located.

Here I will show you how you can do JavaScript Hoisting for:

  1. Variable Hoisting
  2. Function Hoisting

1. Variable Hoisting:

Hoisting a Variable Declaration to the top of its declaration context is known as Variable Hoisting.If a variable declaration is not hosited at the top, browser console will report the error.Undeclared variables are always global.

Variables declaration In JavaScript contains two parts:

  1. Declaration itself
  2. Assignment

All Variables declared within the function body is always visible and can be used after the statement.It is basically a JavaScript function Scope for Variable declaration in function so always declare all variables to the top of the function body.


If you declare your variable like this it will alert the value of your variable.

What will the be output of above code? It will give output undefined.You are executing variable assignment statement before it exist.

Now, as per above code, you have declared variable outside the function scope.Then in the function, used alert function for getting value of myvar and you will get undefined because variable is declared in function after it alerted.

Now, Let’s understand how you can hoist the variable:

2.Function Hoisting:

Function declaration scope is also matters in JavaScript.Function hoisting means the function declarations will be elevated to the top of the current scope.

There are two ways to define the JavaScript Function:

1. Function Declaration : Function declaration is the simple way you are using to define the function.

2. Function Operator: Fucntion operator is the another way to invoke the function by operator and function defined at the runtime.

1. Function Declaration

The function object will be created when the javascript parsed before the code is run and that’s why you can call a function created with the function statement before it is declared.

Here in the following code ,will assign the function expression to the variable myfuntion.Function expression is very similar to the function declaration with the same syntax. The main difference between function expression and function declaration is a function name.The function expression ignore the function name and create an anonymous function.

2. Function Operator:

The function operator is very useful way because it’s an expression.The function operator is more flexible than a function declaration because it can be used wherever it is valid to use an expression.

The following example shows an unnamed function which is assigned to the variable.

The function declaration will automatically adds the new function object to the current scope.It also creates a variable with the same name as the function name which points to the function object.

The above code not be executed properly. It will generate error because the function declaration is written after it is called and it will go wrong.So Again, Function declaration follow the lifting(hoisting) mechanism.Here you need to follow hoisting rule.

I strongly recommend that you use the var keyword in the head of every scope.

So how useful did you find this post? Please do let me know your experience or if I am missing something in this article.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

WordPress Template Hierarchy Tutorial

Posted on 3 years ago


Getting Started with LESS CSS

Posted on 4 years ago


How to get all child categories in PHP?

Posted on 4 years ago