DEV Community

Javascript Hoisting

Naveenchandar on July 06, 2021

Hoisting is one of the important concepts every javascript or its related frameworks developers should be familiar with. Ever wonder how function c...

Read full post

Kelly Copley • Jul 7 '21

"Let and const are hoisted in block scope whereas var is hoisted in global scope."

Actually var declarations are hoisted in function scope, and variables that are initialized without var, let or const are hoisted globally.

Naveenchandar • Jul 7 '21

Yep missed that one. That depends on the declaration. If that's inside particular block, it'll not get hoisted globally and if not, Let or const will be hoisted globally but due to temporal dead zone we can't access those until initialization.
"Let and const are hoisted in block scope whereas var is hoisted in global scope." -> Whenever we try to re declare a same variable using var inside a specific block, variable will get updated and that's not the same case with let because it is block scope so it will not be available outside the scope.
Example:

let greeting = "Hello";
    if (true) {
        let greeting = "Hi";
        console.log(greeting); // "Hi"
    }
    console.log(greeting); // "Hello"

var greeting = "Hi";
    if (true) {
        var greeting= "Hello!";
        console.log(greeting); // "Hello!"
    }
    console.log(greeting); // "Hello"

Christian Barnabé • Jul 7 '21

Not sure about this

Kelly Copley • Jul 8 '21

You mean you were unsure about this, but then you read my comment. Now you know and are no longer unsure 😉

robencom • Jul 8 '21

so in a nutshell: only variable declarations are hoisted (elevated to the top of the code) to not throw any ERRORS, but of course these variables are undefined; but when it comes to functions, if they are not arrow functions or function expressions, then the function is TOTALLY hoisted.

Naveenchandar • Jul 9 '21

Exactly.

robencom • Jul 9 '21

Great article really. I was recently asked this question in a interview, I blabbered something and even the interviewer didn't understand what hoisting really is, so my answer passed :D but now I know what to say.. MANY THANKS!

Naveenchandar • Jul 9 '21

😊😊😊.

Kelly Copley • Jul 14 '21

This is because all declarations are hoisted. Function declarations are no different than variable declarations, memory must be reserved for them as well.

Andrey Smolko • Jul 7 '21

you said about TDZ:
"It is Time taken between declaring the variable(using let or const) and initializing the variable."
IMHO It will be super useful to mention when exactly let/const variables declaring/creating. The answer - when new scope is instantiated. So TDZ always starts from the first line of the scope and ends at line with let/const a =...

and like for attempt describe hoisting for let/const=)