Hosting in JavaScript
Posted By : Rudhishthir Prakash | 26-Dec-2017
Javascript hoisting is basically the way Javascript handles variables and function declarations inside of a particular scope. This can be a global or a local scope within a function. In other words, it moves all the variable declarations to the top of scope and after that it executes everything else.
function localScope(){
console.log(logThis);
}
This will give the reference error as the variable logThis is not defined.
If we do something like this:
function localScope(){
var logThis = "Hello";
console.log(logThis);
}
This will give us the expected result as "Hello".
But when we do this:
function localScope(){
console.log(logThis);
var logThis = "Hello";
}
Instead of giving reference error, this will give the output as "undefined". And this happens because of hoisting.
So, what hoisting does, is it takes all the variables inside of a scope and it moves them to the top before it starts executing.
So, the above code will be equivalent to this:
function localScope(){
var logThis;
console.log(logThis);
logThis = "Hello";
}
As undefined is not technically an error in javascript, your script will continue to execute.
Same goes with function hoisting.
It moves the declaration of the function to the top of the scope and hence, you can use the function before it is declared. For example,
function localScope(){
var logThis = "Hello";
console.log(logThis);
hoisted();
function hoisted(){
console.log("This is the hoisted function");
}
}
The above code will give output as
Hello
This is the hoisted function
The above code is equivalent to:
function localScope(){
function hoisted(){
console.log("This is the hoisted function");
}
var logThis = "Hello";
console.log(logThis);
hoisted();
}
Issues with keyword var:
A variable defined with keyword "var" in javascript gets a function scope. That means a variable declared inside a function will be accessible only inside that function. Whereas, in other languages, variables have block scope, which means if a variable is declared inside an if-else block or for loop block, then it will be accessible only in that if-else or for loop block.
But this is not the case with javascript variables and it just obeys function scope. So, a variable declared inside an if-else block, will be accesible in the whole function it is written inside.
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rudhishthir Prakash
Rudhishthir is a technical enthusiast having experience in C#.NET, NodeJS & various front-end technologies. He has great experience in building quality applications with innovative ideas. He also has proven expertise in handling clients.