Hoisting in JavaScript

Code Morning!

Hoisting is one of the features in JavaScript which is either unknown to many programmers or misunderstood. In JavaScript all the declarations are hoisted (moved) up to the top of their scope. This applies to both function and variable declarations. Let’s take a look at variable hoisting first.

Variable Hoisting

If we try to access a variable that doesn’t exist, JavaScript gives an error.

console.log(someNastyVariable); 
// Output:Uncaught ReferenceError: someNastyVariable is not defined

The statement above will result into a reference error as there is no such variable someNastyVariable defined. That seems correct and expected. Now see the example below.

console.log("Value of x before definition: " + x);
var x = 5;
console.log("Value of x after definition: " + x);

// Output:
// Value of x before definition: undefined
// Value of x after definition: 5

To many of the JavaScript programmers this may sound weird as how the variable x can be used before it has been created. Well, that’s where hoisting comes into the picture. When JavaScript interpreter finds a variable declared anywhere in the code, it moves the declaration up to the top of the current scope (function or global scope, whatever the case may be). So the previous example will be converted like this by JavaScript interpreter.

var x;
console.log("Value of x before definition: " + x);
x = 5;
console.log("Value of x after definition: " + x);

Note that only declaration is hoisted and not the initialization. That’s the reason x is undefined in the first console.log statement.

Tip: It’s a good practice to declare all your variables at the top of the current scope (mostly function) to avoid any confusions.

Function Hoisting

Functions are also hoisted similar to variables. See the demonstration.

sayCodeMorning();

function sayCodeMorning() {
   console.log("Code Morning");
}

// Output:
// Code Morning

The function sayCodeMorning is called before it is declared and executes without any error. That’s because function declaration is also hoisted by JavaScript interpreter. When we say function declaration, it’s not just function name but function body as well is hoisted. So the code above will be converted as below.

function sayCodeMorning() {
   console.log("Code Morning");
}

sayCodeMorning();

So far so good. But wait, we have something called function expressions which we use in many scenarios. Does the hoisting take place for function expressions too? The answer is NO. Only function declarations are hoisted, not the function expressions.

console.log(func);
func();
var func = function() {
   console.log("Code Morning");
}

// Output:
// undefined
// Uncaught TypeError: func is not a function

In the sample above, the variable func is hoisted to the top but function definition is not hoisted. So the output of first line is undefined while call to func() results in TypeError.

While it is recommended to declare all the variables at the top of the current scope, this guideline could be ignored for function declarations as many times it is nice to call functions before they are declared to maintain the readability of your program.

The illustration below is perfectly acceptable as it reveals the intent of your code in the first four lines without having to dive deep into implementation details.

wakeUp();
sayCodeMorning();
haveCoffee();
goToWork();

function wakeUp() {
   console.log("Really??");
}
function sayCodeMorning() { 
   console.log("Code Morning!"); 
}
function haveCoffee() { 
   console.log("Okay, get me a cappuccino plz.") 
}
function goToWork() { 
   console.log("Can't I work from home today? :P") 
}

That was all about hoisting in JavaScript. Hope you enjoyed the post. Don’t forget to share if you found the content useful.

You might also be interested in:

Share This:

2 Comments

Leave a Reply