Click here to Skip to main content
13,861,515 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 27 Dec 2012
Licenced CPOL

JavaScript var Hoisting

, 27 Dec 2012
Rate this:
Please Sign up or sign in to vote.
JavaScript var hoisting

At a quick glance, what do you think the value of 'y' will be at each alert?

y = 1;
alert(y);            //alert 1
var x = function() {
    alert(y);        //alert 2
    var y = 2;
    alert(y);        //alert 3

When I was first beginning to work in JavaScript, my guess would've been: 'alert 1: 1', 'alert 2: 1', and 'alert 3: 2'; thinking that the global value from before the function would carry into the function until it is reassigned.

The answer is instead '1, undefined, and 2'. This result comes about because of an interesting behavior of JavaScript that I had not come across until yesterday while reading 'JavaScript Patterns'. The behavior is that the JavaScript engine takes two passes over each function scope while running the script.

In the first pass, the function is parsed and all local variables are moved to the top of the function. And the second pass runs it. So in reality, the script looks like this by the time it is run:

y = 1;
alert(y); //alert 1
var x = function() {
    var y;  // < ----- var moved to top of function!
    alert(y); //alert 2
    y = 2;
    alert(y); //alert 3

Notice that 'var y', and not 'var y = 2' was moved to the top of the function. By declaring an unset local variable at the top of the function, the global 'y' variable is overwritten, causing 'alert 2' to be undefined.

In theory, as a JavaScript developer, you shouldn't be polluting the global object with variables such as 'y' anyways, so this issue should not crop up for you. But it is good to know how the JavaScript engine actually parses your scripts. This is a good case for going ahead and just putting all of your local variables at the top of your function, since the JavaScript engine is going to do it anyways. This will reduce unexpected behaviors and is considered a best practice.

If you are interested in looking further into this type of behavior in JavaScript, checkout this blog post, which goes more in depth over JavaScript scope behavior: JavaScript-Scoping-and-Hoisting. Also pick up the book 'JavaScript Patterns' by Stoyan Stefanov. Chapter 2 alone is worth twice the book's listed price.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

joseph donley
Web Developer Element Fusion
United States United States
I am a web developer for Element Fusion living in Oklahoma City, OK. I've been developing in .Net web technologies since the summer of 2009. I enjoy working in Asp.Net MVC along with tinkering with other new web technologies.

You may also be interested in...

Comments and Discussions

QuestionTitle Pin
邱福武28-Dec-12 17:47
member邱福武28-Dec-12 17:47 
GeneralMy vote of 5 Pin
Thomas Daniels28-Dec-12 4:20
mveThomas Daniels28-Dec-12 4:20 
QuestionWays to use this feature to your advantage. Pin
ziggyfish28-Dec-12 2:32
memberziggyfish28-Dec-12 2:32 
GeneralMy vote of 5 Pin
stooboo27-Dec-12 5:15
memberstooboo27-Dec-12 5:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190214.1 | Last Updated 27 Dec 2012
Article Copyright 2012 by joseph donley
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid