What is Hoisting in Javascript

In this article I will explain as easy as possible what is JavaScript hoisting. If you are using in JavaScript, it will definitely be a nice thing to know, also if you are applying for any JavaScript position, this question is very likely to be asked. It is crucial to know fundamentals in development, that’s why this will for sure benefit you, so I encourage you to spend the next 10 minutes to really understand it deeply.

The Definition of Hoisting

Hoisting is Javascript’s interpreters action to move all of the variable and function declarations at the top of the current scope.

You might have heard that variable and function declarations are moved to the top, and in order to understand how the code is interpreted, it’s a quite good opinion to have, but it is also important to know what actually happens, and here it is:

JavaScript interpreter is not actually moving the code, it stores variable and function declarations in memory during the compiling.

Now that you know the definition, let’s look into code for you to understand it better.

Variables

So, let’s look at this example:

console.log(a);

This alone, will throw the following errror:

"ReferenceError: a is not defined at hacidorofu.js:1:43 at https://static.jsbin.com/js/prod/runner-4.1.4.min.js:1:13924 at https://static.jsbin.com/js/prod/runner-4.1.4.min.js:1:10866"

This is self explanatory, the variable is not defined, let’s look at this code:

console.log(a); // undefined var a = 5;

Now it says undefined, no error. So undefined and is not defined is not the same.

a is not defined — means that the variable doesn’t exist undefined — means that the variable does exist, but it is not defined, it doesn’t have a value

This is hoisting in action. here is what happened:

Your code:

console.log(a); // undefined var a = 5;

How JavaScript interpreter sees it:

var a; console.log(a); // undefined a = 5;

So JavaScript hoisted the declaration (var a), not the initialization (= 5). So again:

JavaScript hosts only declarations not initializations.

Let’s look at another example, just to make sure it’s clear:

console.log(a); // undefined var a = 5; console.log(a); // 5

Functions

With function it’s very similar, let’s look at this example:

sayHi(); // Hi! function sayHi() { console.log('Hi!'); }

So function declaration gets hoisted to the top. What would happen if we would define a variable as this function?

sayHi(); // TypeError: sayHi is not a function var sayHi = function() { console.log('Hi!'); }

That’s because interpreter “moved” the declaration at the top:

var sayHi; sayHi(); // TypeError: sayHi is not a function sayHi = function() { console.log('Hi!'); }

So again, in this example the fact stays the same: JavaScript hosts only declarations not initializations.

Best Practices

1. Declare all of the variables and function at the top of the scope. That is the best practice mentioned in “JavaScript: The Good Parts” by Douglas Crockford. 2. In ES6 we got const and let, if you are using ES6, use those instead of var, because these ones are not hoisted. With var you have to be more careful and have the hoisting in mind. It will be handy if you will need to maintain a very old JavaScript application, that doesn’t have const and let.