Las variables son un concepto fundamental en cualquier lenguaje de programación. En JavaScript, puedes declarar variables usando las palabras clave var, const o let.

En este artículo, aprenderás por qué usamos variables, cómo usarlas y las diferencias entre const, let y var.

¿Para qué se usan las variables en JavaScript?

En el contexto de la programación, los datos son información que usamos en nuestros programas informáticos. Por ejemplo, tu nombre de usuario en Twitter es un dato.

Gran parte de la programación se trata de manipular o mostrar datos. Para hacer esto, los programadores necesitan alguna manera de guardar y registrar datos. Vamos a demostrar esto con un ejemplo.

Primero abriremos nuestra consola de JavaScript. Para abrir tu consola de JavaScript en Chrome, puedes usar el atajo Ctrl + Shift + J en Windows y Linux. Para Mac, usa Cmd + Option + J.

Una vez la consola esté abierta, piensa en la edad actual de tu perro o gato (o cualquier número similar si no tienes mascotas) y digítalo en la consola.

4

Ahora, ¿qué pasa si queremos referirnos a ese número otra vez? Tendríamos que escribirlo por segunda vez.

Necesitamos una manera de referirnos a este dato en particular para que podamos reusarlo a lo largo de nuestro programa.

Introduciendo variables en JavaScript

Una analogía útil es pensar en las variables como etiquetas para nuestros valores. Piensa en un contenedor de arándanos con una etiqueta que dice 'arándanos'. En este ejemplo, la variable arándanos, señala hacia un valor, que son los mismos arándanos.

Declaremos una variable, edad, y usemos el operador de asignación (signo igual) para asignar nuestro valor, 4, a esta variable. Usaremos la palabra clave var.

var edad = 4

Las variables son la manera como los programadores le dan nombre a un valor para poder reusarlo, actualizarlo o simplemente registrarlo. Las variables se pueden usar para guardar cualquier tipo de dato en JavaScript.

Ahora que hemos asignado este valor a la variable edad, podremos referirnos a este más adelante. Si escribes ahora la variable edad en tu consola, esta te devolverá el valor de 4.

Cómo usar la palabra clave var en JavaScript

Las palabras clave en JavaScript son palabras reservadas. Cuando usas la palabra clave var, le estás diciendo a JavaScript que vas a declarar una variable.

Al usar var, las variables pueden ser reasignadas. Demostraremos esto primeramente declarando una nueva variable, nombre, y asignándole el valor de Madison.

var nombre = 'Madison'

Luego, reasignaremos esta variable para que apunte al valor de un nombre diferente, Ben.

nombre = 'Ben'

Ahora, si ejecutas console.log(nombre), obtendrás el resultado Ben.

Al usar la palabra clave var, las variables también pueden ser declaradas sin valor inicial.

var año

Aquí hemos definido la variable año, pero esta no apunta hacia ningún valor. Más adelante, si queremos que apunte hacia algún valor, podemos usar el operador de asignación para lograrlo.

año = 2020

Ahora nuestra variable año apuntará al valor 2020.

Cuando JavaScript fue creado por primera vez, la única manera de declarar una variable era con la palabra clave var.

En las actualizaciones recientes a JavaScript (ECMAScript2015), const y let fueron creadas como otras palabras clave para declarar variables.

Para explicar por qué eran necesarias, veremos los problemas que tiene var. Con el objetivo de observar estos problemas, aprenderemos lo que es el Scope.

¿Qué es el Scope?

El ámbito (Scope) se refiere a los lugares dentro de nuestro código en donde las variables están disponibles para su uso. Cuando una variable tiene un ámbito global, significa que está disponible en cualquier lugar de tu programa. Veamos un ejemplo.

Toma el siguiente bloque de código y pégalo en tu consola.

var nombre = 'Madison'
function imprimirNombre() {
    console.log(nombre)
}
imprimirNombre()

Aquí hemos creado y llamado una función, imprimirNombre, que imprimirá el valor de la variable nombre, Madison. Verás eso impreso en tu consola.

Debido a que nuestra variable fue creada por fuera de la función, tiene alcance global. Esto significa que está disponible en cualquier parte de tu código, incluyendo dentro de cualquier función. Es por eso que la función, imprimirNombre, tiene acceso a la variable nombre.

Vamos ahora a crear una variable que tenga alcance de función. Esto significa que la variable solo se puede acceder dentro de la función en la que fue creada. Este siguiente ejemplo será muy similar al código anterior, pero con un posicionamiento diferente de la variable.

function imprimirAño() {
 var año = 2020
}
console.log(año)

Ahora nos saldrá un error en la consola: año is not defined (año no está definida). Esto es porque la variable año tiene alcance de función. Es decir, solo existe dentro de la función dentro de la cuál fue creada. Al ejecutar console.log, hemos intentado acceder a la variable desde afuera de la función, donde no tenemos acceso.

Las variables con alcance de función son útiles a los programadores porque frecuentemente queremos crear variables que sólo sirvan o sean necesarias dentro de cierta función. Crear variables globales también nos puede generar errores o fallos.

Ahora que tenemos un entendimiento básico de lo que es el alcance, podemos volver a nuestra discusión acerca de los problemas que tiene la palabra clave var.

Problemas con la palabra clave var en JavaScript

Veamos otro ejemplo.

Crearemos una variable, edad. Luego escribiremos una sentencia if que verifique si edad tiene algún valor y, si lo tiene, que devuelva un console.log del número que sea el doble de la edad.

Este es un ejemplo simplificado, pero primero revisaremos si edad tiene un valor porque queremos asegurarnos que estamos sumando valores válidos.

var edad = 27
if (edad) {
 var dobleDeEdad = edad + edad
 console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

Ahora en la consola verás El doble de tu edad actual es 54.

Nuestra variable, dobleDeEdad, es ahora una variable global. Si ingresas dobleDeEdad en tu consola, verás que tienes acceso a ella.

dobleDeEdad
54

Como podemos observar, dobleDeEdad está ahora disponible en cualquier parte de nuestro código. La variable dobleDeEdad no fue declarada dentro de ninguna función. En consecuencia, ha sido creada con alcance global.

El problema es que dobleDeEdad solo es una variable que usamos una vez dentro de nuestra sentencia if, la cuál no necesitamos que esté disponible en todo nuestro código. Se ha 'filtrado' fuera de la sentencia en la que fue creada, incluso si no necesitábamos que eso sucediera.

var edad = 27
if (edad) {
 //Necesitamos que var dobleDeEdad exista solamente en este bloque de código dentro de las llaves 
    var dobleDeEdad = edad + edad
    console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

dobleDeEdad
54
//Nuestra var dobleDeEdad está disponible por fuera de estas llaves, en el ámbito global

Sería bueno que tuviésemos una manera de crear una variable que *solo* exista dentro de la sentencia if en donde fue creada. En otras palabras, el bloque de código que existe dentro de las llaves.

var edad = 27
if (edad) {
 //Queremos que nuestra variable solo exista aquí, donde la usaremos
 var dobleDeEdad = edad + edad
 console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

Para ayudar a resolver este problema, las palabras clave const y let fueron introducidas a JavaScript.

Cómo usar la palabra clave const en JavaScript

const funciona similar a var, pero con unas cuantas diferencias grandes.

Primero, const tiene alcance de bloque, mientras que var tiene alcance de función.

¿Qué es un bloque?

Un bloque se refiere a cualquier espacio que esté entre llaves de apertura y cierre. Esto puede parecer confuso al principio. Escribamos nuestro ejemplo anterior, pero esta vez usando const en vez de var al declarar nuestra variable dobleDeEdad.

var edad = 27
if (edad) {
 const dobleDeEdad = edad + edad
 console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

Ahora escribe dobleDeEdad en tu consola y presiona Enter. Te debería arrojar un error, dobleDeEdad is not defined ( dobleDeEdad no está definida). Esto es porque const tiene alcance de bloque: solo existe dentro del bloque donde fue definida.

La variable dobleDeEdad está 'atrapada' dentro de las dos llaves de apertura y cierre. El código que está dentro de dichas llaves si puede acceder a dobleDeEdad, pero ningún código fuera de estas lo puede hacer.

Al usar const en vez de var, nuestro problema anterior es solucionado. Nuestra variable dobleDeEdad ya no se está 'filtrando' en nuestro ámbito global innecesariamente. En cambio, solo está disponible dentro del bloque de código donde fue creada.

¿Cómo funcionan las variables con ámbito de bloque dentro del contexto de las funciones? Para aprender sobre esto, vamos a crear y luego llamar a una función, devuelveX.

function devuelveX() {
 const x = 1
 return x
}
devuelveX()

Al llamar a la función devuelveX, podemos ver que esta devuelve el valor de x, que es 1.

Si luego escribimos x, la consola arrojará referenceError: x is not defined (Error de referencia: x no está definida). Esto es porque las funciones también con consideradas como bloques, lo que quiere decir que nuestra const x solo existirá dentro de la función.

Lo siguiente que debes saber sobre const es que solo se puede declarar una sola vez. Escribe este código en la consola:

const y = 1
const y = 2

Deberías ver un error,  Identifier 'y' has already been declared (El identificador 'y' ya ha sido declarado).

Esta es la diferencia entre var y const. Mientras que const arroja un error, haciéndote saber que ya has declarado esta variable, la palabra clave var no.

var x = 1
var x = 2

La variable x señalará hacia el valor 2 sin errores. Esto puede causar errores para ti como programador, siendo que a lo mejor no quisiste asignarle un nuevo valor a tu variable. Entonces, usar const te puede ayudar, dado que recibirás un error si tratas de reasignar la variable accidentalmente.

Esta es una fortaleza de la palabra clave const que fue introducida como una mejor manera de crear variables en JavaScript. Sin embargo, ¿qué pasa en los casos cuando quieres actualizar el valor de tu variable?

Veamos un ejemplo en donde querríamos hacer eso.

Declaremos una variable adulto, con valor false. También crearemos una variable edad con valor  20.

const adulto = false

const edad = 20

Digamos que queremos revisar la edad del usuario y cambiar el valor de nuestra variable adulto a verdadero si la edad está por encima de 18. Podemos escribir una sentencia para hacerlo.

if (edad > 18) {
 adulto = true   
}

¿Qué pasa cuando ejecutamos este código?

Aquí veremos Error: Assignment to constant variable (Error: asignación a variable constante).

Esto es porque, en concordancia con las reglas de const, no podemos volver a declarar esta variable. Debido a que nuestra variable adulto ya está apuntando al valor false, no podemos hacerle apuntar a algo más.

Si imprimimos adulto de nuevo, podemos ver que se mantuvo igual y contiene el mismo valor de false.

No podemos reasignar nuestra variable adulto, lo que significa que const está funcionando de la manera esperada. Sin embargo, ¿qué pasa si queremos reasignar esta variable?

Frecuentemente los programadores querrán poder volver a declarar sus variables.

Aquí es donde nuestra tercera palabra clave, let, surge.

Cómo usar la palabra clave let en JavaScript

Primero revisemos como let es similar a const.

Let, como const, tiene alcance de bloque. Si reemplazas const por let en nuestro ejemplo previo de dobleDeEdad, funcionaría igual.

Sin embargo, let es diferente de const de un modo fundamental. Las variables declaradas con la palabra clave let pueden volver a ser declaradas, a diferencia de const. Repasemos un ejemplo.

Usando nuestro mismo ejemplo previo, reemplaza const por let. Mantendremos nuestra variable edad como una const con el valor de 20.

let adulto = false
const edad = 20
if (edad > 18) {
    adulto = true
}

Ahora si escribimos adulto, en vez de recibir un error como se generó anteriormente, ahora veremos el resultado true.

Al usar la palabra clave let, hemos actualizado nuestra variable para que apunte al valor de true como queríamos. Algunas veces en programación, necesitaremos actualizar una variable dependiendo de ciertos datos que recibamos. Podemos usar let para lograr esto.

Conclusión

En resumen, hemos aprendido que las variables son usadas para registrar y reusar datos en nuestros programas informáticos. El alcance (Scope) se refiere al lugar en nuestro código donde las variables están disponibles para su uso.

Las variables se pueden declarar usando var, const, o let. var tiene alcance de función, mientras que const y let tienen alcance de bloque. Las variables const no pueden ser reasignadas, mientras que las variables let si pueden serlo.

var, const, y let pueden ser confusas al principio. Puede ayudar que leas varios tutoriales al respecto, así como también poner tu propio código a prueba de diferentes maneras para fortalecer tu entendimiento.

Tener una base sólida de var, const y let te ayudará no solo al principio de tu carrera de JavaScript, sino también a lo largo de esta.

¡Gracias por leer!

Si te gustó esta publicación, suscríbete a mi lista de correo donde envió mis últimos artículos y anuncio meetups para mi club de libros de código.

Si tienes feedback o preguntas sobre este post, puedes twittearme a @madisonkanna.

Traducido del artículo JavaScript Variables – A Beginner's Guide to var, const, and let de Madison Kanna