Learn JavaScript Hoisting In 5 Minutes

Hoisting. It is the word everyone throws around when talking about JavaScript, yet no one takes the time to actually explain what hoisting is, how it works, and why it is important. In this video I will be explaining everything you need to know about hoisting so next time someone mentions it you can understand exactly what they mean.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:30 - Hoisting Functions
03:15 - Hoisting Variables

#Hoisting #WDS #JavaScript

[StrayKev]

2:34 - 3:00 let and const are hoisted
MDN web docs:
Variables declared with let and const are also hoisted but, unlike var, are not initialized with a default value. An exception will be thrown if a variable declared with let or const is read before it is initialized.

Example:
function foo(){
console.log(bar)
}

let bar = 1
foo(); //output: 1

[colinb]

I would really recommend people going to the MDN documentation. There’s some weirdness of hoisting that they give good examples of. Especially in concern of block scopes.

[muhebollahkhandaker]

When running the JS code, a global execution context is created. It is created in two phases:

1. Creation Phase
Creation of the Variable Object
Creation of the Scope Chain
Setting the value of this keyword

2. Execution Phase
Runs code line by line.

[buondevid]

let and const are actually hoisted, you get a reference error if you try to access them in their TDZ (i.e. Temporal Dead Zone) which is different from them not being hoisted at all

[alexjohnson-bassworship]

Kyle - I think you did a great job, and I think you're right. The point of a video like this is to give the general overview to someone who does not understand what the concept is and to simplify it. If they would like to know more, there are always docs that they can go look at elsewhere. I also know you like to do your blog posts so I'm sure you will do one at some point on this topic if you haven't already. All in all, disregard the people who have to make it such a big deal to write negative comments when you clearly created such an amazing channel that has helped individuals like me learn way more than I ever thought I could learn without formalized education. Keep it up, my man!

[bryanthompson]

Good simplified explanation. Brad at Traversy Media deep dives the JavaScript engine in his JavaScript Under The Hood series if you want a more thorough understanding of hoisting

[kenbinta]

A daily dose of Web Dev Simplified makes one a better programmer

[Rafpsplayer]

As always super clean and concise in explaining the concepts; you are great!

[robertholtz]

I know there is a lot of recent hate for var because const and let are more precise in their scoping. That said, in my opinion, there are still valid use cases for choosing var over let. If you want to make sure a variable or variable-function is always scoped globally, var is still a good way to go. That, of course, gives rise to the argument against the use of globals in general but that's a separate debate. Global scoping actually removes code complexity if you use it properly and sparingly.

[marna_li]

It all comes down to the history of JavaScript and how Var and Function is implemented. These constructs are members of the enclosing Function object or Global object - to which the variable is scoped. Vars are not scoped to blocks.

Since JavaScript runs from top down the Var statement is not executed until the line is hit and the member not created until then. Function declarations are treated differently, detected when the code is parsed, and the identifier/name is hoisted. Let and Const are later inventions that are implemented a bit differently and don't result in members on the enclosing object. That is why they are not hoisted.

[mohibniazi]

sir your way to explain hoisting in 5 min is amazing because hoisting is hard to understand but you made it just a piece of cake

[yahyasalimi]

Pro tip: You can use ALT + up/down to move line of code up or down instead of cutting and pasting

Btw very good video, it really helped to understand the topic

[urjaangre]

Clear and to the point explanation. Thank you soo much!

[BostYT]

I didn't know people got confused on this. It's really a simple concept.

[SAKSHIKUMARIP]

u break down evry complex concepts..keep uploading more such js huge respect...

[ukaszzbrozek]

The way how hoisting works is that there is a creation phase when the code is executed where all declare values in certain scope are initilize. There is no moving code around.

[elhadjbabacarcisse]

Thank u so much. I was planning to learn about it but with this video i'm pretty sure i understand it all

[jossani]

Really good explanation about the topic, also i really love your content, you are helping me become a greater developer, thanks Kyle

[marimuthur]

It's very easy to understand thank you so much for your explanation about hosting 😊👌🏼👌🏼👌🏼👌🏼👌🏼

[Eeebee]

You are the best coding teacher on youtube👍👍