Hoisting in Javascript, the basics

Let me start by saying Javascript is one of my favorite programming languages. It’s an elegant and most importantly a powerful language. It’s an essential language all developers should know when building modern web applications. As with every programming language, there are a few gotcha’s when it comes to writing Javascript, one of those is the idea of Hoisting. The two main hoisting concepts I’ll cover here are variable hoisting and function hoisting.

Variable hoisting

Check out this function below, pretty standard right? we define a named function called thing, which logs to the console a string using data stored in the name and barrier variables.

function thing() {
var name = "Hodor";
var barrier = "door";
console.log(name + ", hold the " + barrier);
};
#-> Hodor, hold the door

You can see the console spits out, exactly what we expect it to “Hodor, hold the door”.

Image this, it’s 4:30pm on a Wednesday… your team leader is pressing to get this amazing feature you’ve been working on finished. In your rush, this same function ends up looking something like this.

function thing() {
var name = "Hodor";
console.log(name + " hold the " + barrier);
var barrier = "door";
};
#-> Hodor hold the undefined

You might be thinking, wait. undefined? shouldn’t the variable barrier throw a reference error? This is an important concept of variable hoisting. Javascript pulls all variable and function declarations to the top of the scope they exist in. Think about that for a second. It pulls the declarations to the top of the scope, not the values associated with those declarations.

Javascript pulls all variable and function declarations to the top of the scope they exist in.

This is what the Javascript interpreter would see when running the function written this way. make sense?

function thing() {
var name = "Hodor";
var barrier;
console.log(name + " hold the " + barrier);
var barrier = "door";
};
#-> Hodor hold the undefined

Function hoisting

As mentioned in the section above, Javascript pulls all variables and function declarations to the top of the scope they exist in. When writing and using functions it’s important to keep in mind this concept of hoisting.

Here we’re declaring the function king and calling it below in the global scope. This look pretty standard.

//defining function
function king() {
console.log("King of the North");
};
//calling function
king();
#-> King of the North

Thanks to this valuable idea of hoisting, calling that same function before the definition produces the same result! The Javascript Interpreter has defined all the functions and variables before any of the functions in the same scope are called! Cooooool

//calling function
king();
//defining function
function king() {
console.log("King of the North");
};
#-> King of the North

What about variable assigned functions? Well, those do not get hoisted and they will throw an uncaught TypeError.

Don’t do this, this won’t work:

king();
var king = function() {
console.log("King of the North");
};
#-> Uncaught TypeError: king is not a function(...)

I hope this brief introduction to hoisting in Javascript has given you a better understanding of how hoisting workings with variables and functions. Better debugging, and better code!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.