Con la versión ES2015 (ES6) aparecieron muchas novedades en JavaScript, entre otras la aparición de nuevas maneras de declarar variables: let y const. Hasta ese momento solo teníamos disponible la palabra reservada var para ello.
Estas nuevas palabras reservadas para declarar variables nos permiten ahorrarnos los problemas que existían con var.
Cómo funciona var
Las variables declaradas con var son accesibles de forma global si se declaran fuera de cualquier función, de forma que serán accesibles en cualquier lugar.
Cuando se declaran variables con var dentro de una función, será accesible dentro de toda esa función.
Veamos este ejemplo:
var saludo = "hola mundo" function miFuncion() { var saludete = "hola mundete" console.log(saludo) // muestra en consola "hola mundo" console.log(saludete) // muestra en consola "hola mundete" } console.log(saludo) // muestra en consola "hola mundo" console.log(saludete) // muestra error
Desde fuera de la función no podemos acceder a la variable que hemos declarado dentro.
Ahora bien, cuando usamos var, podemos declarar de nuevo las variables y actualizarlas:
var saludo = "hola mundo" var saludete = "hoooola mundete" function miFuncion() { var saludete = "hola mundete" console.log(saludo) // muestra en consola "hola mundo" console.log(saludete) // muestra en consola "hola mundete" } console.log(saludo) // muestra en consola "hola mundo" console.log(saludete) // muestra en consola "hoooola mundete"
Ahora saludete no muestra error.
Hay que tener en cuenta también el Hoisting en el caso de las variables declaradas con var. El Hoisting es un mecanismo de JavaScript con el cual la declaración de variables y funciones se mueven a la zona superior de su alcance. Ejemplo:
console.log(saludo) // muestra error conforme saludo no tiene ningún valor definido var saludo = "hola mundo"
Este código, realmente se interpreta de esta forma:
var saludo // la declaración se lleva al inicio y se inicializa con el valor undefined console.log(saludo) saludo = "hola mundo"
El problema con var
Algunos errores pueden aparecer con la permisividad con la que podemos declarar de nuevo variables existentes. Se puede dar la ocasión que declaremos una variable con var que ya haya sido declarada anteriormente y no lo sepamos. Eso hará que el valor asignado anteriormente se pierda. A raíz de esto pueden aparecer problemas que a veces son complicados de detectar.
La necesidad de let y const viene originada por esta permisividad.
Cómo funciona let
Actualmente es preferible let para declarar variables, es una mejora indudable respecto a las declaraciones con var. Además, soluciona los problemas que de var que se han mencionado.
Las variable declaradas con let son accesibles únicamente en el bloque de código donde se declaran. Un bloque de código son todas las líneas englobadas por { y }.
let saludo = "hola mundo" function miFuncion() { let saludete = "hola mundete" } console.log(saludete) // muestra error
Por otro lado, las variable declaradas con let son actualizables, se les puede modificar el valor. En cambio, lo que no es posible hacer es declararlas de nuevo.
let saludo = "Hola mundo" let saludo = "Hola mundete" // error
En cambio, como las variables definidas con let solo viven dentro del bloque donde se han definido, este código sí sería correcto:
let saludo = "Hola mundo" if (1 === 1) { let saludo = "Hola dentro del if" console.log(saludo) // muestra en consola "Hola dentro del if" } console.log(saludo) // muestra en consola "Hola mundo"
Cuando se usa let nos podemos olvidar si en otra parte del código ya se está usando una variable con el mismo nombre cuando hacemos declaraciones. Como no podemos declarar dos veces una misma variable dentro del mismo bloque nos ahorramos todos los inconvenientes que tiene let.
Las variables declaradas con let también son afectadas por el Hoisting. La diferencia con var es que las variables declaradas con let no se inicializan con "undefined". Si se intenta acceder a su valor antes de su declaración veremos un error de referencia en la consola.
Cómo funciona const
Las variables declaradas con const han de contener valores constantes de nuestro programa. El alcance de estas variables es igual que las que se declaran con let, son accesibles solo dentro del bloque donde se declaran.
La diferencia con las variables declaradas con let, es que con las que se declaran con const no podemos modificar su valor, y evidentemente tampoco las podemos declarar más de una vez.
Hay que tener en cuenta el comportamiento diferente de los objetos. Cuando declaramos un objeto con const, no podremos asignar un objeto diferente a esa variable, pero sí que podremos modificar sus propiedades:
const unObjetoMuyChulo = { tipo: "chulo", clase: "objeto", invisible: false, } unObjetoMuyChulo.invisible = true // correcto unObjetoMuyChulo = { tipo: "feo", invisible: false, } // incorrecto, muestra un error en consola
El Hoisting afecta a las variables declaradas con const del mismo modo que a las variables declaradas con let: la declaración se interpreta al inicio del bloque de código pero no se inicializan con ningún valor.
Cuándo usar let y cuándo const
Mi consejo es olvidarse de var. Es posible que en algún caso muy concreto sea necesario tener una variable accesible de forma global, pero por lo general no vamos a necesitar usarlo. Nos ahorramos errores tontos que pueden hacernos perder mucho tiempo.
Por otro lado, diría que la mejor práctica es usar siempre const excepto en los casos en que declaremos variables que más adelante tenemos que modificar en el mismo bloque de código.
Comparemos estos dos ejemplos:
let frutas = ["melón", "pera", "uva"] let contadorDeFrutas = 0 frutas.forEach((fruta) => { contadorDeFrutas++ }) console.log(contadorDeFrutas) // muestra 3
const frutas = ["melón", "pera", "uva"] let contadorDeFrutas = 0 frutas.forEach((fruta) => { contadorDeFrutas++ }) console.log(contadorDeFrutas) // muestra 3
La única diferencia entre los dos es que el array de frutas se ha declarado con const en el segundo ejemplo. Aunque los dos sean correctos, quizás sea más claro el segundo y nos evite posibles errores por nuestra parte.