When studying Javascript, there's a curious mechanism that you're likely to come across called hoisting.
In Javascript, hoisting is when variables and function declarations are moved to the top of their scope. They are moved to top before they're even initialized.
What does this mean?
This means that in Javascript, you could technically do the following with var without throwing an error:
Why doesn't the first line throw an error? The variable of animal has not been declared yet it seems, yet the first line does not throw the Reference Error we would expect. This is because variables declared with var are hoisted.
During hoisting, when var variables are declared, they are "moved to the top". The initializations, their values, are not.
Therefore, in the previous example, by the first line, Javascript already knows that var animal exists; it just doesn't know its definition yet. In other words, it knows of its declaration, but it doesn't yet know how you initialized it. Hence, it first evaluates to undefined.
What about the more commonly used let and const? Well, if you tried to do the same as above, you'd be out of luck. Variables declared with let & const are not hoisted.
Above, we see that with let and const, trying to access the variable beforehand would throw the Reference Error: Cannot access 'animal' before initialization.
What about functions?
Well, functions are hoisted as well:
In the function above, you can call the function on the line(s) before the declaration and initialization. But even better, calling a function won't evaluate to undefined! When you call a function on a line above the declaration, you will have full access, meaning the function will evaluate to however you initialized it. In this case, bark evaluates to "ruff ruff" on the first line. Great!
But wait... it's not that simple...
Function expressions* stored with var are hoisted similarly to the very first example.
The first line would get a Type Error. Like the first example, Javascript sees the variable cat, as undefined. However, calling a function on undefined creates an error, a Type Error.
Overall, hoisting is an interesting feature of Javascript that programmers should be aware of. However, it's not a mechanism we should ever rely on.
Best practice is declare and initialize Javascript variables at the top of your scope. This way, it's easier to read, understand, and it'll prevent this funky Javascript behavior from being a factor in the outcome of your code.
Top comments (2)
Just to add clarity - The compiler executes the script in 2 phases. In the first one it allocates and defines all variables it finds including
var,letand evenconst. In the 2nd phase it runs the code line by line thereby giving a feeling that declarations were moved to top. There is no such script alteration at runtime.Yes, well said! Thank you for this.