What is blocked scoped variables ES6 ?

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

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:

// 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

// 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

// 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

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

torq1284

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• ES6
• JavaScript-Questions