Block Scopes in Javascript

In JavaScript, block scope refers to the scope of variables defined within a specific block of code, typically enclosed by curly braces {}. Variables declared with let and const are block-scoped, meaning they are only accessible within the block in which they are defined and not outside of it.

Key Points of Block Scope in JavaScript:

Block Definition:

A block is usually defined by a pair of curly braces {}. Common examples include code inside an if statement, for loop, or any other block of code that uses {}.

{
  let a = 10
  const b = 20
  console.log(a) // 10
  console.log(b) // 20
}
// Outside the block
console.log(a) // ReferenceError: a is not defined
console.log(b) // ReferenceError: b is not defined

let and const:
- Variables declared with let and const are only accessible within the block in which they are defined.
- They do not get hoisted to the top of the block like var does in a function or global scope.
```
if (true) {
  let x = 5
  const y = 10
}
console.log(x) // ReferenceError: x is not defined
console.log(y) // ReferenceError: y is not defined
```
var and Function Scope:
- Variables declared with var are function-scoped, not block-scoped. This means they are accessible within the entire function, even if they are declared inside a block.
```
if (true) {
  var z = 15
}
console.log(z) // 15 (z is accessible outside the block)
```
Temporal Dead Zone (TDZ):
- Variables declared with let and const are in the "temporal dead zone" from the start of the block until the variable's declaration is encountered. Accessing the variable before its declaration will result in a ReferenceError.
```
{
  console.log(a) // ReferenceError: a is not defined
  let a = 5
}
```
Nested Scopes:
- You can have nested blocks, and each block will have its own scope. Variables in an inner block can shadow variables in an outer block.
```
let x = 10
{
  let x = 20
  console.log(x) // 20 (x inside the block shadows the outer x)
}
console.log(x) // 10 (outer x is unaffected)
```

Block scope is an important concept in JavaScript that helps in preventing unintended variable access and modifications, making code more predictable and easier to debug.