Block in Block Scope…
Hello Everyone, Today we discuss Block Scope in JavaScipt.
Let us first try to understand what’s Block in Block Scope?
Block in Block Scope
Block is a group of multiple statements. In some other languages, It is also known as “Compound Statement”.
Syntax:
{
// Statements}
Block Scope:
What all variables and function we can access inside this Block that is our Block Scope. 😃
But wait…
Where we can use Blocks? We can use them where we have to execute multiple Statements but JavaScript expects only one. 😕 Sounds Confusing?
Let's take an example.
If we run the below code we got an error, why we got this error?
Since the if() statement expects a single statement to execute.
var a = 10;
if ( a === 10)// Output
script.js:14 Uncaught SyntaxError: Unexpected end of input
Now this time the code runs without throwing an error because there is a statement that is executed when the if() condition is True.
var a = 10;
if ( a === 10) console.log('Hello Vidit')// Output
-> Hello Vidit
But what if we want to run multiple statements when a condition is true?. So now the use of Block comes into the picture. We group all the statements into one block which acts as a single statement for the if() condition. Sounds good?
Now we group all the statements into a Block. This is the reason we use curly braces in various loops to execute multiple statements.
var a = 10;
if ( a === 10) {
console.log('statement 1');
console.log('statement 2');
console.log('statement 3');
}
// Output
statement 1
statement 2
statement 3Let’s take an example to see what happens behind the scene.
There is a block in which we declare and initialize the variables using var, let, const. Let’s debug the Code and see what happens.
{
var x= 10;
let y = 20;
const z = 30;
console.log(x);
console.log(y);
console.log(z);}console.log(x);
console.log(y);
console.log(z);
Even before the code starts to execute. There is a new Scope in Scopes Window called ”Block” in which the let and const variables are declared with the keyword ‘undefined’. And the variable x is declared in Global Scope with the special keyword undefined.
Let’s see what is the output.
😕 Why just happened?
Initially when Block Scope is created and console.log all the values of x, y, z. Then the Block Scope is deleted from memory and all the variables inside it also vanished. That’s why we got a Reference error that ‘y’ is not defined in Scope.
So We now only remaining with Global Scope and its variable ‘x’. and this is the reason that only ‘x’ is printed in Line 9.
Here is the Demo Video, keep an eye on the Block Scope. How the values are assigned to the variables. and what happens when the 7th line executes. The Block Scope deleted from the Scopes Window. Now we only left with the Global Scope and if we try to console.log to those variables which were present in Block Scope we shall encounter with Reference Error.
Hope This Article helps You. 😊 Give it a clap for appreciation. 😝
