In ES5 when we declare a variable with the var keyword, the scope of the variable is either global or local.
- Global variable: When we declare a variable outside of a function.
- Local variable: When we declare a variable inside of a function.
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); // Here y is 5 console.log(x); // Here x is 10 console.log(z); // Here z is 15 } console.log(x); // Here x is 10 console.log(z); // Here z is 15 console.log(y); // ReferenceError: y is not defined } 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
// Redeclared using var function valueAssignWithVar() { var y = 20; y = 30; // Redeclare allowed console.log(y); } // Redeclared using let in different block function valueAssignWithLet1() { let x = 20; if (true) { let x = 5; // Redeclare allowed console.log(x); } console.log(x); } // Redeclared using let in same block function valueAssignWithLet2() { let x = 10; let x = 5; // Redeclare not allowed // SyntaxError: Identifier 'x' has // already been declared 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
// Reassigned not allowed const x = 10; x = 5; // TypeError: Assignment to constant variable 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
// Redeclared using const in different block function valueAssignWithConst1() { const x = 20; if (true) { const x = 5; // Redeclare allowed console.log(x); } console.log(x); } // Redeclared using const in same block function valueAssignWithConst2() { const x = 10; const x = 5; // Redeclare not allowed // SyntaxError: Identifier 'x' has // already been declared 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); // Here y is 5 console.log(x); // Here x is 10 console.log(z); // Here z is 15 } console.log(x); // Here x is 10 console.log(z); // Here z is 15 console.log(y); // Error: y is not defined } valueAssign(); |
Output :
5 10 15 10 15 ReferenceError: y is not defined
