Hoisting is an incredibly important javascript concept to understand, and has been explained by people far smarter than I am. But, being able to show a simple example of how hoisting can totally screw you over is key, and that's what this is example shows.

js-concept-hoisting.js

/**
 * Hoisting
 *
 * Wikipedia Article: http://en.wikipedia.org/wiki/Variable_hoisting#hoisting
 *
 * Hoisting in javascript is pretty simple to understand, and it's incredibly 
 * important to learn to avoid introducing bugs into your code. Essentially, 
 * a variable is scoped to the closest function (not a for loop, not an if 
 * block, a function). This is unlike a lot of other languages where there 
 * are strict scoping rules, but what's actually happening behind the scenes 
 * here is that every variable I've declared (var example, var prop, var 
 * value) is getting "hoisted", or moved, to the top of the function block. 
 * When I say that, I mean the javascript engine is doing that internally. 
 * That means that when you see something like var value, it's actually just 
 * doing an assignment.
 *
 * Example:
 * (function (window, undefined) {
 *   var example = {...}
 *   var prop;
 *   var value;
 *   var declaredValue;
 *
 *   ... some code ...
 *
 *   if (example[prop])
 *   {
 *       value;
 *       declaredValue = null;
 *   }
 * })(window, undefined);
 * 
 * You can see that value isn't actually getting a re-assignment here, but instead 
 * holding on to its old value. If you run this fiddle, you'll see the difference 
 * between declaring your variables and not, and the effects of that.
 */

(function (window, undefined) {
    var example = {
        name: 'Brandon Aaskov',
        phone: 3105551212,
        address: 'Los Angeles, CA',
        gender: 'male',
        dob: 485775060
    };
    
    for (var prop in example)
    { 
        if (example[prop])
        {
            var value;
            var declaredValue = null;
            
            switch (prop)
            {
                case 'name':
                    value = example[prop];
                    declaredValue = example[prop];
                    break;
                case 'phone':
                    value = example[prop];
                    declaredValue = example[prop];
                    break;
            }
    
            log('Undeclared: ' + prop + ' = ' + value);
            log('Declared: ' + prop + ' = ' + declaredValue);
            log('------------------------------------------');
        }
    }
    
    function log (message) {
        var logsElement = document.getElementById('logs');
        
        if (logsElement)
        {
            logsElement.innerHTML += '<p>' + message + '</p>';
        }
        else
        {
            console.log(message);
        }
    }
})(window, undefined);