DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Block scope in javascript
Aishanii
Aishanii

Posted on • Updated on

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.

{
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Image description
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)
Enter fullscreen mode Exit fullscreen mode

In this case:

Image description

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.

Image description
(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

Top comments (4)

Collapse
 
badgamerbad profile image
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
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
aishanipach profile image
Aishanii Author

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!

Collapse
 
badgamerbad profile image
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.

Thread Thread
 
aishanipach profile image
Aishanii Author

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

πŸ€” Did you know?

πŸ™Œ DEV has a variety of tags to help you find the content you like. Find and follow your favorite tags