Diferencias entre Variables Var, Let y Const en JavaScript

JavaScript

Las Variables y la Programación son dos cosas que siempre van de la mano, ya que son una parte absolutamente fundamental de ella en todos los lenguajes del mundo y JavaScript por supuesto, no es una excepción.

La cosa está en que a veces podemos tener ciertas dudas, sobretodo debido a que hay varios métodos distintos para crearlas. Hablo del uso de var, let y const. 3 formas de declarar variables que pese a que podríamos decir que hacen más o menos lo mismo, tienen importantes diferencias.

Pero como puede que haya gente que esté comenzando con la Programación prácticamente de cero, antes voy a explicar lo que es una Variable. Si tu ya sabes de sobras lo que son las variables, puedes saltarte la siguiente sección.

¿Qué es una Variable?

Podríamos definir una Variable como un contenedor de información al que podemos ponerle el nombre que nosotros queramos para añadirle la información que se nos antoje.

Yo podría crear por ejemplo una variable llamada “nombre” que se encargará de guardar un nombre. Así como podría crear otra que se llame “edad” en la que añadiría un número (por ejemplo 28) que defina el valor de esa variable.

Variables Var

Las variables de JavaScript de toda la vida y las que suelen enseñarse primero, hoy en día se están quedando obsoletas por el añadido de otro tipo de variable del cual hablaremos en el siguiente apartado.

La sintaxis es la siguiente:


// Declaración de la Variable

var nombre;

// Asignación de un valor

nombre = 'Sans';

// Creación y Asignación en una misma línea

var nombre = 'Sans';

Es importante saber que no podemos asignarle un valor a una variable que todavía no ha sido declarada, ya que en ese momento no existirá.

Otro dato importante es que las Variables var de JavaScript pueden cambiar su valor en cualquier momento que queramos. Por cierto, añadiré varios comentarios en el código para aclarar el valor de la variable en todo momento.


var nombre = 'Sans'; // Sans

if (true) { // Forzamos con true para que siempre entre en el if

var nombre = 'Papyrus'; // Papyrus
console.log(nombre); // Papyrus

}

console.log(nombre); // Papyrus

Si pruebas el código verás y lo ejecutas con node o mediante el navegador para acceder a la consola de JavaScript verás que efectivamente se muestra el nombre de Papyrus dos veces.

Quizás pienses que no tiene mucho sentido lo que estoy haciendo, pero más adelante entenderás el porqué lo he hecho así. Por cierto, en sí no sería necesario volver a declarar la variable dentro del if, pero así se entenderá mejor el siguiente ejemplo.

Variables Let

¿Recuerdas que te dije que var se está quedando un poco obsoleto? Pues hay un culpable y ese es let, el siguiente tipo de variable que vamos a tratar.

Básicamente hace lo mismo, pero tiene una pequeña diferencia que como es un poco complicada de explicar, será mejor que la veas con tus propios ojos. Voy a coger el mismo código que he utilizado en el anterior ejemplo y a modificar simplemente var por let:


let nombre = 'Sans'; // Sans

if (true) { // Forzamos con true para que siempre entre en el if

let nombre = 'Papyrus'; // Papyrus
console.log(nombre); // Papyrus

}

console.log(nombre); // Sans

Si ahora pruebas este código verás que ha ocurrido algo un poco extraño y distinto a lo que pasaba con var. El primer consolé.log nos ha devuelto “Papyrus”, pero el segundo en esta ocasión es “Sans”… ¿Qué ha pasado aquí?

Pues que esta es la principal diferencia entre var y let. Cuando tu declaras una variable con un let dentro de algo: Una función, un if, un for… Esta solo será válida y solo afectará dentro de ese elemento.

Eso es lo que ha pasado en el ejemplo. Hemos declarado de nuevo la variable nombre dentro del if y le hemos cambiado el valor, pero como es let, solo afectará al código que hay dentro del if. Por eso dentro del if nos devuelve “Papyrus” y al salir de este nos devuelve “Sans”.

Es interesante ¿no? El como algo tan sutil puede cambiar tanto las cosas y esto obviamente da mucho juego, ya que podrás “liarla” dentro de este tipo de elementos sin temor a usar variables que podrían estar ya previamente declaradas.

Variables Const

Este tipo de variables son mucho más sencillas de entender. Const sirve para crear variables que sean constantes, es decir, que nunca deberían ver su valor alterado.

Para este ejemplo no vamos a necesitar algo tan “complejo”, así que vamos a hacer algo muy sencillo:


const PI = 3.1416

PI = 7;

Si ejecutas este código JavaScript verás que te aparece un error, y no te preocupes, que eso es precisamente lo que tiene que pasar.

Es una constante y por lo tanto jamás debería ver su valor alterado, es por ese motivo que salta error, ya que estamos haciendo algo que en teoría está prohibido.

Esto podría parecer algo negativo, pero no lo es. Ya que nos vendrá genial para asegurarnos de que nuestras variables const efectivamente cumplen su función de ser inalterables.

Y por cierto, ¿te has fijado a que solo en esta ocasión el nombre de la variable está en mayúsculas? No es como que sea algo obligatorio o algo así, pero si que es cierto que se considera como una buena práctica y estaría bien que lo hagas. Es una forma de darle cierta importancia a las constantes y a su vez que sean reconocibles más rápidamente.

¡Y eso sería todo! ¿Te ha quedado clara la diferencia entre var, let y const? ¡Si no es así dímelo! ¿Sueles utilizar las tres o has dejado de lado a var? ¿Alguna duda? ¡Deja tu comentario!

Leave a Reply