Web Development

JavaScript Hoisting

JavaScript Hoisting is section 15 of Beginner’s Guide to JavaScript.

Hoisting is an unknown or overlooked behavior of JavaScript. If a developer doesn’t understand hoisting, programs may contain bugs. So what is this hoisting.

Hoisting is JavaScript’s default behavior of moving declarations to the top.

Look at the following examples for better understanding.

[code languague=”js”] x = 5; // Assign 5 to x

elem = document.getElementById(“demo”); // Find an element
elem.innerHTML = x; // Display x in the element

var x; // Declare x
[/code]

In the above code segment variable declared after it has been used. In JavaScript a variable can be used before it has been declared.

[code language=”js”] var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById(“demo”); // Find an element
elem.innerHTML = x; // Display x in the element
[/code]

And this code segment demonstrate the other way. Declare and then use. Both segments work as the same. Can this happen? To understand this, you have to understand the term “hoisting”.

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope. This can be either to the top of the current script or the current function. So wherever you declared the variable, declaration moved to the top. But remember JavaScript only hoists declarations, not initializations.

[code languague=”js”] var x = 5; // Initialize x

elem = document.getElementById(“demo”); // Find an element
elem.innerHTML = x + ” ” + y; // Display x and y

var y = 7; // Initialize y
[/code]

In the above example, y is displayed as undefined. This is because only the declaration (var y), not the initialization (=7) is hoisted to the top. Because of hoisting, y has been declared before it is used, but because initializations are not hoisted, the value of y is undefined. If we demonstrate the above code segment after hoisting it will look like this. See, it only moves the declaration of y, but not the initialization 7. That’s why y is undefined when it was used.

[code languague=”js”] var x = 5; // Initialize x
var y; // Declare y

elem = document.getElementById(“demo”); // Find an element
elem.innerHTML = x + ” ” + y; // Display x and y

y = 7; // Assign 7 to y
[/code]

Anyway to avoid bugs, always declare all variables at the beginning of every scope. Since this is how JavaScript interprets the code, it is always a good rule. Remember is you are using ‘Strict Mode’, that we discussed in the previous section, JavaScript in strict mode does not allow variables to be used if they are not declared.


What’s Next?

Learn what includes in JavaScript Conditional Statement

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW