Hoisting in JavaScript : Hot topic for Interview

Unlike strongly typed languages like Java, C, C++ sometimes JavasScript doesn’t behave the way we expect it to be. Consider below example

console.log(“colour is”, colour);var colour;

The usual expectation here would be Reference error as we are trying to access a variable before it is being defined. But the actual output is

colour is undefined

You would be wondering how is this possible ? before explaining that consider below code snippet with slight modification.

console.log(“colour is”, colour);let colour;

Because of above explanation one would expect output should be colour is undefined, here as well. But the output would be reference error, if we use the const instead of let we will get runtime error. Same variable, because of the declaring process, how the answer is getting altered ?

Hoisting

“Hoisting is JavaScript’s default behavior of moving declarations to the top.” One can relate it with flag hosting, where flag will be hoisted to the top of the pole.

In simple words in JavaScript all the variables that are declared with let, var or const will hoisted or declared at the top of the block during the compilation. Only for those variables created with var keyword the default value will be set to undefined. So after compilation above code looks like below.

var color = undefined; // this is just indicatory
console.log(“colour is”, colour);
var colour;
let colour; // Since there is no default value we will get reference error (this line is just indicatory)
console.log(“colour is”, colour);
let colour;
// Here we get run time error, because when you declare a variable with const it must have a default value. We cannot create a const variable without initial value.
console.log(“colour is”, colour);
const colour;
//Even in this case we get run time error as we are trying to access const variable before it is defined. console.log(“colour is”, colour);
const colour = "red";

Note: Important thing to observe here is JavaScript compiler doesn’t just hoist variables declared with var keyword, it will hoist variables created with let and const also. Just Because the variables are not initialised with default value we get reference error in case of let and runtime error in case of const.

A snippets for practice

var rate = 10function getRate() {  if (rate == undefined) {      var rate = 6;      return rate;   } else {      return 10;   }}console.log("Rate is", getRate());

Most of you think output as Rate is 10; But answer would be Rate is 6. Because in the getRate function inside if condition, there is a variable named rate declared with var keyword. During compilation the rate variable will be hoisted to the top of the getRate() method with default value as undefined. So during runtime the rate == undefined will be set to true and value returned will be 6.

How to avoid above scenarios ?

If your in an interview and you cracked above puzzle, next question interviewer will ask you is, how to resolve this problem. Simplest way to solve is use let instead of var inside the function.

var rate = 10function getRate() {if (rate == undefined) {let rate = 6;return rate;} else {return 10;}}console.log("Rate is", getRate());

Try different combinations with let, const and var. All the best for your learning!!

React Native developer with JavaScript fan. Overall 5 years of Software Experience. Coffee lover, likes travelling and writing.