¿Qué son las variables y funciones de ámbito de bloque en ES6?

Las variables y funciones de ámbito de bloque se definen dentro de un bloque en particular o dentro de llaves { } y solo se puede acceder a ellas dentro de ese bloque en particular o dentro de ese bloque. Las variables de ámbito de bloque se introdujeron por primera vez en EcmaScript2015 o es6. ES6 nos presenta dos palabras clave: let y const que nos permite declarar variables con alcance de bloque. Veámoslos en detalle en este artículo.

La palabra clave let: La palabra clave let no nos permite redeclarar una variable en el mismo bloque, mientras que es posible cuando la declaras usando la palabra clave var . Si intenta volver a declarar una variable definida con la palabra clave let, arrojará el error SyntaxError: Identifier ya ha sido declarado .

Sintaxis:

let first_name="John";

Ejemplo 1: El siguiente ejemplo ilustra cuándo no estamos redeclarando la variable con la palabra clave let .

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        let desc =
            "A computer science portal for all geeks";
        console.log(name);
        console.log(desc);
       
        var name = "GFG";
        console.log(name);
 
    }
    myFunction();
    console.log(desc); // ReferenceError: desc is not defined
</script>

Producción:

sin redeclaración

Ejemplo 2: El siguiente ejemplo ilustra cuando estamos redeclarando la variable con la palabra clave let .

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        let desc =
            "A computer science portal for all geeks";
        console.log(name);
        console.log(desc);
       
        var name = "GFG";
        let desc = "Welcome to GFG";
        console.log(name);
        console.log(desc);
    }
    myFunction();
</script>

Producción:

Usando la redeclaración

La palabra clave const: las variables declaradas usando la palabra clave const no se pueden volver a declarar como la palabra clave let y tampoco podemos reasignarlas. Usamos la palabra clave const para declarar una constante cuyo valor no queremos cambiar en el código. Si intentamos reasignar la variable const, mostrará un error como TypeError: Asignación a variable constante.

Sintaxis:

const age = 23;

Ejemplo 1: en este ejemplo, intentamos reasignar una variable constante que genera un error.

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        const desc = "A computer science portal for all geeks";
        desc = "Welcome to GFG";
        console.log(name);
        console.log(desc);
    }
    myFunction();
</script>

Producción:

Ejemplo 2: En este ejemplo intentamos acceder a una variable fuera de la función.

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        const desc =
              "A computer science portal for all geeks";
        console.log(name);
        console.log(desc);
    }
    myFunction();
    console.log(desc); //ReferenceError: desc is not defined
</script>

Producción:

Ejemplo 3: En este ejemplo tratamos de volver a declarar la variable de descripción .

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        const description =
              "A computer science portal for all geeks";
        console.log(name);
       
        const description = "Welcome to GFG!";
        console.log(description);
    }
    myFunction();
</script>

Producción:

Funciones con alcance de bloque : las funciones con alcance de bloque se pueden definir dentro del bloque de código, ese bloque podría estar dentro de llaves simples o dentro de cualquier función de la declaración condicional. Si una función está escrita dentro de otra función, entonces esas funciones son funciones anidadas.

Función escrita dentro de otra función:

Sintaxis:

 function func1(){
     // Content of the func1()
     
     function func2(){
         // Content of the func2()
     }
 }

Ejemplo:

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        function myFunction2() {
            let desc =
                "A computer science portal for all geeks.";
            console.log(name);
            console.log(desc);
        }
        myFunction2();
        console.log(name);
    }
    myFunction();
</script>

Producción:

Función escrita dentro de una declaración condicional:

Sintaxis:

if (true){
    // Content of conditional statement
    
    function func1(){
        // Content of func1()
    }
}

Ejemplo:

<script>
    if (true) {
        var name = "GeeksforGeeks";
        function myFunction() {
            let description =
                "A computer science portal for all geeks.";
            console.log(name);
            console.log(description);
        }
        myFunction();
    }
</script>

Producción: