Know JavaScript: Hoisting

JavaScript is a beautiful language with a lot of hidden secrets. Today I will explain a concept called hoisting. This is a very important feature to be aware of, and is one of those wierd things that suddenly happens in your code which is hard to understand and you end up debugging for hours.

Variable declaration hoisting

1. We start with something simple:

var a = "Hello World";
function doSome() {
   alert(a);
}
doSome();

From the code it is easy to see that “Hello World” will be alerted. a is global variable, also available inside the doSome function. No magic here.

2. We add a new local variable a inside the function, after the alert:

var a = "Hello World";
function doSome() {
   alert(a);
   var a = "hi there";
}
doSome();

You might expect that “Hello World” is alerted again, because the local variable a is not defined at the time of the alert. This is wrong. What actually gets alerted is “undefined”.

This happens because variable declarations in JavaScript are hoisted to the top of the function body. The initialization though is not hoisted. The code is thus executed as:

var a = "Hello World";
function doSome() {
   var a;
   alert(a);
   a = "hi there";
}
doSome();

When we write it like this it is easy to read and understand that “undefined” will be alerted in this code.

Function hoisting

Also function definitions are hoisted. This is actually pretty neat because it means we can use functions defined later in the code.

function doSome() {
   doOther();
   //A lot of code
   function doOther() {
      alert("hello world");
   }
}
doSome();

If we execute the code above, “hello world” is alerted. the doOther function is hoisted to the top by JavaScript. This means that JavaScript hoisted the whole function definition for us, making it available “before” it was defined in the code.

But functions can also be assigned to a variable in JavaScript:

function doSome() {
   doOther();
   //A lot of code
   var doOther = function() {
      alert("hello world");
   }
}
doSome();

In the example above we have changed the code to assign an anonymous function to a variable with name doOther. In this example we experience variable declaration hoisting, and we get an undefined exception:

TypeError: undefined is not a function

Summary

1. Variable declarations are hoisted to the top of your scope in JavaScript
2. Whole functions are hoisted to the top of your scope in JavaScript

Always declare variable on the top of your functions.

Want to explore more JavaScript?

I have created a workshop, with examples and tasks. It focus on some of the basic features in the JavaScript language, which all developers should know. It is available on GitHub:

• Presentation: http://ivarconr.github.com/js-workshop/presentation/
• Source: https://github.com/ivarconr/js-workshop