DEV Community

Understanding Hoisting in JavaScript

Wissam A on April 28, 2017

You know JavaScript, but do you really know JavaScript? It's a great language, even though some may argue otherwise. Sure, it's got some bad parts,...
Collapse
 
danielescoz profile image
Daniel Escoz

The most important thing to understand about hoisting is that let and const don't have it. It's 2017, unless you are targeting very old browsers or working is some legacy code base, you should not use var ever again.

Collapse
 
imwiss profile image
Wissam A

Thanks for the feedback Daniel!

That's true, ES6 is the future and is what most developers will be using moving forward. That said, it's not entirely true that hoisting doesn't apply to let and const variables. It doesn't apply the same way as for var, but these let and const variables are still hoisted. The difference though is that they cannot be accessed until the assignment is done at runtime.

From ES6's documentation:

The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable’s LexicalBinding is evaluated.

At the end of the day, it's a small technicality where the interpreter applies hoisting to these variables on the compile run but they'll throw reference errors when accessed before the assignment happens, so your point is right :)

I'll update my post, thanks!

Collapse
 
weswedding profile image
Weston Wedding

This is good stuff! Hoisting is definitely one of those language aspects that needs explanation.

I didn't have any hint that it was a thing besides seemingly inconsistent errors, but learned the details because of Douglas Crockford's opinionated JSLint tool telling me I needed to put my var declarations at the start of my functions.

Collapse
 
imwiss profile image
Wissam A

Thanks Weston!

I agree that it's a very important part to understand, otherwise we won't understand why our code behaves certain ways on runtime. Douglas Crockford is definitely one of the best JS experts out there, along with Kyle Simpson in my opinion. I learned so much from the both of them.

Collapse
 
jbwebtech profile image
jbwebtech

Most excellent. Clear. Concise. Logical examples. Great work, thanks!

Collapse
 
imwiss profile image
Wissam A

Thanks, appreciate that! Glad you enjoyed it.

Collapse
 
cperez2187 profile image
Cesar Perez

This was great! Beginner friendly and clear explanation. I will share this with my students. Thanks for this.

Collapse
 
imwiss profile image
Wissam A

Thank you Cesar!

Collapse
 
andrewdtanner profile image
Andrew Tanner 🇪🇺

That took some getting my head around but I understand it, thank you. A good nugget of knowledge worth remembering should a situation ever arise!

Collapse
 
imwiss profile image
Wissam A

Thanks Andrew! Glad you found it helpful.

Collapse
 
oneearedmusic profile image
Erika Wiedemann

Fantastic article - thank you! I vaguely understood there was hoisting, but the use cases make the differences really clear.

Collapse
 
imwiss profile image
Wissam A

Awesome, so glad you found it helpful!

Collapse
 
antonfrattaroli profile image
Anton Frattaroli

Very cool. Did not know that.

Collapse
 
imwiss profile image
Wissam A

Awesome, glad it was helpful! Thanks Anton.

Collapse
 
imwiss profile image
Wissam A

Thanks Mauro!

Collapse
 
veranyc profile image
Vera Zago

Thanks for the great explanation. I'm new to JavaScript and this helps!

Collapse
 
imwiss profile image
Wissam A

Very glad it helped you!

Collapse
 
ex7r3me profile image
eX7r3me

Nice ! I didn't know about it

Collapse
 
imwiss profile image
Wissam A

Thanks, glad it was helpful!

Collapse
 
ajaykarwal profile image
Ajay Karwal

This is great. Hoisting is an issue I ran into just yesterday.

Good to know the order in which things are hoisted. very useful.

Collapse
 
imwiss profile image
Wissam A

Glad it helped :)