Block scope in javascript

As discussed in the last post, let & const keywords behave differently. You may have seen a point difference between them and var written as "let & const are block scoped".

But what is block.

Anything enclosed in braces {} is block. Basically, when we bunch together a couple of statements which js perceives as 1, that is a block.

{
}

Classic example of a perfectly normal javascript code😌

Let's take an example:

{
   let x=9;
   const y=10;
   var z=0;
}
console.log(z)
console.log(y)
console.log(x)

Output shows that only var z can be accessed. This is because when hoisted, z is allocated space in global space while let & const are allocated memory in block space which is available only inside the block.

Wh
Another example:

let x=100;
const y=98;
var z=78;

{
   let x=9;
   const y=10;
   var z=0;
   console.log(x)
   console.log(y)
   console.log(z)
}

console.log("Outside:")
console.log(x)
console.log(y)
console.log(z)

In this case:

The value of the var z outside the block is changed too but x & y outside the block have the same original value.

This is because the z is pointing to same location in global space in both cases but x & y inside the block are in block memory space and x &y outside are in separate memory space. This is called shadowing.

(Yes, I used light mode in ages, "until next time I want to burn my eyes light mode!")

But remember if we make it a function even var value won't be changed. As functions behave as seperate sub program and each has it's own execution context.

You cannot shadow a let declared data with var keyword. Using let k=10 outside the block and then var k=10 inside will throw a syntax error
⭐ Lexical scope in Javascript

Comments

[Vipul Dessai]

The example code and the output that you have given seems to be of two different examples, the output if no functions are involved, should be

9
10
0
Outside:
100
98
0

Also if you add an example of a function and show how the value of var does not change, that might help too.

[Aishanii]

Attached the wrong screenshot, I was playing around with the function example as well, which I mentioned too. Mistake on my end. Thank you for correcting!

[Vipul Dessai]

No problem, happy to help, also i forgot to mention, in the quote at the end, the variable names have to the same in that example to give a syntax error, however it wouldn't be shadowing effect anymore, as they become part of the same scope.

[Aishanii]

Thank you so much for your help and correcting me. So much to learn!