Variables
La mayoría de las veces, una aplicación de JavaScript necesita manejar datos. Aquí hay dos ejemplos:
- Una tienda en línea: la información puede incluir productos en venta y un carrito de compras.
- Una aplicación de chat: la información puede incluir usuarios, mensajes y más.
Usamos variables para almacenar esta información.
¿Qué es una variable?
Una variable es un «contenedor con nombre» para guardar datos. Podemos usar variables para almacenar información como caramelos, visitantes y otros datos.
Para declarar una variable en JavaScript, se utiliza la palabra clave let.
La siguiente declaración crea (o declara) una variable llamada «message»:
let message;
Ahora podemos asignar un valor a esta variable utilizando el operador de asignación =:
let message;
message = 'Hola'; // almacena la cadena 'Hola' en la variable llamada message
La cadena ahora está almacenada en el área de memoria asociada con la variable. Podemos acceder a ella usando el nombre de la variable:
let message;
message = 'Hola!';
alert(message); // muestra el contenido de la variable
let message = 'Hola!'; // define la variable y asigna un valor
alert(message); // Hola!
También podemos declarar múltiples variables en una sola línea:
let user = 'John', age = 25, message = 'Hola';
let user = 'John';
let age = 25;
let message = 'Hola';
Algunas personas también declaran variables múltiples en estilo multilínea:
let user = 'John',
age = 25,
message = 'Hola';
…o incluso en este estilo «coma primero»:
let user = 'John'
, age = 25
, message = 'Hola';
La palabra clave var es casi lo mismo que let. También declara una variable, aunque de una manera ligeramente diferente y más antigua.
Existen sutiles diferencias entre let y var, pero no nos interesan en este momento. Cubriremos el tema en detalle en el capítulo «La vieja var«.
Una analogía de la vida real
Podemos entender fácilmente el concepto de una «variable» si la imaginamos como una «caja» con una etiqueta de nombre único.
Por ejemplo, podemos imaginar la variable message como una caja etiquetada «message» con el valor «Hola!» dentro:
let message;
message = 'Hola!';
message = 'Mundo!'; // valor cambiado
alert(message);
Cuando el valor ha sido alterado, los datos antiguos serán removidos de la variable:
let hello = 'Hola mundo!';
let message;
// copia 'Hola mundo' de hello a message
message = hello;
// Ahora, ambas variables contienen los mismos datos
alert(hello); // Hola mundo!
alert(message); // Hola mundo!
Declarar dos veces lanza un error
Una variable debe ser declarada solamente una vez.
Una declaración repetida de la misma variable es un error:
let message = "Esto";
// 'let' repetido lleva a un error
let message = "Aquello"; // SyntaxError: 'message' ya fue declarado
Debemos declarar una variable una sola vez y luego referirnos a ella sin let.
Lenguajes funcionales
Es interesante notar la existencia de la programación funcional. Los lenguajes funcionales «puros», como Haskell, prohíben cambiar el valor de las variables.
En estos lenguajes, una vez que la variable ha sido almacenada “en la caja”, permanece allí para siempre. Si necesitamos almacenar algo más, el lenguaje nos obliga a crear una nueva caja (declarar una nueva variable). No podemos reusar la antigua.
Aunque a primera vista puede parecer un poco extraño, estos lenguajes son muy capaces de desarrollo serio. Más aún, existen áreas como la computación en paralelo, en las cuales esta limitación ofrece ciertas ventajas.
Nombrar variables
Existen dos limitaciones para los nombres de variables en JavaScript:
- El nombre solo puede incluir letras, dígitos, o los símbolos
$y_. - El primer carácter no puede ser un dígito.
Ejemplos de nombres válidos:
let userName;
let test123;
Cuando el nombre contiene varias palabras, se suele usar el estilo camelCase, donde las palabras van pegadas una detrás de otra, con cada inicial en mayúscula: miNombreMuyLargo.
Es interesante notar que los símbolos del dólar $ y el guion bajo _ también se utilizan en nombres. Son símbolos comunes, tal como las letras, sin ningún significado especial.
Los siguientes nombres son válidos:
let $ = 1; // Declara una variable con el nombre "$"
let _ = 2; // y ahora una variable con el nombre "_"
alert($ + _); // 3
Ejemplos de nombres incorrectos:
let 1a; // no puede iniciar con un dígito
let my-name; // los guiones '-' no son permitidos en nombres
La capitalización es importante
Dos variables con nombres manzana y MANZANA son variables distintas.
Las letras que no son del alfabeto inglés están permitidas, pero no se recomiendan
Es posible utilizar letras de cualquier alfabeto, incluyendo letras cirílicas, logogramas chinos, etc.:
let имя = '...';
let 我 = '...';
Técnicamente, no existe ningún error aquí. Tales nombres están permitidos, pero existe una tradición internacional de utilizar inglés en el nombramiento de variables. Incluso si estamos escribiendo un script pequeño, este puede tener una larga vida por delante. Puede ser necesario que personas de otros países lo lean en algún momento.
Nombres reservados
Hay una lista de palabras reservadas, las cuales no pueden ser utilizadas como nombre de variable porque el lenguaje en sí las utiliza.
Por ejemplo: let, class, return y function están reservadas.
El siguiente código genera un error de sintaxis:
let let = 5; // no se puede nombrar "let" a una variable ¡Error!
let return = 5; // tampoco se le puede nombrar "return", ¡Error!
Una asignación sin utilizar use strict
Normalmente, debemos definir una variable antes de utilizarla. Pero, en los viejos tiempos, era técnicamente posible crear una variable simplemente asignando un valor sin utilizar let. Esto aún funciona si no ponemos use strict en nuestros scripts para mantener la compatibilidad con scripts antiguos.
// nota: no se utiliza "use strict" en este ejemplo
num = 5; // se crea la variable "num" si no existe antes
alert(num); // 5
Esto es una mala práctica que causaría errores en strict mode:
"use strict";
num = 5; // error: num no está definida
Constantes
Para declarar una variable constante (inmutable) usa const en lugar de let:
const myBirthday = '18.04.1982';
Las variables declaradas utilizando const se llaman “constantes”. No pueden ser alteradas. Al intentarlo causaría un error:
const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // ¡error, no se puede reasignar la constante!
Cuando un programador está seguro de que una variable nunca cambiará, puede declararla con const para garantizar y comunicar claramente este hecho a todos.
Constantes en mayúsculas
Existe una práctica ampliamente utilizada de utilizar constantes como alias de valores difíciles de recordar y que se conocen previo a la ejecución.
Tales constantes se nombran utilizando letras mayúsculas y guiones bajos.
Por ejemplo, creemos constantes para los colores en el formato “web” (hexadecimal):
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";
// ...cuando debemos elegir un color
let color = COLOR_ORANGE;
alert(color); // #FF7F00
Ventajas:
COLOR_ORANGEes mucho más fácil de recordar que «#FF7F00».- Es mucho más difícil escribir mal «#FF7F00» que
COLOR_ORANGE. - Al leer el código,
COLOR_ORANGEtiene mucho más significado que#FF7F00.
¿Cuándo usar mayúsculas para una constante?
Ser una “constante” solo significa que el valor de la variable nunca cambia. Pero hay constantes que son conocidas previo a la ejecución (como el valor hexadecimal del color rojo) y hay constantes que son calculadas en tiempo de ejecución, pero no cambian después de su asignación inicial.
Por ejemplo:
const pageLoadTime = /* el tiempo que tomó cargar la página */;
El valor de pageLoadTime es conocido solo después de que la página haya cargado. Pero después de ser asignado, no cambia nunca.
Mi recomendación es usar mayúsculas solo para los valores que son “difíciles de recordar”.
En otros casos, como pageLoadTime, la usaremos como una constante normal. Así, el código será más fácil de entender para quienes lo lean.
Resumen
Podemos declarar variables para almacenar datos utilizando las palabras clave var, let, y const.
let– es una forma moderna de declarar.var– es la forma antigua de declarar.const– es comolet, pero la variable no puede ser reasignada.
Las variables deben ser nombradas de tal forma que puedan ser fácilmente entendidas por otros desarrolladores.
En este artículo, revisamos:
- Variables de JavaScript y cómo declarar e inicializar una variable utilizando
let,varyconst. - Cómo nombrar variables y restricciones de nombres.
- Una introducción a las constantes y cómo usarlas.
