Construcción de

Páginas WEB I Docente: Víctor M. González Camacho

Variables en JavaScript var,

const y let

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.

A continuación 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. También podemos usar Visual Studio
Code

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.

(Por ejemplo:) 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.

1
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

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.

2
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

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 = 2025
}
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.

3
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

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.

4
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

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

5
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

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

6
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

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 sí 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.

7
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

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.