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...
For further actions, you may consider blocking this person and/or reporting abuse
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!
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
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!
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.
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
Yup I agree. Semantically it only makes difference with vars, but you descriptions are to the point 👌
Testing comment UI...
2Testing comment UI...
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
Yes this is true... The value will be accessible only after the temp dead zone expires...
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.
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 🦄🦄🦄
Love this entire collection, Lydia. Shared them all in my react native newsletter
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!
Great article! What about const function? ex. const sum = (x,y) => x+y
You may consider it as the "hoisting variable const" situation.
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
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"?
Hi, Lydia~ Very nice articles~ Can I translate this series articles into Chinese, I'll keep the original links~
@lydiahallie This series is really helpful and easy to follow. It explains hoisting in a way that actually makes sense.
I also wanted to mention that the images do not seem to be accessible anymore. They added a lot to the explanation.
Thanks for sharing this!
Also, important thing that arrow functions aren't hoisted. Could be confusing one for somebody.
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!...🙏
Very informative article with amazing GIFs.
How you created these GIFs. Is there any tool or created those animations first than converted to GIFs.
If let initialised with unintialised value then why I get undefined out put when I run this
letis initialized with unitialized during the creation phase, but after that, during the exection phase, (when functions likeconsole.logare executed), it is given its actual value, which in your case is the defaultundefined.Among many superficial JavaScript tutorials and articles, this one really stands out with underlying understanding.
Thanks, Lydia for a simplified & awesome GIF representation.
Lydia you cleared everything what was gibberish before. Really enjoying reading your articles. Keep it up :).
Well Explained! Keep up for the work you have done!!
JS Developers that use only arrow functions do not understand hoisting.
love all of your articles, keep up the great work!
Thanks for visualization, perfect! :)
Awesome content, and really clean explanation.
Thanks for that, and keep up the good work!
Very helpful and to the point!
How did you make these visualizations?
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?
Hi Lydia, please what tool did you use for the visualizations?
Keynote
Thank You so much that actually cleared what hoisting really is
so interesting explanation
Nicely explained. I would like a bit more context on what did you mean by 'execution context'.
I need a MacBook 😭
Good Work, Thanks!
Thanks for the nice article!
This is a great article, Thanks!
crisp and to the point...🔥
Great article!
Thank you for the detailed and well-illustrated explanation.
Could we have a fix on the post please, I am seeing image is nolonger available
@lydiahallie can you add the gifs again, I guess they are not visible now.
I believe I had taken one of your courses on Frontend Masters
Images are broken 😞
👍👍👍
Would you like to share how you prepared this gif?
awesome! very helpful
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?
Amazing article and great explanation (GIF #7 still hasn't been updated)
Stellar content right here
thaank u lydia, such an effort to create such a wonderful series! appreciate it
Excellent explanation & visualization
Awsome article keep it up
Hi, Lydia
Can I translate your series into Arabic on my blog?
@lydia
Very good article.
Thank you so much.