Var, Let y Const en JavaScript: ¿cuál es la diferencia?

Con ES2015 (ES6) surgieron muchas características nuevas y brillantes en JavaScript. Y ahora, ya estamos en 2020, se supone que muchos desarrolladores de JavaScript se han familiarizado y ya han utilizado estas características.

Si bien esta suposición podría ser parcialmente cierta, aún es posible que algunas de estas características sigan siendo un misterio para algunos desarrolladores.

Una de las características que viene con ES6 es la adición de let y const, que se puede usar para la declaración de variables. La pregunta es, ¿qué los hace diferentes de la palabra reservada var para declarar variables que hemos estado usando? Si aún no lo tienes claro, entonces este artículo es para ti.

En este artículo, analizare y tratare de explicar var, let y const con respecto a su alcance, uso y sus mejoras. Mientras lees, toma nota de las diferencias entre ellos que señalaré.

Var

Antes de que se introdujera el ES6, las declaraciones var era lo que existía. Sin embargo, había problemas asociados con las variables declaradas con var. Por eso era necesario que surgieran nuevas formas de declarar variables. Primero, entendamos bien las declaraciones con var antes de discutir esos temas.

Alcance de var

El alcance esencialmente significa a que nivel están disponibles estas variables para su uso. las declaraciones var tienen alcance global, en la función o alcance local.

• El alcance es global cuando una variable var se declara fuera de una función. Esto significa que cualquier variable que se declare con var fuera de un bloque de funciones está disponible para su uso en todo el programa.
• var tiene un alcance de función cuando se declara dentro de una función. Esto significa que está disponible y se puede acceder solo dentro de esa función.

Para entender más, mira el ejemplo a continuación.

var mensaje = "hola estas en estrada web group y soy una variable con alcance global";   
function newFunction() {
    var mensajefuncion  = "hola estas en estrada web group y soy una variable con alcance de función";
}

Aquí, mensaje tiene un alcance global porque está declarada fuera de una función, mientras que mensajefuncion tiene un alcance de función. Por lo tanto, no podemos acceder a la variable mensajefuncion fuera de la función que pertenece. Entonces si hacemos esto:

var mensaje = "hola estas en estrada web group y soy una variable con alcance global";  
function newFunction() {
    var mensajefuncion  = "hola estas en estrada web group y soy una variable con alcance de función";  
}

console.log(mensajefuncion ); // error: mensajefuncion  is not defined

Obtendremos un error porque mensajefuncion no esté disponible fuera de la función.

Las variables declaradas con var se pueden volver a declarar y actualizar

Esto significa que podemos hacer esto dentro del mismo alcance y no obtendremos un error.

var mensaje = " hola estas en estrada web group y soy una variable con alcance global";

var mensaje = "hola de nuevo estas en estrada web group y soy una variable con alcance global";

y esto también funcionaría:

var mensaje = " hola estas en estrada web group y soy una variable con alcance global";

mensaje = "hola de nuevo estas en estrada web group y soy una variable con alcance global";

Hoisting de var

Hoisting es un mecanismo de JavaScript donde las variables y las declaraciones de funciones se mueven a la parte superior de su alcance antes de la ejecución del código. Esto significa que si hacemos esto:

console.log (mensaje);
var mensaje = " hola estas en estrada web group y soy una variable con alcance global";

Es interpretado de la siguiente maneravar mensaje;

var mensaje
console.log(mensaje); // mensaje is undefined
mensaje = "hola estas en estrada web group y soy una variable con alcance global "

Entonces, las variables var se elevan a la parte superior de su alcance y se inicializan con un valor de indefinido.

Problema con var

Hay una debilidad que tiene var. Usaré el siguiente ejemplo para explicar:

var mensaje  = " hola estas en estrada web group y soy una variable con alcance global ";
var times = 4;
if (times > 3) {
        var mensaje = "hola de nuevo estas en estrada web group y soy una variable con alcance global";
}

console.log(mensaje) // "hola de nuevo estas en estrada web group y soy una variable con alcance global"

Entonces, dado que times> 3 devuelve verdadero y mensaje se redefine con "hola de nuevo estas en estrada web group y soy una variable con alcance global ". Si bien esto no es un problema si a sabiendas desea que se redefina el saludo, se convierte en un problema cuando no te das cuenta de que ya se ha definido un saludo diferente.

Si ha utilizado mensaje en otras partes de tu código, es posible que te sorprenda el resultado que puedes obtener. Esto probablemente causará muchos errores en tu código. Es por eso que let y const son necesarios.

Declaración de variables con Let

Muchos desarrolladores prefieren let para la declaración de variable. No es sorprendente, ya que se trata de una mejora en las declaraciones var. También resuelve el problema con var que acabo de comentar. Consideremos por qué esto es así.

let y su ámbito

Un bloque es un fragmento de código delimitado por {}. Un bloque vive entre llaves. Cualquier cosa entre llaves es un bloque.

Por lo tanto, una variable declarada en un bloque con let solo está disponible para su uso dentro de ese bloque. Déjame explicarte esto con un ejemplo:

let mensaje  = " hola estas en estrada web group y soy una variable con alcance global ";
let times = 4;
if (times > 3) {
        let mensajehola = "hola de nuevo estas en estrada web group y soy una variable con alcance global";
        console.log(mensajehola) // "hola de nuevo estas en estrada web group y soy una variable con alcance global"
}

console.log(mensajehola) // mensajehola is not defined

Vemos que usar mensajehola fuera de su bloque (dentro de las llaves donde se definió) devuelve un error. Esto se debe a que las variables son de ámbito de bloque.

let se puede actualizar, pero no volver a declarar.

Al igual que var, una variable declarada con let puede actualizarse dentro de su alcance. A diferencia de var, una variable let no se puede volver a declarar dentro de su alcance. Entonces, si bien esto funcionará:

let mensaje = " hola estas en estrada web group ";

mensaje = "hola de nuevo estas en estrada web group ";

esto devolverá un error:

let mensaje = " hola estas en estrada web group ";

mensaje = "hola de nuevo estas en estrada web group ";

// error: Identifier 'mensaje' has already been declared

Sin embargo, si la misma variable se define en diferentes ámbitos, no habrá error:

let mensaje  = "hola estas en estrada web group y soy una variable con alcance global ";
let times = 4;
if (times > 3) {
        let mensaje  = "hola de nuevo estas en estrada web group y soy una variable con alcance en el bloque";
        console.log(mensaje ) // "hola de nuevo estas en estrada web group y soy una variable con alcance en el bloque"
}

console.log(mensaje  ) // hola estas en estrada web group y soy una variable con alcance global

¿Por qué no manda error? Esto se debe a que ambas instancias se tratan como variables diferentes, ya que tienen ámbitos diferentes.

Este hecho hace que sea una mejor opción usar let que var. Al usar let, no tiene que molestarse si has usado el mismo nombre para una variable anteriormente, ya que la variable solo existe dentro de su alcance.

Además, dado que una variable no se puede declarar más de una vez dentro de un ámbito, el problema discutido anteriormente que ocurre con var, con let no ocurre.

Hoisting de let

Si intentas usar una variable let antes de la declaración, obtendrás un error de referencia.

Declaración de variables con Const

Las variables declaradas con Const mantienen valores constantes. Las declaraciones const comparten algunas similitudes con las declaraciones let.

las declaraciones const tienen un alcance de bloque

Al igual que las declaraciones let, solo se puede acceder a las declaraciones const dentro del bloque en el que se declararon.

const no se puede actualizar o volver a declarar

Esto significa que el valor de una variable declarada con const permanece igual dentro de su alcance. No se puede actualizar o volver a declarar. Entonces, si declaramos una variable con const, tampoco podemos hacer esto:

const mensaje = " hola estas en estrada web group ";

mensaje = "hola de nuevo estas en estrada web group "; // error: Assignment to constant variable.

Esto también marcara error:

const mensaje = " hola estas en estrada web group ";

const mensaje = "hola de nuevo estas en estrada web group "; // error: Identifier 'greeting' has already been declared

Cada declaración con const debe inicializarse en el momento de la declaración.

Este comportamiento es de alguna manera diferente cuando se trata de objetos declarados con const. Si bien un objeto const no se puede actualizar, las propiedades de estos objetos se pueden actualizar. Por lo tanto, si declaramos un objeto const como este:

const mensaje = {
        message: "hola estas en estrada web group",
        tema: "aprender javascript"

    }

Si bien no podemos hacer esto:

const mensaje = {
        message: "hola estas en estrada web group nuevamente",
        tema: "aprender javascript recargado"

    } // error:  Assignment to constant variable.

Pero esto si lo podemos hacer

mensaje.message="hola estas en estrada web group nuevamente";

Esto actualizará el valor de mensaje.message sin devolver errores.

Hoisting de const

Al igual que let, las declaraciones const se elevan a la parte superior pero no se inicializan.

Entonces, cuáles son las diferencias entre var, let y const:

•      Las declaraciones var tienen un alcance global o alcance a una función mientras que let y const tienen un alcance de bloque.
•      las variables var se pueden actualizar y volver a declarar dentro de su alcance; las variables let permite que las variables se puedan actualizar, pero no volver a declarar; Las variables const no se pueden actualizar ni volver a declarar.
•      Todas se elevan a la cima de su alcance. Pero mientras que las variables var se inicializan con undefined, las variables let y const no se inicializan.
•      Mientras que var y let pueden declararse sin inicializarse, const debe inicializarse durante la declaración.

¿Tienes alguna pregunta o comentarios? Por favor házmelo saber.

Gracias por leer :)