Variables y tipos

En resumen: Una variable es un nombre bajo el que el programa guarda un valor; el tipo viene del valor: number para los números, string para el texto, boolean para sí o no.

Problema

El precio está en tres sitios

En una tienda en línea, un mismo precio aparece en varios sitios: en el catálogo, en el carrito y al pagar. Si en todos está escrito como número, pasa esto:

console.log("Auriculares: 49.90 €");
console.log("En el carrito: auriculares, 49.90 €");
console.log("A pagar: 49.90 €");

Mañana los auriculares están en oferta. Tienes que encontrar y corregir cada 49.90. Si se te escapa uno, el cliente ve dos precios distintos.

La idea

Una variable: un nombre para un valor

Escribe el precio una sola vez y dale un nombre. Después escribe el nombre en todas partes.

const price = 49.90;
console.log("Auriculares: " + price + " €");
console.log("En el carrito: auriculares, " + price + " €");
console.log("A pagar: " + price + " €");

Salida

Auriculares: 49.9 €
En el carrito: auriculares, 49.9 €
A pagar: 49.9 €

const price = 49.90; crea una variable: un nombre (price) bajo el que el programa guarda un valor (49.90). Donde el código dice price, el programa toma el valor de ahí. const significa que el valor no va a cambiar. Para un valor que cambia está let: lo verás en un momento. El tipo no lo escribes: JavaScript lo ve por el valor.

+ entre un texto y un valor los une en un solo texto. Por eso los espacios están dentro de las comillas.

El cero del final desapareció: 49.90 salió como 49.9. Para el número es lo mismo. Cómo mostrar el precio con dos cifras decimales lo verás en la lección de entrada y salida.

Más precisamente, para curiosos

• Un nombre empieza con una letra y no tiene espacios. Escríbelo en minúsculas, y empieza cada palabra siguiente con mayúscula: price, pricePerNight. Las mayúsculas y las minúsculas importan: price y Price son dos nombres distintos.

• El lenguaje también permite nombres con letras como ñ o con tilde (año, situación), pero no lo hagas. El código de todo el mundo usa nombres en latín básico, y así escribirán también tus compañeros.

• Un nombre que no se creó con const o let detiene el programa con ReferenceError: price is not defined. let total; sin valor está permitido: entonces total guarda undefined, «sin valor».

La idea

Tipos de valores

El tipo dice qué puede guardar la variable. Estos son los principales:

const name = "Mochila";
const price = 39.90;
const stock = 12;
const onSale = true;
const size = "M";
console.log(name + ", talla " + size);
console.log("Precio: " + price + " €");
console.log("En stock: " + stock + " uds.");
console.log("En oferta: " + onSale);

Salida

Mochila, talla M
Precio: 39.9 €
En stock: 12 uds.
En oferta: true

• number: cualquier número, entero o decimal: una cantidad, un precio, un peso. En el código el separador decimal es un punto: 39.90. JavaScript no tiene un tipo aparte para los números enteros.
• boolean: sí o no, true o false.
• string: texto, entre comillas: "Mochila". Esto es una cadena (string), una secuencia de caracteres. No hay un tipo aparte para un solo carácter: "M" es un texto de longitud 1.

typeof te dice el tipo de un valor. Si añades estas líneas al mismo programa:

console.log(typeof name);
console.log(typeof price);
console.log(typeof stock);
console.log(typeof onSale);
console.log(typeof size);

Salida

string
number
number
boolean
string

Más precisamente, para curiosos

number es un número decimal en 8 bytes, como double en Java y C#. Los números enteros en él son exactos hasta Number.MAX_SAFE_INTEGER, 9 007 199 254 740 991. A partir de ahí no todos los enteros se pueden guardar, y 9007199254740993 se convierte en ...992. Para enteros más grandes hay un tipo aparte, BigInt: un número con una n al final. Los guiones bajos entre las cifras solo ayudan a leerlo:

const population = 8_100_000_000;
const weight = 1.5;
console.log(population + " " + weight);
console.log(Number.MAX_SAFE_INTEGER);
console.log(9007199254740993);
console.log(9007199254740993n);

Salida

8100000000 1.5
9007199254740991
9007199254740992
9007199254740993n

number guarda los números en binario, y algunos valores decimales como 0.1 no quedan exactos: 0.1 + 0.2 es 0.30000000000000004. Por eso los programas reales guardan el dinero en céntimos enteros. En este curso, para abreviar, escribimos los precios como number.

Pruébalo

Encuentra el error

El programa debe imprimir una compra. No arranca: Node.js dice SyntaxError. ¿En qué línea está el error?

Elige la línea con el error.

1const product = "Cuaderno";2const quantity = 3;3const price = 2,40;4console.log(product + ": " + quantity + " uds. a " + price + " €");

Comprobar

La idea

= guarda una copia

El signo = no es «igual» como en matemáticas. Significa: toma el valor de la derecha y guárdalo en la variable de la izquierda. Esto se llama asignación. El valor anterior de la variable desaparece.

Cuando a la derecha hay otra variable, se guarda una copia de su valor en ese momento. Las dos variables no quedan conectadas:

let seats = 40;
const seatsAtStart = seats;
seats = 37;
console.log("Al inicio: " + seatsAtStart);
console.log("Ahora: " + seats);

Salida

Al inicio: 40
Ahora: 37

seatsAtStart recibe 40. Después seats pasa a 37, pero la copia en seatsAtStart sigue siendo 40.

seats usa let, porque su valor cambia. seatsAtStart usa const: solo recuerda el inicio.

Pruébalo

¿Qué valor se queda?

¿Qué imprimirá el programa?

let roomA = 12;
let roomB = 20;
roomA = roomB;
roomB = 25;
console.log(roomA + " y " + roomB);

Respuesta

12 y 25

20 y 25

25 y 25

Comprobar

Problema

Las medidas están al revés

Un programa para imprimir fotos recibe las medidas al revés: ancho 120 y alto 80, cuando deberían ser 80 x 120. Parece que basta con guardar una en la otra y viceversa:

let width = 120;
let height = 80;
width = height;
height = width;
console.log(width + " x " + height);

Salida

80 x 80

Salió 80 x 80. ¿Adónde fue el 120?

Míralo

Intercambio con una variable auxiliar

let width = 120;
let height = 80;
const temp = width;
width = height;
height = temp;
console.log(width + " x " + height);  // 80 x 120

Paso a paso, en palabras

1. El ancho y el alto se introdujeron al revés: 120 y 80.
2. temp = width: una copia de 120 va a temp. En width sigue estando 120.
3. width = height: una copia de 80 entra en width. El 120 anterior desaparece de ahí, pero está guardado en temp.
4. height = temp: 120 vuelve de temp a height.
5. Ya están intercambiados: 80 x 120.

En la versión ingenua, width = height guarda 80 en width, y el 120 anterior desaparece. Cuando después viene height = width, width ya guarda 80, y eso es lo que se copia de vuelta.

La solución es una tercera variable auxiliar, temp. Guarda el 120 antes de que width se sobrescriba. Después el 120 pasa de temp a height, y las medidas quedan 80 x 120.

Más precisamente, para curiosos

En JavaScript el intercambio también se puede escribir en una línea. A la derecha se juntan los dos valores en un array, y solo después se guardan a la izquierda:

let width = 120;
let height = 80;
[width, height] = [height, width];
console.log(width + " x " + height);

Salida

80 x 120

Lo verás en código ajeno. Aquí lo escribimos con temp, para que veas qué pasa paso a paso.

Pruébalo

Ordena el intercambio

En la tienda, dos compañeros se cambian el turno. morning es «Iván», y evening es «María». Ordena las líneas para que se intercambien.

1. morning = evening;↑↓
2. const temp = morning;↑↓
3. console.log("Mañana: " + morning + ", tarde: " + evening);↑↓
4. evening = temp;↑↓

Comprobar

La idea

El tipo es del valor

En JavaScript no escribes el tipo de la variable. El tipo es del valor: 3 es un number, "tres" es un string. Por eso una variable con let puede recibir después un valor de otro tipo:

let nights = 3;
console.log(typeof nights);
nights = "tres";
console.log(typeof nights);

Salida

number
string

JavaScript no se queja. Esto se llama tipado dinámico: el tipo se conoce solo mientras el programa se ejecuta. Es cómodo, pero también lleva a errores con facilidad. Guarda un solo tipo de valor en una variable.

const protege de otra cosa: el valor no se puede cambiar en absoluto, ni a otro tipo ni al mismo tipo:

const nights = 3;
nights = 4;

Mensaje de Node.js

TypeError: Assignment to constant variable.

Así que escribe const, y let solo cuando el valor de verdad cambia.

Más precisamente, para curiosos

En código antiguo verás var en lugar de let. Funciona un poco distinto, y el código nuevo no lo usa.

Ejercicio

Tus variables

Resuelve las tareas en tu editor. Los valores están escritos en el código, sin leer del teclado. La lectura llega en la siguiente lección.

1. Intercambio. En el estante de arriba hay 15 libros, en el de abajo 27. Guárdalos en dos variables, intercambia sus valores e imprime el antes y el después.

Salida

Antes: arriba 15, abajo 27
Después: arriba 27, abajo 15

2. Edad. Guarda un nombre y una edad en dos variables e imprímelos en una frase.

Salida

María tiene 19 años.

3. La ficha de un hotel. Guarda en variables el nombre del hotel (texto), las estrellas (un número entero), la valoración (un número decimal), si tiene desayuno (sí o no) y la categoría (un solo carácter). Imprímelos.

Salida

Hotel «Estrella de Mar»
Estrellas: 4
Valoración: 8.7
Desayuno: true
Categoría: B

Más tareas

• Tres en círculo. Tres cajas empiezan el día con 120, 85 y 240 €. Mueve las cantidades en círculo: la primera pasa a la segunda, la segunda a la tercera, la tercera a la primera. Usa una sola variable auxiliar. Imprime 240 120 85.

• Los tipos. Imprime con typeof el tipo de cada valor de la tarea 3.
• Un error a propósito. Cambia el valor de una const más adelante en el programa y lee lo que dice Node.js. Después escribe la valoración con coma, const rating = 8,7;.

Test

Ponte a prueba

1. ¿Qué hace la línea let count = 5;?

Comprueba si count es 5Crea una variable count y guarda 5 en ellaImprime 5

2. ¿De qué tipo es 12.99 en JavaScript?

numberstringfloat

3. let a = 5; const b = a; a = 9; ¿Cuánto vale b?

1459

4. ¿Por qué intercambiar dos valores necesita una tercera variable?

Porque la primera asignación borra uno de los valoresPorque las dos variables son de tipos distintosPorque así es más rápido

5. const nights = 3; y luego nights = 4;. ¿Qué pasa?

El programa se detiene con TypeErrorLa línea se saltanights pasa a ser 4

Comprobar

Empezar la lección de nuevo

Lecciones relacionadas

• Se basa en: Tu primer programa
• Continúa en: Entrada y salida · Operadores y aritmética · Condiciones · Bucles
• Ejercicios sobre el tema: Fundamentos del lenguaje