Jennifer Bland header image
≡ Menu

How Hoisting in JavaScript Can Cause Unexpected Results

Your can experience unexpected results in your JavaScript programs due to execution that does not occur like you expected. A good example of this is that you can actually use a variable in JavaScript before you declare it. Here is an example:

x = "Jennifer";
for (var i = 0; i < 10; i++) {
  console.log(i);
}

var x;

JavaScript allows this code to function due to a concept known as "hoisting." Hoisting the default behavior of a JavaScript application once it executes.

Within the current scope in a JavaScript application, all variables are "hoisted" to the top regardless of where they are declared.

The tricky part is that only the declaration of the variable will be hoisted. If the variable is also initialized, the variable will be set to undefined when it is hoisted to the top. The variable value is changed from undefined to its initialized value when the execution reaches the variable.

Let me give you some examples of how hoisting can cause some unexpected results.

var firstName = "Jennifer";
alert(firstName); // 'Jennifer'

In the example above the alert will say "Jennifer" just as we expected. What do you think the alert will display in the following example?

var firstName = "Jennifer";
alert(firstName + ' ' + lastName);
var lastName = "Bland";

If your answer was the alert would display "Jennifer Bland" then you would be wrong. In reality it actually displays "Jennifer undefined".

When the execution starts the variable declarations are hoisted to the top so the code would look like this

var firstName;
var lastName;
alert(firstName + ' ' + lastName);

As the code steps through each line during execution it will actually assign values to the variables as they are initialized. So on the first line it will assign the value of "Jennifer to the firstName variable.

Then the second line is executed. The variable lastName was hoisted to the top at the start of execution and assigned a value of undefined.

When the alert is executed it will display "Jennifer undefined" since only the firstName variable has been initialized.

Now let's compare the results of the following code.

var firstName = "Jennifer";
alert(firstName + ' ' + lastName);
var lastName = "Bland";
alert(firstName + ' ' + lastName);

The first alert will display "Jennifer undefined" as we have seen previously. The second alert will display "Jennifer Bland".

The reason is the variable lastName is initialized when it is reached in the execution. Since it is initialized it will be displayed properly in the second alert message.

How to Avoid Hoisting Problems in JavaScript

The easiest way to avoid hoisting problems is to declare all variables at the beginning of the scope. In fact this is considered a JavaScript programming Best Practice.

You Might Want to Read

by Jennifer Bland

I am a Google Developers Expert. Entrepreneur. Mountain Climber. Neil Diamond fanatic. World traveler. MBA grad. Software Engineer. Interested in hiring me? Contact me at ratracegrad@gmail.com

0 comments… add one

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.