Block Scope and Shadowing in JavaScript
In this article we are going to discuss:
- What is block scope?
- What are shadowing and illegal shadowing?
What is block scope
Blocks are used to combine multiple statements into a single group or a compound statement with two curly braces { }
. Below code is an example of a block.
{
statement 1
statement 2
...
}
Scope refers to the availability of variables or functions in certain parts of the javascript code.
The let and const are block-scoped variables.
If let
and const
variables are declared inside a block, then the scope of such variables will be inside that block. Let's take the below example:
if(true){
let a = 10;
console.log(a); // 10
}
console.log(a); // ReferenceError: a is not defined
Here first console.log prints 10
in the console and the second console.log shows ReferenceError
because the variable a
cannot access from outside of the block.
What are shadowing and illegal shadowing
When a variable is declared in the inner scope having the same variable name defined on its outer scope and then we call the variable from the inner scope, the value in the variable is the value assigned in the inner scope. This is known as Shadowing or Variable Shadowing. We can explain with below example:
let a = 10
if (true) {
let a = 20;
console.log(a);
}
console.log(a);
Output:
20
10
We can shadow let
variable by let
variable and var
variable by let
variable. But we can't shadow let
variable by var
variable. This is illegal shadowing.
var
is not scoped to the block, it is scoped to the containing function. If there is no containing function, it ends up in the global scope. Hence it conflicts with the let
a declaration that is also in the global scope.