¿Qué son las variables de ámbito bloqueado ES6?

En ES5, cuando declaramos una variable con la palabra clave var , el alcance de la variable es global o local. 
Variable global: Cuando declaramos una variable fuera de una función. 
Variable local: Cuando declaramos una variable dentro de una función. 

Pero, ECMAScript 2015 (ES6) introdujo dos nuevas palabras clave let y const y estas dos palabras clave proporcionan Block Scope en JavaScript. Se restringe el acceso a todas las variables que se han declarado entre corchetes { } dentro de ese bloque y dentro de los bloques de ese bloque únicamente. No podemos acceder a las variables fuera de ese bloque, será a través de un ReferenceError (la variable no está definida) o en caso de que tenga una variable con el mismo nombre en el alcance global, entonces se referirá a eso.

palabra clave let:   las variables declaradas con la palabra clave var pueden volver a declararse, pero las variables declaradas con la palabra clave let en el mismo bloque no pueden volverse a declarar. Será a través de un error de sintaxis: el identificador ya ha sido declarado.

Ejemplo:

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

Producción:

5
10
15
10
15
ReferenceError: y is not defined

Aquí vemos que x y z se declaran en el bloque exterior con referencia al bloque if {} e y se declaran en el bloque interior. Aquí z se declara usando la palabra clave var, por lo que usamos la variable z en todas partes en esta función valueAssign() porque las variables declaradas con la palabra clave var no pueden tener alcance de bloque. Pero x e y, ambos se declaran usando la palabra clave let. Aquí x se declara en el bloque exterior, por lo que podemos usar x en el bloque interior. Dado que y se declara en el bloque interno, no podemos usarlo en el bloque externo. Let y const funcionarán en el bloque que declararé y funcionarán en los bloques dentro de él. Por este motivo, cuando imprimimos y en el bloque exterior da error. 

Ejemplo 2: En este ejemplo, veremos el funcionamiento de la redeclaración de variables con var y let :

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

Producción:

30
5
20
SyntaxError: Identifier 'x' has already been declared

Palabra clave const : Las variables declaradas con la palabra clave const estrictamente no se pueden volver a declarar y reasignar con el mismo bloque . Usamos la palabra clave const cuando no desea cambiar el valor de esa variable en todo el programa.

Ejemplo: En este ejemplo, veremos el funcionamiento de la reasignación de variables con const

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

Producción :

TypeError: Assignment to constant variable.

Ejemplo 2: En este ejemplo, veremos el funcionamiento de volver a declarar variables con const

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

Producción:

SyntaxError: Identifier 'x' has already been declared

Ejemplo 3: En este ejemplo, veremos el funcionamiento de Block Scope con const

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

Producción :

5
10
15
10
15
ReferenceError: y is not defined