An Explanation of the Concept of Hoisting in JavaScript

JavaScript gives you a lot of freedom in programming which in some cases can also be detrimental your own code.

Other programming languages like C, C++ or Java are much more strict. There, you don’t have much freedom but in turn your end results are almost always predictable.

One of those cases in JavaScript is Hoisting. It’s kind of weird that you are allowed to declare a variable anywhere in a block of code and use it anywhere in the code block even before you declared it. That’s because JavaScript “hoists” variables. In other words, it moves all instances of variable declarations to the beginning of the code block before execution. It’s interesting to note that all instances of declarations are hoisted but no instances of initialization is hoisted even when declaration and initialization take place in one line of code. That means if you declare and initialize a variable,

var x = 5;

in the end of your script, anywhere in the script, your variable exists and is declared but JavaScript knows the value 5 only after the line of code that initialized the variable x.

Well, that’s something that you should understand and take note of, to avoid bugs in your scripts. So to avoid any bugs, declare and initialize all of the variables that you plan to use inside the script in the beginning of the block.