JavaScript – Variables: var, let y const

Básicos de variables var

Antes de ES6 la única forma de crear variables en JavaScript era con la palabra var

var javascript = true;

JavaScript es lo que se conoce como un lenguaje dinámico, eso quiere decir (entre otras cosas) que las variables se crean conforme el programa se ejecuta y el tipo de dato de la variable es almacenada en el valor y no en la variable como tal, por lo tanto puedes crear variables que almacenen diferentes tipos de datos sin tener que declararlos de alguna forma en especial como en otros lenguajes tales como Java o C.

Algunos ejemplos, NOTA: el texto después de // es un comentario

var javascript = true; // boolean
var edad = 18; // Entero
var precio = 9.99; // Float 
var nombre = 'Juan'; // String

Puedes notar como utilizamos siempre la palabra var, seguida de un nombre y finalmente asignamos un valor, a diferencia de otros lenguajes no es necesario especificar un tipo de dato en JavaScript.

Con var también puedes crear una variable sin asignarle un valor al momento de crearla.

var productos;  // se inicia vacia

Y asignar el valor después basado en alguna condición o asignar el valor dependiendo del resultado de una función.

var productos;

productos = ['Producto 1', 'Producto 2'];   // la variable productos ya tendrá valores asociados a ella

También en var es posible asignar el valor a una variable y después re-escribirlo:

var edad = 18;
edad = 19; // el valor ha sido re-asignado

De esta forma la variable edad fue creada con el valor 18, pero en algún otro lugar del código puede ser re-escrita o un valor nuevo asignado.

El problema de var (Scope)

Uno de los grandes problemas de las variables con var es lo que en JavaScript se conoce como Scope, el scope es básicamente en que parte de nuestro programa una variable y su valor son accesibles por otro código.

Veamos un ejemplo, si escribes el siguiente código en tu terminal:

var nombre = 'Juan';

if(nombre) {
   var nombre = 'Pedro';
   console.log(nombre, ' dentro del IF');
}

console.log(nombre, ' fuera del IF');

Notarás que en ambos casos se imprime el valor de ‘Pedro’, si bien da la impresión de que estamos reescribiendo la variable nombre ( o creando una nueva variable) puedes notar que la que esta fuera del if (considerado un Scope Global) también muestra el valor de la que esta dentro, esto hacia que muchos desarrolladores que venian de otros lenguajes como C#, Java o C, consideraran a JavaScript un lenguaje mal diseñado.

Variables con let

Las diferencias entre var y let son mínimas. Ambas pueden guardar cualquier tipo de dato sin declarar que tipo de dato guardarán, el mismo código que utilizamos anteriormente puede ser utilizado con let:

var javascript = true; // boolean
var edad = 18; // Entero
var precio = 9.99; // Float 
var nombre = 'Juan'; // String

También en let, una variable puede ser creada sin tener un valor de inicio.

let productos; // se inicia vacia

y asignarlo más delante:

let productos;

productos = ['Producto 1', 'Producto 2']; // la variable productos ya tendrá valores asociados a ella

Al igual que en var, se puede re-asignar un valor a a pesar de crear la variable con un valor previo.

let edad = 18;
edad = 19; // el valor ha sido re-asignado

Entonces, si var y let son muy similares ¿En qué se diferencían? El Scope.

Las variables let y el Scope

Utilizando let el Scope de las variables está definido por las llaves { } de un if o una función, utilizando el mismo código anterior pero ahora con let dentro del bloque:

var nombre = 'Juan';

if(nombre) {
   let nombre = 'Pedro';
   console.log(nombre, ' dentro del IF');
}

console.log(nombre, ' fuera del IF');

Notarás que el resultado es: Pedro dentro del IF y Juan fuera del IF, por lo tanto puedes ver que a diferencia de var, cuando utilizas let el valor no se reescribe y se preserva el valor del bloque de código ( o función), lo cual es mucho mejor resultado y lo esperado.

Si en ambos casos utilizas let nombre tendrás un error, ya que estarás creando 2 variables con el mismo nombre – que también puede llegar a ser confuso y se puede considerar una contradicción – pero es normal tener un error si creas una variable global con un nombre y otra dentro de un bloque con el mismo nombre.

Variables con const

Finalmente tenemos las variables con const, hay diferencias muy claras con let.

El primero es: una variable con const debe tener un valor al ser creada:

const nombre = 'Juan'; // Es necesario agregar un valor 

Si creas una variable con const sin valor asignado, tendrás un error:

const productos;

La segunda diferencia es: No se pueden re-asignar los valores.

const edad = 18;
edad = 19;

Si ejecutas el código anterior en la consola de tu navegador, notarás que tienes un error: Uncaught TypeError: Assignment to constant variable, esto es debido a que una variable con const no se puede re-asignar.

Las variables const y el Scope

En cuanto al scope, const funciona igual que let, el scope esta definido por las llaves { } y su valor estará únicamente disponible dentro de un bloque de código (if o función).

Conclusión

Ya hoy en día se recomienda utilizar let y const únicamente, pudiste notar que prácticamente let y var son iguales, pero let tiene como gran ventaja tener un Scope y evitar mezclar los valores.

Sin embargo, si estas creando un proyecto que deberá funcionar en IE9 o un navegador anterior, debes tener en cuenta que let y const no son soportados por este navegador ( y nunca lo serán), para ello es recomendado utilizar un transpiler que te permitirá escribir código moderno de JavaScript pero será “compilado” a una versión que sea soportada por un navegador anterior, de esta forma ya podrás utilizar la nueva sintaxis en tus proyectos.