Variables

La mayor parte del tiempo, una aplicación JavaScript necesita trabajar con información. Dos ejemplos:

1. Una tienda en línea – La información puede incluir los bienes a la venta y un “carrito de compras”.
2. Una aplicación de chat – La información puede incluir los usuarios, mensajes, y mucho más.

Utilizamos las variables para almacenar esta información.

Una variable

Una variable es un “almacén con un nombre” para guardar datos. Podemos usar variables para almacenar golosinas, visitantes, y otros datos.

Para generar una variable en JavaScript, se usa la palabra clave let.

La siguiente declaración genera (en otras palabras: declara o define) una variable con el nombre “message”:

let message;

Ahora podemos introducir datos en ella, utilizando el operador de asignación =:

let message;

message = 'Hola'; // almacenar la cadena 'Hola' en la variable llamada message

La cadena ahora está almacenada en el área de la memoria asociada con la variable. La podemos acceder utilizando el nombre de la variable:

let message;
message = 'Hola!';

alert(message); // muestra el contenido de la variable

Para ser concisos, podemos combinar la declaración de la variable y su asignación en una sola línea:

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';

Esto puede parecer más corto, pero no lo recomendamos. Por el bien de la legibilidad, por favor utiliza una línea por variable.

La versión de líneas múltiples es un poco más larga, pero se lee más fácil:

let user = 'John';
let age = 25;
let message = 'Hola';

Hay quienes prefieren definir múltiples variables en estilo multilínea:

let user = 'John',
  age = 25,
  message = 'Hola';

… o con el estilo “coma primero”:

let user = 'John'
  , age = 25
  , message = 'Hola';

Técnicamente, todas estas variantes hacen lo mismo. Así que, es cuestión de gusto personal y preferencia estética.

var mensaje = 'Hola';

Una analogía de la vida real

Podemos comprender fácilmente el concepto de una “variable” si nos la imaginamos como una “caja” con una etiqueta de nombre único pegada en ella.

Por ejemplo, la variable message puede ser imaginada como una caja etiquetada "message" con el valor "Hola!" dentro:

Podemos introducir cualquier valor a la caja.

También la podemos cambiar cuantas veces queramos:

let message;

message = 'Hola!';

message = 'Mundo!'; // valor alterado

alert(message);

Cuando el valor ha sido alterado, los datos antiguos serán removidos de la variable:

También podemos declarar dos variables y copiar datos de una a la otra.

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!

let message = "This";

// 'let' repetidos lleva a un error
let message = "That"; // SyntaxError: 'message' ya fue declarado

Nombramiento de variables

Existen dos limitaciones de nombre de variables en JavaScript:

1. El nombre únicamente puede incluir letras, dígitos, o los símbolos $ y _.
2. 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 (capitalización en camello), donde las palabras van pegadas una detrás de otra, con cada inicial en mayúscula: miNombreMuyLargo.

Es interesante notar que el símbolo 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

let имя = '...';
let 我 = '...';

let let = 5; // no se puede le nombrar "let" a una variable  ¡Error!
let return = 5; // tampoco se le puede nombrar "return", ¡Error!

// nota: no se utiliza "use strict" en este ejemplo

num = 5; // se crea la variable "num" si no existe antes

alert(num); // 5

"use strict";

num = 5; // error: num no está definida

Constantes

Para declarar una variable constante (inmutable) use const en vez 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 esto y comunicarlo claramente a los demás.

Constantes mayúsculas

Existe una práctica utilizada ampliamente de utilizar constantes como aliases 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_ORANGE es mucho más fácil de recordar que "#FF7F00".
• Es mucho más fácil escribir mal "#FF7F00" que COLOR_ORANGE.
• Al leer el código, COLOR_ORANGE tiene mucho más significado que #FF7F00.

¿Cuándo se deben utilizar letras mayúsculas para una constante, y cuando se debe nombrarla de manera normal? Dejémoslo claro.

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 el tiempo de ejecución, pero no cambian después de su asignación inicial.

Por ejemplo:

const pageLoadTime = /* el tiempo que tardó la página web para cargar */;

El valor de pageLoadTime no está preestablecido. Como no se conoce antes de cargar la página, la nombramos normalmente. Pero podemos declararla como constante, porque después de su asignación inicial, no cambiará.

En otras palabras, las constantes en mayúsculas son utilizadas solamente como alias para valores invariables y preestablecidos.

Nombrar cosas correctamente

Estando en el tema de las variables, existe una cosa de mucha importancia.

Una variable debe tener un nombre claro, de significado evidente, que describa el dato que almacena.

Nombrar variables es una de las habilidades más importantes y complejas en la programación. Un vistazo rápido a el nombre de las variables nos revela cuál código fue escrito por un principiante o por un desarrollador experimentado.

En un proyecto real, se pasa mucho más tiempo modificando y extendiendo una base de código existente que escribiendo algo nuevo desde cero. Cuando regresamos a nuestro código luego de un tiempo, es mucho más fácil encontrar información que está bien etiquetada. O en otras palabras, cuando las variables tienen los nombres adecuados.

Por favor, dedica tiempo para pensar un nombre correcto para una variable antes de declararla. Hacer esto te rendirá muy bien.

Algunas reglas buenas para seguir:

• Usa términos legibles para humanos como userName p shoppingCart.
• Evita abreviaciones o nombres cortos a, b, c, a menos que realmente sepas lo que estás haciendo.
• Crea nombres que describan al máximo lo que son y sean concisos. Ejemplos de nombres malos son data y value. Estos nombres no nos dicen nada, solo son adecuados en el contexto de un código que deje excepcionalmente obvio cuál dato o valor está referenciando la variable.
• Ponte de acuerdo con tu equipo, y con tu propia mente, cuáles términos se utilizarán. Si a un visitante se lo llamara “user”, debemos llamar las variables relacionadas currentUser o newUser en vez de currentVisitor o newManInTown.

¿Suena simple? De hecho lo es, pero no es tan fácil crear nombres de variables descriptivos y concisos a la hora de practicar. Inténtelo.

Resumen

Podemos declarar variables para almacenar datos al utilizar las palabra clave var, let, o const.

• let – es la forma moderna de declaración de una variable.
• var – es la declaración de variable de vieja escuela. Normalmente no lo utilizamos en absoluto. Cubriremos sus sutiles diferencias con let en el capítulo La vieja "var", por si lo necesitaras.
• const – es como let, pero una vez asignado, el valor de la variable no podrá alterarse.

Las variables deben ser nombradas de tal manera que entendamos fácilmente lo que está en su interior.