has always known to be about scope. In most languages, variables are instantiated where they are declared. However, with JS, standard variable are moved to the top through a process known as hoisting. JavaScript weird C-based declarations Before diving deeper, let’s take a moment to establish the difference between two popular terms that are often improperly interchanged by beginner developers — and declaration initialization . Declaration var x; Initialization x = 5; Now that this is out of the way, let’s talk about what you’re really here for… ! In the example below, we use the variable before it has been declared. This is an example of JavaScript’s hoisting. hoisting x x = 7; // Assign 7 to xvar x; // Declare xconsole.log(x); // => 7 Simple enough? Well, hoisting isn’t as consistent as you’d expect at first. var z = 3;(function() {console.log(z); // => undefinedvar z = 4;})(); Undefined? But before! Wha! Huh? Yup! indeed. Even though the local variable was automatically hoisted to the top of function scope (above the log statement) as expected, its value was still not defined before the log statement’s execution since only declarations are hoisted in JavaScript, initializations. undefined z not Now you see why this can be confusing and promote creating simple errors unconsciously! But don’t worry, we can easily work around this. The moral of the story (pre-ES2015, another article coming soon) is to just keep things simple by declaring all variables at the top. If you found this interesting, consider following me on and , where I share cool code amongst other things. Twitter GitHub
