What is blocked scoped variables ES6 ?
Last Updated :
20 Feb, 2023
In ES5 when we declare a variable with the var keyword, the scope of the variable is either global or local.
But, ECMAScript 2015 (ES6) introduced two new keywords let and const and these two keywords provide Block Scope in JavaScript. All variables that have been declared within curly brackets { } are restricted to be accessed within that block and inside blocks of that block only. We can’t access variables outside that block, it’ll either through a ReferenceError (variable is not defined) or in case he has a variable with the same name at Global scope then it’ll refer to that.
let keyword: Variables declared with var keyword are allowed to redeclare, but Variables declared with let keyword in the same block are not allowed to redeclare. It’ll through a SyntaxError: Identifier has already been declared.
Example 1: In this example, we will use let keyword and redefine the variable
Javascript
function valueAssign() {
let x = 10;
var z = 15;
if (true) {
let y = 5;
console.log(y);
console.log(x);
console.log(z);
}
console.log(x);
console.log(z);
console.log(y);
}
valueAssign();
|
Output:
5
10
15
10
15
ReferenceError: y is not defined
Here we see x and z both are declared in the outer block with reference of if’s block {} and y declare in the inner block. Here z is declared using var keyword so we use z variable everywhere in this valueAssign() function because variables declared with the var keyword can not have block scope. But x and y, both are declared using the let keyword. Here x is declared in the outer block, so we can use x in the inner block. Since y is declared in the inner block, so we can not use it in the outer block. Let and const will work on the block that I will declare and will work on the blocks inside it. For this reason, when we print y in the outer block it gives an error.
Example 2: In this example, we’ll see the working of redeclaring variables with var and let:
Javascript
function valueAssignWithVar() {
var y = 20;
y = 30;
console.log(y);
}
function valueAssignWithLet1() {
let x = 20;
if (true) {
let x = 5;
console.log(x);
}
console.log(x);
}
function valueAssignWithLet2() {
let x = 10;
let x = 5;
console.log(x);
}
valueAssignWithVar();
valueAssignWithLet1();
valueAssignWithLet2();
|
Output:
30
5
20
SyntaxError: Identifier 'x' has already been declared
const keyword: Variables declared with const keyword are strictly not allowed to redeclare and reassign with the same block. We use the const keyword when you do not want to change the value of that variable in the whole program.
Example 1: In this example, we’ll see the working of reassigning variables with const
Javascript
const x = 10;
x = 5;
console.log(x);
|
Output :
TypeError: Assignment to constant variable.
Example 2: In this example, we’ll see the working of redeclaring variables with const
Javascript
function valueAssignWithConst1() {
const x = 20;
if (true) {
const x = 5;
console.log(x);
}
console.log(x);
}
function valueAssignWithConst2() {
const x = 10;
const x = 5;
console.log(x);
}
valueAssignWithConst1();
valueAssignWithConst2();
|
Output:
SyntaxError: Identifier 'x' has already been declared
Example 3: In this example, we’ll see the working of Block Scope with const
Javascript
function valueAssign() {
const x = 10;
var z = 15;
if (true) {
const y = 5;
console.log(y);
console.log(x);
console.log(z);
}
console.log(x);
console.log(z);
console.log(y);
}
valueAssign();
|
Output :
5
10
15
10
15
ReferenceError: y is not defined
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...