Diferencias entre var y let en JavaScript

El JavaScript la palabra reservada utilizada tradicionalmente para la definición de variables es var. Utilizada desde los inicios del lenguaje. En JavaScript ECMAScript 6 aparecen dos nuevas palabra reservas que para la definición de variables: let y const. Permitiendo así definir mejor el tipo de dato a almacenar en cada variable. Lo que se traduce en menos errores y un código más fácil de depurar. Al utilizar la palabra const se crean constantes que no se pueden modificadas, mientras que let variables. Aún así, aunque parezca que se utilizan para lo mismo, existen diferencias entre var y let en JavaScript que es importante tener en cuenta.

Ámbito de la palabra clave var

Las variables definidas con var tienen un ámbito de función. Por lo tanto, pueden ser utilizadas en cualquier punto de la función, incluso antes de ser definidas. Esto se puede ver el siguiente código:

console.log(x);
var x = 'var';
console.log(x);

undefined
var

Al ejecutar este código la primera línea se obtiene como salida undefined, mientras que, en la segunda, una vez asignado el valor a la variable, var. Esto también se puede ver en los bloques como if, el siguiente código se ejecuta sin problemas:

if (true) {
    var x = 'true';
}

console.log(x);

Ámbito de las palabras claves let y const

Las palabras clave introducidas en el estándar JavaScript ECMAScript 6 para la definición de variables, let y const, tienen ámbito de bloque. Por lo tanto, a diferencia de let, solamente pueden ser utilizadas a partir de su definición en el bloque de código. Así si en los ejemplos se cambia la palabra var por let el código producirá un error.

La diferencia entre let y const es que las variables definidas mediante la primera se pueden modificar durante la ejecución, mientras que las creadas con la segunda con son constantes. Indicando así tanto al intérprete de JavaScript, permitiendo reservar la memoria de forma más eficiente, como a otros usuarios de las intenciones de la variable. Así cuando se sabe que el valor asignado a una variable no va a cambiar durante la ejecución es mejor utilizar const para su definición.

Hay que tener en cuenta que cuando se utiliza const es necesario asignar el valor en el momento de la definición. Ya que es este no se puede cambiar posteriormente. No pudiendo definir una variable sin asignar un valor como es el caso de let.

Diferencias entre var y let en JavaScript

Las palabras clave var y let pueden ser utilizadas para definir variables en JavaScript. Siendo aparentemente intercambiables entre sí. Pero, como se ha visto anteriormente, esto no es así ya que el ámbito de definición de ambas es diferente. Lo que tiene diferentes implicaciones a la hora de escribir código. Como se puede ver a continuación let tiene múltiples ventajas ya que evita situaciones en las que el código puede ser confuso.

Definir múltiples variables con el mismo nombre

El uso de var permite redefinir la misma variable en el mismo bloque, algo que no se puede hacer con let. Por ejemplo, el siguiente código función sin problemas:

var x = 1;
var x = 2;

Mientras que su versión con let produce un error.

let x = 1;
let x = 2;

Aún así en diferentes bloques si que es posible definir múltiples variables con el mismo nombre con let. Siendo cada una de ellas una variable diferente. Algo que se puede ver en el siguiente bloque de código.

let x = 1;

if (true) {
    let x = 2;
    console.log(x);
}

console.log(x);

2
1

En el bloque del if la variable x tiene como valor 2, mientras que fuera tiene el valor 1. Si dentro del bloque no se define la variable está conservará el valor al salir.

En el caso de var siempre se conserva el valor ya que el rango de definición es la función, no el bloque.

var x = 1;

if (true) {
    var x = 2;
    console.log(x);
}

console.log(x);

2
2

Utilización en los bucles for

En los bucles for es habitual definir una variable sobre la que iterar. Esto se puede hacer tanto con let como con var. Aunque en el caso de let el alcance de las variables solamente es dentro del bucle. Lo que permite evitar la aparición de problemas.

Un efecto secundario de esto es la posibilidad de anidar bucles dentro de otros con la misma variable para iterar con let.

for (let i=0; i < 2; ++i) {
    console.log('Primer', i);
    for (let i=0; i <2; ++i) {
        console.log('Segundo', i);
    }
}

Primer 0
Segundo 0
Segundo 1
Primer 1
Segundo 0
Segundo 1

Mientras que con var el resultado sería diferente, ya que en ambos bucles la variable sería la misma.

for (var i=0; i < 2; ++i) {
    console.log('Primer', i);
    for (var i=0; i <2; ++i) {
        console.log('Segundo', i);
    }
}

Primer 0
Segundo 0
Segundo 1

Además, en el caso de var la variable es accesible fuera del bucle, cosa que no pasa en la versión con let.

Conclusiones

Hoy se ha visto las palabras reservadas que se pueden utilizar en JavaScript para definir variables: var, let y cont. Empleando var y let para la definición de variables y const para la de constantes. Aunque aparentemente var y let parecen ser iguales esto no es así debido a que cada una tiene un alcance diferente.

El uso de let tiene grandes ventajas frente a var ya que evita muchos problemas de codificación. Evitando que se alteren los valores de una variable de forma accidental, algo difícil de depurar. Por otro lado, cuando el valor asignado es una constante, es aconsejable utilizar const para indicar a otros programadores el objetivo de la variable, evitar cambios accidentales de la constante e indicar al mismo tiempo al intérprete de JavaScript que puede almacenar los datos de una forma más eficiente.

Las ventajas que tiene el uso de let frente a var hace que ya no use nunca var en mi código. ¿Haréis vosotros lo mismo o seguiréis usando var?

Imágenes: Pixabay (Boskampi)