DEV Community

Cover image for 🔥🕺🏼 JavaScript Visualized: Hoisting

🔥🕺🏼 JavaScript Visualized: Hoisting

Lydia Hallie on November 20, 2019

Hoisting is one of those terms that every JS dev has heard of because you googled your annoying error and ended up on StackOverflow, where this per...
Collapse
 
aminnairi profile image
Amin

Your GIFs are on point! Very good article. I think most of us know or have heard about hoisting but this makes it totally clear in my head now. Keep up the good work!

Collapse
 
jimisweden profile image
Jimi Friis • Edited

It's such a simple thing to explain when looking at yours.. I wonder why so many teach the "Hoisting is often explained as putting variables and functions to the top of the file" - perhaps that's what they learned; perhaps it is the fallacy of thinking "people won't understand because it's complex".
If someone would have asked me to explain hoisting before reading this article I would fall back on that explanation but not really knowing why; now I know better! I have quite good understanding of javascript (for being a mostly C# developer - learning react) and like to know what is going on, one of my favorites in the JS world to read and listen to is Kyle Simpson ('You don't know JS' , + 'Yet') - he is awesome , but you know what.. you, Lydia, are fantastic teacher and a ⭐ on the same sky as Kyle.

I hope you take this advantage to a next level and produce courses on Udemy and/or Pluralsight - I think you could make a fortune (or at least some extra cash) on it 😄

Keep it up 💚 !
//Jimi

Collapse
 
apisurfer profile image
Luka Vidaković

It's a nice refreshment to see gifs that break up the text to digestible chunks while also helping with the visualization. Keep it up!

Hoisting is often explained as putting variables and functions to the top of the file

I can see why it's described that way to some extent. Parser needs to go over the whole file/script, and it only does something meaningful with functions, and vars at first. So at the top of the file, very first line, you already have the access to those identifiers.

Collapse
 
lydiahallie profile image
Lydia Hallie

It’s just important to understand that the parser is not actually physically moving them to the top - as some people like to explain it

Collapse
 
apisurfer profile image
Luka Vidaković

Yup I agree. Semantically it only makes difference with vars, but you descriptions are to the point 👌

Thread Thread
 
shafkathullah profile image
Shafkathullah Ihsan

Testing comment UI...

Thread Thread
 
shafkathullah profile image
Shafkathullah Ihsan • Edited

2Testing comment UI...

Collapse
 
islamhanafi94 profile image
Islam Hanafi Mahmoud

First things first, thank you Lydia for this amazing topic. and I've a question regarding using let.

I think let variables is initialized to with undefined. but due to being in temporal zone it's value is inaccessible.

I tried

let x;
console.log(x); // resulting >> undefind

Collapse
 
swasdev4511 profile image
Swastik Upadhye

Yes this is true... The value will be accessible only after the temp dead zone expires...

Collapse
 
fahim04blue profile image
Shahriar Saleh Fahim

It results undefined because you have initialized the variable 'x' already but haven't defined the variable with any value. This is why it prints out undefined.

Collapse
 
namkwon profile image
Nam Kwon

Great article! What about const function? ex. const sum = (x,y) => x+y

Collapse
 
swasdev4511 profile image
Swastik Upadhye

When it comes to const ... They should be assigned some value at the tym of declaration.... So anyway we will get an error if we try to access them b4 declaration

Collapse
 
beginwithjs profile image
beginWithJS

You may consider it as the "hoisting variable const" situation.

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

Thank you for explaining how it works internally "var brings variables to top" totally makes sense now!

Thank you for sharing! deserves a lot of 🦄🦄🦄

Collapse
 
lfkwtz profile image
Michael Lefkowitz

Love this entire collection, Lydia. Shared them all in my react native newsletter

Collapse
 
matijazx profile image
Matija X

That's reason I love this site. I just learn JS and term hoisting was unknown for me until this moment. I read text above and resolve my doubts. Thx!

Collapse
 
savokiss profile image
savokiss

Hi, Lydia~ Very nice articles~ Can I translate this series articles into Chinese, I'll keep the original links~

Collapse
 
swasdev4511 profile image
Swastik Upadhye

U knw wt, i actually came here from event loop article... Ua articles r very precise n concise... And those gifs 🙌.... I knw that they will definately save reader's tym but it wud hv taken so much tym of urs... I really appreciate the efforts..... Thanks alot!...🙏

Collapse
 
inrsaurabh profile image
Saurabh Ranjan

Very informative article with amazing GIFs.

How you created these GIFs. Is there any tool or created those animations first than converted to GIFs.

Collapse
 
tykhan profile image
tykhan

Also, important thing that arrow functions aren't hoisted. Could be confusing one for somebody.

Collapse
 
sieuthuattoan profile image
Le Quang Hung

thanks for the sharing, this is very clear.
i have an additional question. pls help
what if i just use a variable without declare them anywhere.
like this:

x = 10;
console.log(x);

is the default is "var"?

Collapse
 
kinglouisxvii profile image
Daniel Jakobian

love all of your articles, keep up the great work!

Collapse
 
the_practitioner profile image
Gibran Castillo

Thank you for the detailed and well-illustrated explanation.

Collapse
 
gizelads profile image
Gizela Delgado Soto

Great article!

Collapse
 
sagaryal profile image
Sagar Aryal

Among many superficial JavaScript tutorials and articles, this one really stands out with underlying understanding.

Collapse
 
itsjatin_kumar profile image
Jatin Kumar

crisp and to the point...🔥

Collapse
 
prafulla-codes profile image
Prafulla Raichurkar

This is a great article, Thanks!

Collapse
 
petardotjs profile image
Petar Todorov

Thanks for the nice article!

Collapse
 
mhasan profile image
Mahmudul Hasan

Good Work, Thanks!

Collapse
 
hello10000 profile image
a

I need a MacBook 😭

Collapse
 
khpatel4991 profile image
Kashyap Patel

How did you make these visualizations?

Collapse
 
kingisaac95 profile image
Kingdom Orjiewuru

Hi Lydia, please what tool did you use for the visualizations?

Collapse
 
flow_stackr profile image
aaolayiwola04

Keynote

Collapse
 
miwsyed profile image
Syed Mustafa Naqvi

If let initialised with unintialised value then why I get undefined out put when I run this

 let a;
    console.log(a); // prints undefined.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
davidshindra profile image
davidshindra

let is initialized with unitialized during the creation phase, but after that, during the exection phase, (when functions like console.log are executed), it is given its actual value, which in your case is the default undefined.

Collapse
 
kkroeger93 profile image
Kevin-Kelly Kröger

Lydia you cleared everything what was gibberish before. Really enjoying reading your articles. Keep it up :).

Collapse
 
_rahulpandit profile image
Rahul Pandit

so interesting explanation

Collapse
 
deepanshu188 profile image
Zexu Knub

Thank You so much that actually cleared what hoisting really is

Collapse
 
edwinwong90 profile image
Edwin Wong

Well Explained! Keep up for the work you have done!!

Collapse
 
tiagoha profile image
Tiago A

JS Developers that use only arrow functions do not understand hoisting.

Collapse
 
mathvbarone profile image
Matheus Barone

Awesome content, and really clean explanation.

Thanks for that, and keep up the good work!

Collapse
 
gopinathaa profile image
Gopinatha

Thanks, Lydia for a simplified & awesome GIF representation.

Collapse
 
cyberburi profile image
Buri

Thanks for visualization, perfect! :)

Collapse
 
priyank88544513 profile image
Priyanka Singh

Very helpful and to the point!

Collapse
 
qinlu20 profile image
从此萧郎是路人

Wow, that's a great article.I want to translate your article into Chinese so that more people can see it.Do you agree with me to do this?

Collapse
 
craizytech profile image
Eammon Kiprotich

Could we have a fix on the post please, I am seeing image is nolonger available

Collapse
 
zyabxwcd profile image
Akash

Nicely explained. I would like a bit more context on what did you mean by 'execution context'.

Collapse
 
smi0001 profile image
Shammi Hans • Edited

Declaration is done in let and const too, but it throws RefrenceError and aborts code execution. How to prove that declaration is done in these cases despite of the error?

Collapse
 
taranehk profile image
Taraneh Khalili

awesome! very helpful

Collapse
 
shelf profile image
Mohamed Shelf

Hi, Lydia
Can I translate your series into Arabic on my blog?
@lydia

Collapse
 
fralleee profile image
Roland Chelwing

Amazing article and great explanation (GIF #7 still hasn't been updated)

Collapse
 
divs4u profile image
Daniel Berlin

Stellar content right here

Collapse
 
saleemmalikraja profile image
Saleem Malik

Would you like to share how you prepared this gif?

Collapse
 
iamalaziz profile image
Abdulaziz

👍👍👍

Collapse
 
benzyanezineb profile image
Benzyane-Zineb

thaank u lydia, such an effort to create such a wonderful series! appreciate it

Collapse
 
nurullahturkoglu profile image
Nurullah Türkoğlu

Excellent explanation & visualization

Collapse
 
lordmax profile image
sdacrt

Awsome article keep it up

Collapse
 
buithanhphuongamit profile image
buithanhphuongamit

Very good article.
Thank you so much.