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