Artículo original escrito por Sarah Chima Atuonwu
Artículo original Var, Let, and Const – What's the Difference?
Traducido y adaptado por Keiler Guardo Herrera
Con ES2015 (ES6) aparecieron muchas características nuevas y llamativas. Ahora, desde el año 2020, se supone que muchos desarrolladores de JavaScript se han familiarizado con estas características y han empezado a utilizarlas.
Aunque esta suposición podría ser parcialmente cierta, todavía es posible que algunas de estas características sigan siendo un misterio para algunos desarrolladores.
Una de las características que llegaron con ES6 es la adición de let
y const
, que se pueden utilizar para la declaración de variables. La pregunta es, ¿qué las hace diferentes del viejo var
que hemos venido utilizando? Si todavía no lo tienes claro, este artículo es para ti.
En este artículo, hablaremos de var
, let
y const
con respecto a su ámbito (alcance), uso y hoisting. A medida que leas, toma nota de las diferencias entre ellos que señalaré.
Var
Antes de la llegada de ES6, las declaraciones var
eran las que mandaban. Sin embargo, hay problemas asociados a las variables declaradas con var
. Por eso fue necesario que surgieran nuevas formas de declarar variables. En primer lugar, vamos a entender más sobre var
antes de discutir esos problemas.
Ámbito de var
El ámbito, significa esencialmente dónde están disponibles estas variables para su uso. Las declaraciones var
tienen un ámbito global o un ámbito de función/local.
El ámbito 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 una función está disponible para su uso en toda la pantalla.
var
tiene un ámbito local cuando se declara dentro de una función. Esto significa que está disponible y solo se puede acceder a ella dentro de esa función.
Para entenderlo mejor, mira el siguiente ejemplo.
var saludar = "hey, hola";
function nuevaFuncion() {
var hola = "hola";
}
Aquí, saludar
tiene un ámbito global porque existe fuera de la función mientras que hola
tiene un ámbito local. Así que no podemos acceder a la variable hola
fuera de la función. Así que si realizamos esto:
var tester = "hey, hola";
function nuevaFuncion() {
var hola = "hola";
}
console.log(hola); // error: hola is not defined
Obtendremos un error que se debe a que hola
no está disponible fuera de la función.
Las variables con var se pueden volver a declarar y modificar
Esto significa que podemos hacer esto dentro del mismo ámbito y no obtendremos un error.
var saludar = "hey, hola";
var saludar = "dice Hola tambien";
y esto también
var saludar = "hey, hola";
saludar = "dice Hola tambien";
Hoisting de var
Hoisting es un mecanismo de JavaScript en el que las variables y declaraciones de funciones se mueven a la parte superior de su ámbito antes de la ejecución del código. Esto significa que si hacemos esto:
console.log (saludar);
var saludar = "dice hola"
se interpreta así:
var saludar;
console.log(saludar); // saludar is undefined
saludar = "dice hola"
Entonces las variables con var
se elevan a la parte superior de su ámbito y se inicializan con un valor de undefined
.
Problema con var
Hay una debilidad que viene con var
. Usaré el ejemplo de abajo para explicarlo:
var saludar = "hey, hola";
var tiempos = 4;
if (tiempos > 3) {
var saludar = "dice Hola tambien";
}
console.log(saludar) // "dice Hola tambien"
Por lo tanto, como tiempos > 3
devuelve true, saludar
se redefine para "dice Hola tambien"
. Aunque esto no es un problema si quieres redefinir saludar
a conciencia, se convierte en un problema cuando no te das cuenta de que la variable saludar
ha sido definida antes.
Si has utilizado saludar
en otras partes de tu código, puede que te sorprenda la salida que puedes obtener. Esto probablemente causará muchos errores en tu código. Por eso son necesarios let
y const
.
Let
let
es ahora preferible para la declaración de variables. No es una sorpresa, ya que es una mejora de las declaraciones con var
. También resuelve el problema con var
que acabamos de cubrir. Consideremos por qué esto es así.
let tiene un ámbito de bloque
Un bloque es un trozo de código delimitado por {}. Un bloque vive entre llaves. Todo lo que está dentro de llaves es un bloque.
Así que una variable declarada en un bloque con let
solo está disponible para su uso dentro de ese bloque. Permíteme explicar esto con un ejemplo:
let saludar = "dice Hola";
let tiempos = 4;
if (tiempos > 3) {
let hola = "dice Hola tambien";
console.log(hola);// "dice Hola tambien"
}
console.log(hola) // hola is not defined
Vemos que el uso de hola
fuera de su bloque (las llaves donde se definió) devuelve un error. Esto se debe a que las variables let
tienen un alcance de bloque.
let puede modificarse pero no volver a declararse.
Al igual que var
, una variable declarada con let
puede ser actualizada dentro de su ámbito. A diferencia de var
, una variable let
no puede ser re-declarada dentro de su ámbito. Así que mientras esto funciona:
let saludar = "dice Hola";
saludar = "dice Hola tambien";
esto devolverá un error:
let saludar = "dice Hola";
let saludar = "dice Hola tambien"; // error: Identifier 'saludar' has already been declared
Sin embargo, si la misma variable se define en diferentes ámbitos, no habrá ningún error:
let saludar = "dice Hola";
if (true) {
let saludar = "dice Hola tambien";
console.log(saludar); // "dice Hola tambien"
}
console.log(saludar); // "dice Hola"
¿Por qué no hay ningún error? Esto se debe a que ambas instancias son tratadas como variables diferentes, ya que tienen ámbitos diferentes.
Este hecho hace que let
sea una mejor opción que var
. Cuando se utiliza let
, no hay que preocuparse de sí se ha utilizado un nombre para una variable antes, puesto que una variable solo existe dentro de su ámbito.
Además, como una variable no puede ser declarada más de una vez dentro de un ámbito, entonces el problema discutido anteriormente que ocurre con var
no sucede.
Hoisting de let
Al igual que var
, las declaraciones let
se elevan a la parte superior. A diferencia de var
que se inicializa como undefined
, la palabra clave let
no se inicializa. Sí que si intentas usar una variable let
antes de declararla, obtendrás un Reference Error
.
Const
Las variables declaradas con const
mantienen valores constantes. Las declaraciones const
similitudes con las declaraciones let
.
Las declaraciones const tienen un ámbito de bloque
Al igual que las declaraciones let
, solamente se puede acceder a las declaraciones const
dentro del bloque en el que fueron declaradas.
const no puede modificarse ni volver a declararse
Esto significa que el valor de una variable declarada con const
s el mismo dentro de su ámbito. No se puede actualizar ni volver a declarar. Así que si declaramos una variable con const
, no podemos hacer esto:
const saludar = "dice Hola";
saludar = "dice Hola tambien";// error: Assignment to constant variable.
ni esto:
const saludar = "dice Hola";
const saludar = "dice Hola tambien";// error: Identifier 'saludar' has already been declared
Por lo tanto, toda declaración const
, debe ser inicializada en el momento de la declaración.
Este comportamiento es algo diferente cuando se trata de objetos declarados con const
. Mientras que un objeto const
no se puede actualizar, las propiedades de este objeto sí se pueden actualizar. Como resultado, si declaramos un objeto const
como este:
const saludar = {
mensaje: "dice Hola",
tiempos: 4
}
mientras que no podemos hacer esto:
saludar = {
palabras: "Hola",
numero: "cinco"
} // error: Assignment to constant variable.
podemos hacer esto:
saludar.mensaje = "dice Hola tambien";
Esto actualizará el valor de saludar.mensaje
sin devolver errores.
Hoisting de const
Al igual que let
, const
las declaraciones const
se elevan a la parte superior, pero no se inicializan.
En caso de que no hayas notado las diferencias, aquí están:
- Las declaraciones
var
tienen un ámbito global o un ámbito función/local, mientras quelet
yconst
tienen un ámbito de bloque. - Las variables
var
pueden ser modificadas y re-declaradas dentro de su ámbito; las variableslet
pueden ser modificadas, pero no re-declaradas; las variablesconst
no pueden ser modificadas ni re-declaradas. - Todas ellas se elevan a la parte superior de su ámbito. Pero mientras que las variables
var
se inicializan conundefined
,let
yconst
no se inicializan. - Mientras que
var
ylet
pueden ser declaradas sin ser inicializadas,const
debe ser inicializada durante la declaración.
¿Tienes alguna pregunta o adición? Por favor, hágamelo saber.
Gracias por leer :)