To understand shadowing, you need to have a good idea on Block Scope in JS.
What is Variable Shadowing
Variable shadowing occurs when a variable of inner scope defined with the same name as of outer scope. When we call that variable in the inner scope, we will get the value of the inner scoped variable. This is known as Shadowing or Variable shadowing. The introduction of let and const in ECMAScript 6 along with block scoping allows variable shadowing.
function fn1() {
var a = "Car";
let b = 'Black';
const c = 'Video';
if (true) {
var a = "Bike";
let b = 'Red '; // New value assigned
const c = 'Book';
console.log(a); // Result is Bike
console.log(b); // Result is Red
console.log(c); // Result is Book
}
console.log(a); // Result is Bike
console.log(b); // Result is Black
console.log(c); // Result is Video
}
fn1();
Illegal Shadowing
Now, while shadowing a variable, it should not cross the boundary of the scope, i.e. we can shadow var variable by let variable but cannot do the opposite. So, if we try to shadow let variable by var variable, it is known as Illegal Shadowing and it will give the error as “variable is already defined.”
function fn1() {
var b = 'Black';
let c = 'Video';
if (true) {
let b = 'Red '; // Legal shadowing
var c = 'Book'; // Illegal Shadowing.
// Throws error as Identifier 'c' has already been declared
console.log(b); // Result is Red
console.log(c); // This will throw error
}
console.log(b); // Result is Black
}
fn1();
Use the share button below if you liked it.
It makes me smile, when I see it.