Declarar variables es una de las primeras cosas que aprendemos cuando comenzamos en algún lenguaje de programación, y esto no es diferente en JavaScript. Antiguamente, usábamos la palabra clave var para declarar todas las variables en nuestro código. Esto cambió en 2015, cuando se lanzó la destacada versión ES2015 (ES6) y cambió gran parte del lenguaje JavaScript.
Con esta versión se introdujeron dos nuevos identificadores para variables: let y const. Y ahora que tenemos tres opciones de declaración para cada variable, puede que no sepamos con certeza cuál de ellas usar en cada caso.
Por eso, en este artículo explicaremos la definición de cada una de ellas, para facilitar la elección entre las tres. ¡Vamos allá!
var - La forma más antigua
Para declarar una variable con var es muy simple. Podemos ver un ejemplo a continuación:
var company = 'Hcode Treinamentos';
console.log('Mi empresa se llama ' + company);
Note que definimos un valor para la variable y declaramos que su valor deberá ser mostrado en la consola. Al ejecutar este código, vemos el siguiente resultado:
El código funcionó correctamente.
No obstante, la gran peculiaridad de una variable var es el alcance de su actuación, es decir, el límite de hasta dónde será “vista”. Todas las variables creadas fuera de funciones u otros bloques de código tienen un alcance global.
Pero una variable declarada con var tiene lo que llamamos alcance de función. Esto significa que si creamos una variable de este tipo dentro de una función, su referencia podrá ser identificada y modificada en cualquier parte de esta función, incluso si creamos otros alcances dentro de ella, como un bloque if(), switch() o for(). Esto puede implicar algunos problemas. Veamos un ejemplo de esto.
Vamos a crear una función que retornará el nombre de dos fabricantes de automóviles. El código será el siguiente:
function returnCar() {
var car = 'Land Rover';
if (car === 'Land Rover') {
var car = 'Ferrari';
console.log('Dentro del if: ' + car);
}
console.log('Fuera del if: ' + car);
}
returnCar();
Note que redefinimos la variable car dentro del if(), que es un nuevo alcance. ¿Interferirá en el alcance principal de la función? Veamos. El resultado de este código será el siguiente:
Note que “Ferrari” fue retornada en ambos casos, tanto dentro como fuera del if(). Es decir, la variable creada dentro del if() sobrescribió la variable de la función, incluso siendo de bloques de código diferentes.
Sin embargo, ¿no está de acuerdo en que muchas veces declaramos una variable en un bloque de código para un objetivo específico? Entonces, después de realizar lo que queremos, puede ser desconsiderada.
Hasta porque el ejemplo anterior representa una función pequeña. Pero imagine que nuestro proyecto fuera gigante y por casualidad esta sobrescritura ocurriera. Hasta descubrir el problema llevaría mucho tiempo.
Para resolver esta cuestión podemos usar let.
let - Teniendo en cuenta el alcance de cada bloque de código
Una variable declarada con let toma en cuenta, no la función donde fue creada, sino el bloque de código de su origen. Esto significa que si la declaramos dentro de un if(), switch() o for(), será “vista” solo dentro de esta parte del código, dentro de este alcance específico.
Veamos cómo quedaría el código de la función returnCar() con let:
function returnCar() {
let car = 'Land Rover';
if (car === 'Land Rover') {
let car = 'Ferrari';
console.log('Dentro del if: ' + car);
}
console.log('Fuera del if: ' + car);
}
Ahora, al realizar la llamada de esta función, veremos el siguiente resultado:
Note que ahora la cadena “Ferrari” solo fue identificada dentro del if(). Fuera de él, la cadena “Land Rover” continuó siendo identificada, que era lo que esperábamos.
Podemos percibir así que usar let nos ayuda a evitar confusiones en el código en cuanto al alcance de ejecución.
Veamos otro ejemplo sobre esta diferencia con otro recurso que usamos mucho: bucles de repetición.
Imagine que queremos crear un for() que irá a mostrar los años de la década de 2000. Sin embargo, definiremos un console.log() fuera de este bucle también, para verificar el índice final, de la siguiente manera:
for (var i = 2000; i <= 2010; i++) {
console.log(i);
}
console.log('Índice fuera del bucle de repetición: ' + i);
Al ejecutar este código, veremos el siguiente resultado:
Los años fueron correctamente mostrados, pero el índice fue reconocido fuera del for(), con el valor “2011”. Pero, como ya hemos dicho, esto no tiene mucho sentido.
Probemos el mismo código, pero ahora con let:
for (let i = 2000; i <= 2010; i++) {
console.log(i);
}
console.log('Índice fuera del bucle de repetición: ' + i);
Los años se mostrarán de la misma forma, pero el último console generará el siguiente error:
El error informa que la variable i no fue identificada. Esto ocurrió porque esta variable sólo es reconocida dentro del for(), que es nuestro objetivo de hecho. Esto incluso ayuda a que nuestro código sea más ligero.
Teniendo en cuenta todo esto, se recomienda que siempre elijamos usar let en lugar de var.
Hoisting - Cómo se aplica en var y let
Otra diferencia entre var y let es el proceso de Hoisting. Este proceso ocurre en todas las variables en JavaScript. Esta expresión significa “Izar” o “Elevar”. Así, todas las variables declaradas en JavaScript son elevadas al inicio de nuestro código cuando se ejecuta.
Esto nos permite realizar algo bastante interesante. Por ejemplo, mira el código a continuación:
number = 2;
var number;
console.log('El número es ' + number);
Note que manipulamos el valor de la variable number antes de declararla. ¿Crees que este código funcionará? Veamos el resultado que se muestra en la consola:
El código funcionó correctamente, ya que “por debajo de los metales” la variable number fue “izada” al inicio del código cuando se ejecutó.
Ahora hagamos lo mismo con let:
number = 3;
let number;
console.log(number);
¿Funcionará de la misma manera? En este caso, vemos el siguiente resultado:
Nuestro código no funcionó. La variable number sufrió el hoisting de la misma forma. Sin embargo, como fue declarada con let, no fue inicializada, como ocurre con var.
Así, si deseamos manipular el valor de una variable let, estamos obligados a declararla previamente.
Esta es otra diferencia entre var y let.
const - Creando variables constantes
Nuestra última forma de declarar una variable es mediante const, usada para definir una constante. Tal vez pensemos: “¿Pero cómo es posible usar una declaración de variable para crear una constante?”
Esto puede parecer no tener sentido. Sin embargo, declarar una variable como const no significa necesariamente que su valor no puede ser cambiado. Significa que no podemos sobrescribir su identificador. Vamos a entender esto mejor.
Crearemos una constante que contendrá el valor de la IP de nuestro sitio:
const IP = '127.0.0.1';
console.log(IP);
Al ejecutar el código anterior, veremos el siguiente resultado:
El valor de la constante fue correctamente retornado.
Sin embargo, intentemos redefinir su valor. Usaremos el siguiente código para ello:
const IP = '127.0.0.1';
IP = '192.168.0.1';
console.log(IP);
Si intentamos ejecutar este código, veremos el siguiente resultado:
Note que ahora se retornó un error, informando que no podemos redefinir el valor de una variable constante. Esto es de hecho lo que esperamos de una constante.
Pero, si nuestra constante es un objeto o un array, podemos alterar sus propiedades. Veamos un ejemplo.
Vamos a crear una constante que irá a contener los valores de acceso administrativo:
const USER_ADMIN = {
name: 'Ronaldo Braz',
login: 'root'
};
Vamos a alterar el valor de la propiedad login, con el código a continuación:
USER_ADMIN.login = 'admin';
Al ejecutar console.log(USER_ADMIN), veremos el siguiente resultado:
Ahora el código funcionó normalmente y la propiedad login fue alterada. Esta es una salvedad sobre las variables constantes en JavaScript.
Otra regla interesante sobre constantes es que debemos obligatoriamente definir un valor para ella cuando la declaramos, a diferencia de lo que ocurre con var y let. Imagine que simplemente informamos el identificador de una constante, como en el siguiente código:
const SITE;
Si ejecutamos el código, veremos el siguiente error:
Note que el error informa que no definimos un valor para la constante en su declaración.
Conclusión
En este artículo aprendimos la diferencia entre var, let y const. Esperamos que este conocimiento pueda ayudarte cuando necesites elegir entre estas tres declaraciones de variables.
Recordando que hablamos sobre variables y muchos otros conceptos de JavaScript en nuestro Curso Completo de JavaScript y también en Hcode Lab, nuestro Programa de Formación de Desarrolladores.
Gracias por haber leído hasta aquí y hasta el próximo artículo :)