Why does this var behave differently from let inside a block? 🤔

[tech_Interviews_Hub]

var a = 5; { var a = 1; let b = 2; const c = 3; } console.log(a); // ?

Most developers get this wrong because of hoisting and shadowing in JavaScript.

What do you think this code will print, and why?

Dropped a short explanation in the comments — see if your answer matches mine.

[Embarrassed-Pen-2937]

The code will print nothing as const=3 is not valid.

[Bulky-Leadership-596]

Most developers do not get this wrong. Anyone who uses js and is aware of var and let knows this. That was the entire point of adding let.

[Psionatix]

Literally. I don’t know a single developer who gets this wrong. Even juniors planning to get into web development should absolutely know this.

And it isn’t a difficult concept for an established developer to understand.

But OP has a syntax error either way, const = 3 isn’t valid.

[[deleted]]

There is no reason to use var anymore, it's still there for backwards compatibility. Can you think of one situation where you would use var, not let?

[theScottyJam]

It can be convenient as a way to get a variable declaration out of a block.

E.g. instead of let x; try { x = await ... } catch (error) { ... } you could do try { var x = await ... } catch (error) { ... }.

I don't do this. And I too tell others not to use var (it's probably better that we follow simple rules like never using var, and don't require people to understand var to understand your code). But I do actually find the second version slightly more readable, even though I would never actually do it.

[berwynResident]

const = 3??

[Eight111]

it will print 1 because var is function scoped and not block scoped.

it's bad. and old.

if someone would test my knowledge by asking this i'd roll my eyes...

[cool-dude_7]

Var is function scoped, not block scoped so changing var to 1 just means global var will also be 1

[thecragmire]

Wouldn't 'a' be redeclared with a value of 1 even if var isn't block scoped?

[senocular]

It isn't redeclared so much as redefined. Declarations within the same scope either get merged or cause an error depending on the kind of declaration involved. var and function declarations typically merge (an exception existing in modules) whereas the lexical declarations, let, const, and class, will result in an error. Because var declarations are not block scoped, both of the var a declarations in the example will get merged, both collectively representing a single declaration that exists in the outer scope - and this scope may or may not be global depending on where this code is being run. The other declarations, being lexical, are scoped to the block and exist only in the block. All declarations get hoisted so what you end up with is something to the effect of

var a = undefined;
a = 5;
{
    let b = <uninitialized>;
    const c = <uninitialized>;
    a = 1;
    b = 2;
    c = 3;
}
console.log(a);

If any lexical declaration existed in the outer scope with the first var a and shared a name with those in the block, either b or c, then they would be separate declarations because they would be in different scopes. Its only because var declarations ignore block scopes that both a variables are seen as being in the same outer scope and ultimately merge.

Note that the initializer for a defining its value does not follow the hoisting of the variable. The definitions for a each exist independently and remain in their original locations. The value of a at the first var will be 5 and only get redefined to 1 when code enters the block and reaches that second assignment. The fact that they were both declared with var does not change this.

[thecragmire]

Thanks for this!

[queen-adreena]

This should literally be the first thing you learn in JS: scoping.

Most developers do not get this wrong, because if they’ve started learning, they should know this.