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.

Related Blogs

Javascript

What are Parameters, Arguments and Arguments Object in JavaScript

In JavaScript, the terms parameters, arguments, and arguments object are related to functions. Explains what they are with examples.

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

pm2 cluster

Scaling Node.js Applications With PM2 Clusters

Learn cluster modules in node js, install and configure PM2 in production, and implement PM2 clusters using the PM2 ecosystem without any modification in the current application code.

Regular Expression

Most Common Regular Expressions - email, URL, strong password, credit cards, number systems and dates

Regular expressions for email, URL, strong password, credit cards, number systems, dates and more.

call-stack-in-javascript

What is Call Stack in JavaScript

JavaScript Call Stack is a mechanism to keep track of multiple function calls and manage execution context. This article describes how the call stack works with examples.

Factory Design Pattern in JavaScript

Factory Design Pattern in JavaScript

Factory allows you to handle all the object creation in a centralized location which helps the code clean, concise, and maintainable. Understand deeply with examples.

event loop and callback queue

Event Loop and Callback Queue in JavaScript

The event loop keeps monitoring the call stack and callback queue for executing callback functions. Read more about web APIs, callback queue, microtask queue, event loops, and starvation.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.