Saltar al contenido principal
01Introducción

Variables

Clase 6 de 105 min de lectura

Hasta ahora, cada resultado que calculabas se perdía nada más aparecer. Para crear programas de verdad necesitas guardar la información y usarla más tarde, y de eso se encargan las variables.

Piensa en una variable como en una caja con una etiqueta: dentro guardas un valor, y la etiqueta es el nombre con el que lo recuperas.

Para crear una, escribe la palabra reservada let seguida del nombre que quieras darle:

let numero

Ya tienes una variable llamada numero, pero la caja está vacía: no le hemos asignado ningún valor. Para dárselo se usa el operador de asignación =:

let numero = 1

A partir de aquí, cada vez que escribas numero obtendrás el valor que guarda:

numero + 1 // -> 2

¿Y si cambia el dato? Puedes reasignarle otro valor. Esta vez sin let, porque la variable ya existe:

numero = 5numero + 1 // -> 6

Ojo con esto: numero + 1 calcula un resultado, pero no lo guarda en ningún sitio. Si no guardas el valor de la operación, la variable no cambia. Por muchas veces que lo repitas, numero seguirá valiendo 5.

numero = 5numero + 1 // -> 6numero + 1 // -> 6numero // -> 5

El valor tampoco tiene por qué ser un número. Puede ser de cualquier tipo de dato, como un texto o un booleano:

let welcomeText = 'Hola'let isCool = true
Ejercicios de código interactivos
Crea una variable llamada mensaje y asígnale el valor "Hola JavaScript"
Crea una variable llamada resultado y asígnale la suma de 2 y 3

Constantes const#

Hay valores que no deberían cambiar nunca. Para ellos existen las constantes: variables que no pueden ser reasignadas. Se crean con la palabra reservada const:

const PI = 3.1415

Si intentas reasignarle un valor, JavaScript se niega y te devuelve un error:

PI = 3 // ❌ TypeError: Assignment to constant variable.

Y como después ya no hay forma de darles valor, las constantes siempre deben inicializarse al crearlas. Es otra diferencia con let, que sí te deja crear la variable vacía:

let numero // ✅const RADIUS // ❌ SyntaxError: Missing initializer in const declaration

Son ideales para guardar valores que no van a cambiar. Siempre que puedas, usa constantes: tu código será más predecible.

Infografía
Las variables son cajas con nombre
6.Si lo intentas con PI = 3, JavaScript lanza un error: TypeError: Assignment to constant variable.
Paso 6 de 6
Ejercicios de código interactivos
Crea una constante llamada IS_DISABLED y asígnale el booleano true

Variables var#

Hay una tercera forma de crear variables: la palabra reservada var. Es la más antigua, así que es normal que te la encuentres en muchos tutoriales.

Sin embargo, a día de hoy no es recomendable usar var: tiene comportamientos extraños que pueden causar errores en tu código. En una clase posterior te explicaré las diferencias entre let, const y var, y por qué deberías evitar var siempre que puedas.

El nombre de las variables#

No puedes llamar a una variable de cualquier manera, aunque las reglas son pocas:

  • Puede contener letras, números, el guion bajo (_) y el símbolo del dólar ($).
  • No puede empezar por un número.
  • Distingue entre mayúsculas y minúsculas, así que miVariable y mivariable son dos variables diferentes.

Compruébalo: cada una guarda su propio valor.

let miVariable = 1let mivariable = 2miVariable + mivariable // -> 3

Que un nombre sea válido no significa que sea bueno. Los nombres deben ser descriptivos: si vas a guardar el nombre de un usuario, llama a la variable userName. Cuando leas el código sabrás qué contiene sin tener que adivinarlo.

No es descriptivo
let n = 'Pepe'
Se entiende
let userName = 'Pepe'

Convenciones y nomenclaturas

¿Y cuando el nombre tiene varias palabras? No puedes usar espacios, así que existen diferentes nomenclaturas para juntarlas: camelCase, snake_case y SCREAMING_CASE.

camelCase es la más común en JavaScript. La primera palabra va en minúsculas y las siguientes empiezan con mayúscula:

let camelCase = 1let camelCaseIsCool = 2let userName = 'midudev'

snake_case escribe todas las palabras en minúsculas y las separa con guiones bajos:

let snake_case = 1let snake_case_is_cool = 2let user_name = 'midudev'

En algunos lenguajes de programación es lo habitual para nombrar variables. En JavaScript no tanto, aunque todavía encontrarás código que lo use.

Donde sí es buena idea usarlo es en los nombres de archivos, como mi_archivo.js. Algunos sistemas operativos distinguen entre mayúsculas y minúsculas, y para ellos mi_archivo.js y Mi_archivo.js son dos archivos diferentes. Con todo en minúsculas te ahorras el problema.

SCREAMING_CASE escribe todas las palabras en mayúsculas y las separa con guiones bajos:

const SCREAMING_CASE = 1const SCREAMING_CASE_IS_COOL = 2const USER_NAME = 'midudev'

Es muy común en las constantes con valores que no van a cambiar, porque así se distinguen de un vistazo de las variables que sí cambian. Por eso mismo, no la uses para nombrar variables creadas con let.

En resumen

  • Una variable guarda un valor para usarlo más tarde. Se crea con let y se le asigna valor con =.
  • Una constante (const) no se puede reasignar y hay que darle valor al crearla. Úsala siempre que puedas.
  • Evita var: es la forma antigua y tiene comportamientos extraños.
  • Los nombres distinguen mayúsculas de minúsculas y deben ser descriptivos.
  • Usa camelCase para las variables y SCREAMING_CASE para las constantes que no cambian.