Find the best tutors and institutes for Java Script Training

Find Best Java Script Training classes

Please select a Category.

Please select a Locality.

No matching category found.

No matching Locality found.

Outside India?

Search for topics

What is hoisting in Javascript?

Simran K.
10/07/2018 0 0

As a matter of fact it is, javascript is an interpreted language and the javascript interpreter performs a lot of mystical stuff behind the scenes. Hoisting in JavaScript is certainly one of them. A quick Google search shows, the term means to raise or haul up.

Something like this:

Hoisting in javascript

Think of the crane as the javascript interpreter here ð??? ð???

 

Think of variables and functions in javascript as a result of two small but important steps, declaration and initialization.

Declarations and Initializations:

 
1
2
3
var sampleGlobalVar; //declaration
sampleGlobalVar = 2; //initialization
var sampleInitializedGlobalVar = 1; //declaration and initialization in one straight step

 

In above piece of code,

1. The first line declares a variable called sampleGlobalVar.
2. The second line initializes or assigns the value to the variable sampleGlobalVar.
3. The third however, both declares and initializes the variables named sampleInitializedGlobalVar.

What we need to keep in mind is that variable declaration and initialization are always two different steps for the javascript interpreter. Even though we have the syntactic sugar to declare and initialize the variables in the same line, interpreter would still see it as a two step process identifying the declaration and initialization parts from the statement.

But you must ask,

What is hoisting in JavaScript?

Going by the definition, Hoisting is the process of moving the variable and function declarations to the top of their scope.Please note that we are referring here to the scope in which functions and variables are first declared which could be local or global.

You should also know that Javascript does not have block scopes

 

Resuming our discussion on hoisting, javascript interpreter would essentially be moving the declarations(always) to the top of the scopes in which they are declared.
For example: Assume we have this simple code in javascript,

 

 
1
2
3
4
5
6
7
8
9
var sampleGlobalVar;
sampleGlobalVar = 2;
var sampleInitializedGlobalVar = 1;
 
function xyz(){
console.log("Inside the function in javascript");
var sampleLocalVar = 3;
console.log("local variable", sampleLocalVar);
}

 

What interpreter does is something like this and this is what you get from hoisting in JavaScript:

 

 
1
2
3
4
5
6
7
8
9
10
11
var sampleGlobalVar; //declaration
var sampleInitializedGlobalVar; //declaration hoisted
sampleGlobalVar = 2;
sampleInitializedGlobalVar = 1; //initialization essentially remains where it was
 
function xyz(){
var sampleLocalVar; //declaration hoisted
console.log("Inside the function in javascript");
sampleLocalVar = 3;
console.log("local variable", sampleLocalVar);
}

 

But why is this important for us to understand? How does it matter to a developer if javascript interpreter performs hoisting.Let’s see that!

 

 
1
2
3
4
5
var sampleVar = 4
function xyz(){
console.log("variable hoisting demo", sampleVar);
var sampleVar = 8;
}

 

Output:
undefined

Surprised? Well, Don’t be!

Even though sampleVar has clearly been declared and initialized before trying to console its value inside the function xyz, it still outputs undefined.
First question: Why?
Hoisting.

Second question: How?
Shadowing.

Let’s see what is interpretor doing to our last piece of code: (This is an example of hoisting in JavaScript)

 

 
1
2
3
4
5
6
7
var sampleVar;
sampleVar = 4
function xyz(){
var sampleVar;
console.log("variable hoisting demo", sampleVar);
sampleVar = 8;
}

 

We are getting closer now. Javascript interpreter moved the sampleVar declaration to top of each of its scope.

Having sampleVar moved to the top of its global scope did not create any difference in this particular example, but hold on buddy! Keep going.

Hoisting of local sampleVar certainly did create a lot of difference because of Shadowing. Shadowing is yet another concept to understand here.
Since shadowing is responsible for “masking” the value of global variable if a variable with the same name has been defined “locally”, var sampleVar; (undefined only yet) here masks the global value 4 which is why we get undefined consoled out inside of the function.

0 Dislike
Follow 2

Please Enter a comment

Submit

Other Lessons for You

Advantage of Node.js over Angularjs
i. Nodejs helps a user to develop scalable network applications. It delivers efficiency along with with event-driven, non-blocking I/O model, which has been proved ideal for real-time data-intensive applications....

Suprio Dutta | 20 May

0 0
0

How can everyone prepare to clear any Java interview?
Java interview your java should be much strong then J2EE. core java and Advance java is the basic foundation for Interview. Some of the topic about which you should know before going for a java interview...

Javascript basic Interview Questions
Check below logical operators var a = false && 'Cat'; false var b = 'Cat' && 'Dog'; dog var c = 'Cat' || 'Dog'; cat var d = !true; false var e = !false; false what are...

Malyala Srinivas | 08/06/2018

0 0
0

Angular 1 vs Angular 2
Angular team has released the angular 2, which has drastically change the way programmers interact and work with Angular framework in the past. In this post I will tell you the common changes made by...

Shibaji Debnath | 13/02/2018

0 0
0

What Is Mean Stack? Why Mean Stack Is Popular Now?
Mean Stack is standing for MongoDB, ExpressJS, AngularJS and NodeJS. These four javascript solutions create a high performing web application. Mainly JavaScript is the frontend language. It’s working...

Shibaji Debnath | 13/02/2018

1 0
0

Looking for Java Script Training classes?

Find best Java Script Training classes in your locality on UrbanPro.

Are you a Tutor or Training Institute?

Join UrbanPro Today to find students near you
Sponsored

Find Best Java Script Training classes?

Find Now »

UrbanPro.com is India's largest network of most trusted tutors and institutes. Over 25 lakh students rely on UrbanPro.com, to fulfill their learning requirements across 1,000+ categories. Using UrbanPro.com, parents, and students can compare multiple Tutors and Institutes and choose the one that best suits their requirements. More than 6.5 lakh verified Tutors and Institutes are helping millions of students every day and growing their tutoring business on UrbanPro.com. Whether you are looking for a tutor to learn mathematics, a German language trainer to brush up your German language skills or an institute to upgrade your IT skills, we have got the best selection of Tutors and Training Institutes for you. Read more