Block?
# an empty block
{
//Compound statements
}
IMPORTANT Block combines multiple statements as a single unit so as javascript can execute multiple lines of code as multiple lines inside block act as single unit
# no use of block single line possible only
if(true) true;
# with use of block
# multiple lines can be written as a single unit where javascript expects only single statement
if(true){
const a =100; // line1
console.log(100); //line 2
}
Block Scope?
{
// variables or
//functions that can be accessed inside this block
// is called BLOCK SCOPE
}
-
When we run the code snippet-12, A Block scope is created where b and c are present while a is inside global scope even if it is declared inside a block
# code snippet -12 { var a = 10; let b = 100; const c = 1000; } console.log(a); // 10 console.log(b); // referrence error console.log(c); // referrence error # Inside debugger # Block b: undefined c: undefined # Global a: undefined
that is the reason let and const are in block scope i.e seperate scope, and we can only access a in global scope while b and c in the block scope.
Shadowing in javascript
The variable declared inside the block takes preference i.e shadows the same named variable declared outside the block
var a= 100;
{
var a=10;
console.log(a);
}
# output
10
In addition to shadowing the var keyword variable will modify the same name variable value declared in the global scope
var a = 100;
{
var a=10
console.log(a);
}
console.log(a)
# output
10
10
Case : Let keyword
Shadowing happens in let also
However In contrast to var the let keyword declared variable do not alter the value of the same let keyword variable in the global scope
let b = 100;
{
let b = 20;
console.log(b);
}
console.log(b);
# output
20
100
# debugger
# Script
b: 100
# Block
b: 20
# Global
IMPORTANT - Shadowing works the similar way for the function scope also
const c=100;
function x(){
const c = 30;
console.log(c);
}
x();
console.log(c);
# output
30
100
I'llegal Shadowing
# illegal shadowing
let a= 20;
{
var a =10;
}
# output
SyntaxError a has already been declared
# legal shadowing
# case-1
let b =20;
{
let b=2;
}
# output
No error runs perfectly
# case-2
var c =20;
{
let c=2;
}
# output
No error runs perfectly
IMPORTANT From the above code snippet the point to note is that shadowing can only happen if a particular variable do not cross the boundry for the case of illegal shadowing declaring a var a inside a block will give error as the var keyword will be in the global scope and not in the block scope
let a= 20;
function x(){
var a =10;
}
# output
No error perfectly runs
IMPORTANT the arrow function behaves the same as normal function when Block Scope rules & shadowing are considered.
You My Friend Have A Great Day!!
Top comments (1)
Thank you