Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is blocked scoped variables ES6 ?

  • Difficulty Level : Easy
  • Last Updated : 30 Nov, 2021

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:

HTML




<script>
    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();
</script>

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:

HTML




<script>
    // 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();
</script>

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: In this example, we’ll see the working of reassigning variables with const

HTML




<script>
    // Reassigned not allowed
    const x = 10;
    x = 5; // TypeError: Assignment to constant variable
    console.log(x);
</script>

Output :

TypeError: Assignment to constant variable.

Example 2: In this example, we’ll see the working of redeclaring variables with const

HTML




<script>
    // 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();
</script>

Output:

SyntaxError: Identifier 'x' has already been declared

Example 3: In this example, we’ll see the working of Block Scope with const

HTML




<script>
    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();
</script>

Output :

5
10
15
10
15
ReferenceError: y is not defined


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!