Lección 2 · Variables y tipos de datos

Variables

Hasta acá el programa solo escribía un mensaje fijo. Para que el Buffet haga cuentas necesita recordar valores: el precio de una empanada, el stock de un sándwich, el nombre de un producto. Para eso están las variables: un lugar de la memoria con un nombre, donde se guarda un valor para usarlo después.

Crear una variable se dice declararla, y guardarle un valor se dice asignar. En JavaScript se hacen las dos cosas juntas:

let precioEmpanada = 350;
let stockSandwich = 24;

Se lee así: let declara la variable, precioEmpanada es el nombre, el = guarda lo que está a la derecha, y el ; cierra la instrucción. A partir de ese momento, escribir precioEmpanada es lo mismo que escribir 350:

console.log(precioEmpanada);   // 350
console.log(stockSandwich);     // 24

El valor de una variable se puede usar y se puede cambiar. Asignar de nuevo reemplaza lo que había:

let stockSandwich = 24;
stockSandwich = 23;             // se vendió uno
console.log(stockSandwich);     // 23

Fijate que la segunda asignación no lleva let: la palabra let se usa una sola vez, cuando la variable nace. Después, para cambiarla, se escribe solo el nombre.

Los nombres

El nombre de una variable tiene reglas, y conviene respetarlas aunque parezcan de forma:

• Empieza con una letra, _ o $. No puede empezar con un número.
• No lleva espacios ni guiones. Para separar palabras se usa la notación camello: la primera palabra en minúscula y cada palabra siguiente con mayúscula —precioEmpanada, stockSandwich—.
• Distingue mayúsculas: precio y Precio son variables distintas. Eso es una fuente de errores, no una comodidad.
• Hay palabras reservadas que no se pueden usar como nombre —let, const, if, for— porque ya significan algo.

Un buen nombre dice qué guarda: precioEmpanada se entiende, p no. En un programa largo, la diferencia entre nombrar bien y nombrar corto es la diferencia entre encontrar un error en un minuto o en una tarde.

let y const

Hay dos formas de declarar una variable, y la diferencia es una sola: si su valor va a cambiar o no.

Con const, intentar cambiar el valor es un error, y JavaScript lo avisa:

const nombreDelBuffet = "Buffet del Cole";
nombreDelBuffet = "Buffet Central";   // TypeError: Assignment to constant variable

La regla de oro: empezar con const, y cambiarlo a let recién cuando el programa necesite modificar el valor. Al revés, un let que nunca cambia no rompe nada, pero no avisa cuando algo que no debía cambiar se cambia. const es un cartel de «esto no se toca» que el programa controla solo.

Números

Los precios y el stock son números, y JavaScript los maneja con un solo tipo: number. Abarca enteros y decimales sin diferencia:

const precioEmpanada = 350;
const precioAlfajor = 200.5;
const stockSandwich = 24;

Con los números se puede operar —sumar, restar, multiplicar, dividir—, que es lo que hace la lección siguiente. Por ahora importan dos detalles. El primero: el decimal va con punto, nunca con coma. 200.5 es medio alfajor; 200,5 es un error.

El segundo: la función typeof dice de qué tipo es un valor, y sirve para comprobar:

console.log(typeof 350);         // number
console.log(typeof precioAlfajor); // number

Texto

Los nombres de los productos son texto, y el tipo se llama string. Se escribe entre comillas, simples o dobles —las dos valen igual—:

const producto = "Sándwich de jamón y queso";
const categoria = 'Sandwiches';

La regla es no mezclar: si el texto empieza con comilla simple, cierra con simple; si empieza con doble, cierra con doble. Y si el texto lleva una comilla adentro, se usa la otra por fuera:

const aviso = "El combo se llama 'El Recreo'";
const otroAviso = 'Precio: "consultar"';

Dos operaciones de todos los días. La primera, saber el largo de un texto:

console.log(producto.length);   // 27

La segunda, unir textos con el signo +:

const producto = "Sándwich";
const detalle = producto + " de jamón y queso";
console.log(detalle);   // Sándwich de jamón y queso

Ojo con una trampa clásica: + une textos, pero si uno de los lados es número, JavaScript lo convierte y el resultado puede sorprender —"2" + 3 da "23", no 5—. Eso se ve a fondo en la lección siguiente.

Booleanos y null

Un booleano es un valor que solo puede ser una de dos cosas: true o false —verdadero o falso—. Es el tipo de las respuestas de sí o no, y el que después manejan los if:

const hayStock = true;
const estaAbierto = false;

Además hay dos valores especiales que aparecen todo el tiempo:

let encargado;            // undefined: se declaró y nada más
let turno = null;          // null: vacío a propósito

console.log(typeof encargado);   // undefined
console.log(typeof hayStock);     // boolean

La diferencia entre los dos es sutil pero importa: undefined es «nadie le puso nada todavía», null es «se dejó vacío a propósito». En la práctica, undefined es lo que devuelve JavaScript cuando algo falta; null es lo que escribe el programador cuando quiere decir «acá no hay nada».

Plantillas de texto

Armar un texto con variables usando + funciona, pero se vuelve ilegible en cuanto hay varias:

console.log("El " + producto + " sale $" + precio + " y quedan " + stock + ".");

Para eso existen las plantillas de texto: se escriben entre comillas invertidas (la tecla junto al 1, `) y las variables van adentro con ${ }:

console.log(`El ${producto} sale $${precio} y quedan ${stock}.`);
// El Sándwich sale $350 y quedan 24.

La plantilla se lee igual que la frase que produce: lo que está afuera de los ${ } sale tal cual, y adentro va la variable. Es la forma de escribir texto de acá en adelante: más corta y sin equivocarse con los + y los espacios.

Resumen

• Una variable guarda un valor con un nombre; se declara con let o const y se asigna con =.
• const por defecto; let solo cuando el valor va a cambiar.
• Los números usan punto decimal; typeof dice el tipo de un valor.
• El texto (string) va entre comillas y se une con +.
• true/false para los sí o no; undefined es «sin valor» y null es «vacío a propósito».
• Las plantillas de texto (comillas invertidas y ${ }) son la forma cómoda de armar texto con variables.

En la próxima lección los datos empiezan a hacer cuentas: operadores para calcular el total del pedido y decisiones para aplicar el descuento.

Autoevaluación de la lección 2