Vivek Sharma's Blog
Variable Hoisting in Javascript

Variable Hoisting in Javascript

Vivek Sharma's photo
Vivek Sharma
·

4 min read

Introduction:

This article is in continuation of my previous article: Javascript Variable Scopes

Hoisting is a tricky and very important topic in javascript. Lot of questions asked in javascript interviews are based on hoisting.

In this article, we will go through variable hoisting in javascript and see how it affects the desired output.

So, let's not wait further and dive into concept of hoisting.

What is Variable Hoisting?

Hoisting is a JavaScript mechanism where variables declarations are moved to the top of their scope before code execution.

This means when javascript engine compiles your code, all variable declarations using var are lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made.

Basically, it gives us an advantage that no matter where variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. It allows us to use variables before it is declared in our code.

The following example declares variable studentName and assign value John to it:

console.log(studentName);  // usage
var studentName = 'John';    //declaration & assignment

What will be the output of above code?

  1. Uncaught ReferenceError: name is not defined
  2. John
  3. undefined

It turns out that third option is correct answer.

Explanation:

In the above code, we tried to console the variable studentName which was declared and assigned later then using it, the compiler gives us undefined which we didn’t expected as we should have got ReferenceError as we were trying to use studentName variable even before declaring it. But the interpreter sees this differently, the above code is seen like this:

//how interpreter sees the above code 
var studentName; 
console.log(studentName);  // undefined 
studentName = 'John';

Things to note here:

  • Variable declaration studentName is moved to top.
  • Only thing that gets moved to the top is the "variable declarations", not the actual value given to the variable. Therefore, output is undefined instead of John.

ES6: let & const keywords. Are these also hoisted?

Variables declared with let and const are also hoisted. Where they differ from other declarations in the hoisting process, is in their initialisation.

Let's look at an example:

console.log(studentName);  // ReferenceError: studentName is not defined 
let studentName = 'John';

Why this error?

Variables declared with let, const, and class are hoisted but remain uninitialised. These variable declarations only become initialised when they are evaluated during runtime. The time between these variables being declared and being evaluated is referred to as the temporal dead zone. If you try to access these variables within this dead zone, you will get the reference error above.

  • JavaScript runs its compilation phase and sees let studentName, hoists that variable, but does not initialise it.
  • Next, in the execution phase, console.log() is invoked and passed the argument studentName.
  • Because the variable has not been initialised, it has not been assigned a value, and thus the reference error is returned stating that studentName is not defined.
console.log(studentName);  // ReferenceError: studentName is not defined 
const studentName = 'John';

Much like the let keyword, using const before declaration throws a Reference error.

Hence, to err on the side of caution, we should declare then assign our variables to a value before using them.

Summary:

  • JavaScript hoisting occurs during the creation phase of the execution context that moves the variable declarations to the top of the script.
  • While using var, trying to use undeclared variables will lead to the variable being assigned a value of undefined upon hoisting.
  • While using es6 let and const, using undeclared variables will lead to a Reference Error because the variable remains uninitialised at execution.
  • We should make it a habit to declare and initialise JavaScript variables before use.

That’s it for now. Thank you for taking time to read this article. Do provide feedback and comments. I’ll cover more topics like difference between var, let and const in upcoming posts. Keep following!

JavaScriptES6jsvariablesHoisting