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:
- Variable Hoisting
- 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:
- Declaration itself
- 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.
Example:
1 2 3 4 |
If you declare your variable like this it will alert the value of your variable.
1 2 3 4 5 6 7 | var myvar = "global value"; (function () { alert(myvar); var myvar = "local value"; }) (); |
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:
1 2 3 4 5 6 7 8 | var myvar = "global value"; (function () { var myvar; // variable declaration hoisting alert(myvar); myvar = "local value"; }) (); |
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
1 2 3 4 5 6 | myfunction(); function myfunction(){ alert('Calling function'); } |
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.
1 2 3 4 5 6 | myfunction(); // Uncaught TypeError: undefined is not a function var myfunction = function (){ alert('Calling function'); } |
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.
