Diferencia entre las palabras clave var, let y const en JavaScript

En JavaScript , los usuarios pueden declarar una variable usando 3 palabras clave que son var, let y const . En este artículo, veremos las diferencias entre las palabras clave var, let y const. Discutiremos el alcance y otros conceptos necesarios sobre cada palabra clave.

Palabra clave var en JavaScript: var es la palabra clave más antigua para declarar una variable en JavaScript. 

Ámbito: ámbito global o ámbito funcional. El ámbito de la palabra clave var es el ámbito global o de función. Significa que se puede acceder globalmente a las variables definidas fuera de la función, y se puede acceder a las variables definidas dentro de una función particular dentro de la función. 

Ejemplo 1: la variable ‘a’ se declara globalmente. Por lo tanto, el alcance de la variable ‘a’ es global y se puede acceder a ella desde cualquier parte del programa. La salida que se muestra está en la consola.

<script>
    var a = 10
        function f(){
            console.log(a)
        }
    f();
    console.log(a);
</script>

Producción: 

10
10

Ejemplo 2: La variable ‘a’ se declara dentro de la función. Si el usuario intenta acceder fuera de la función, mostrará el error. Los usuarios pueden declarar las 2 variables con el mismo nombre usando la palabra clave var . Además, el usuario puede reasignar el valor a la variable var . La salida que se muestra en la consola.

<script>
    function f() {
 
        // It can be accessible any
        // where within this function
        var a = 10;
        console.log(a)
    }
    f();
 
    // A cannot be accessible
    // outside of function
    console.log(a);
</script>

Producción:

10
ReferenceError: a is not defined

Ejemplo 3: el usuario puede volver a declarar la variable usando var y el usuario puede actualizar la variable var . La salida se muestra en la consola.

<script> 
    var a = 10
   
    // User can re-declare
    // variable using var
    var a = 8
 
    // User can update var variable
    a = 7
</script>

Producción:

7

Ejemplo 4: si los usuarios usan la variable var antes de la declaración, se inicializa con el valor indefinido . La salida se muestra en la consola.

<script>
    console.log(a);
    var a = 10;
<script>

Producción:

undefined

palabra clave let en JavaScript: La palabra clave let es una versión mejorada de la palabra clave var . 

Alcance: alcance de bloque: el alcance de una variable let solo tiene alcance de bloque. No se puede acceder a él fuera del bloque particular ({block}). Veamos el siguiente ejemplo.

Ejemplo 1: La salida se muestra en la consola.

<script>
    let a = 10;
    function f() {
        let b = 9
        console.log(b);
        console.log(a);
    }
    f();
</script>

Producción:

9
10

Ejemplo 2: El código devuelve un error porque estamos accediendo a la variable let fuera del bloque de funciones. La salida se muestra en la consola.

<script>
    let a = 10;
    function f() {
        if (true) {
            let b = 9
 
            // It prints 9
            console.log(b);
        }
 
        // It gives error as it
        // defined in if block
        console.log(b);
    }
    f()
 
    // It prints 10
    console.log(a)
</script>

Producción:

9
ReferenceError: b is not defined

Ejemplo 3: los usuarios no pueden volver a declarar la variable definida con la palabra clave let, pero pueden actualizarla.

<script>
 
    let a = 10
 
    // It is not allowed
    let a = 10
 
    // It is allowed
    a = 10
</script>

Producción:

Uncaught SyntaxError: Identifier 'a' has already been declared

Ejemplo 4: Los usuarios pueden declarar la variable con el mismo nombre en diferentes bloques utilizando la palabra clave let .

<script>
  let a = 10
  if (true) {
    let a=9
    console.log(a) // It prints 9
  }
  console.log(a) // It prints 10
</script>

Producción:

9 
10

Ejemplo 5: si los usuarios usan la variable let antes de la declaración, no se inicializa con undefined como una variable var y devuelve un error.

<script>
    console.log(a);
    let a = 10;
</script>

Producción:

Uncaught ReferenceError: Cannot access 'a' before initialization

Palabra clave const en JavaScript: la palabra clave const tiene todas las propiedades que son las mismas que la palabra clave let , excepto que el usuario no puede actualizarla.

Alcance: alcance de bloque: cuando los usuarios declaran una variable const , necesitan inicializarla, de lo contrario, devuelve un error. El usuario no puede actualizar la variable const una vez que se declara. 

Ejemplo 1: Estamos cambiando el valor de la variable const para que devuelva un error. La salida se muestra en la consola.

<script>
    const a = 10;
    function f() {
        a = 9
        console.log(a)
    }
    f();
</script>

Producción:

a=9
TypeError:Assignment to constant variable.

Ejemplo 2: los usuarios no pueden cambiar las propiedades del objeto const , pero pueden cambiar el valor de las propiedades del objeto const .

<script>
    const a = {
        prop1: 10,
        prop2: 9
    }
     
    // It is allowed
    a.prop1 = 3
 
    // It is not allowed
    a = {
        b: 10,
        prop2: 9
    }
</script>

Producción:

Uncaught SyntaxError:Unexpected identifier

Diferencias entre var, let y const

Nota: A veces, los usuarios se enfrentan al problema mientras trabajan con la variable var , ya que cambian su valor en el bloque en particular. Por lo tanto, los usuarios deben usar la palabra clave let y const para declarar una variable en JavaScript.