Marc Semper Lloret
← JavaScript: el lenguaje

Sesión 2 · Semana 1

Variables, tipos y valores

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se guarda un dato, qué tipos existen y qué diferencia hay entre const y let.
  2. 2. Haz: Modela con variables la ficha de un producto de tu catálogo.
  3. 3. Comprueba: Sabes decir el tipo de cada valor antes de preguntárselo a la consola.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué datos tiene un producto de tu proyecto? Escribe cinco.
  2. ¿Cuáles son texto, cuáles número y cuáles solo pueden ser sí o no?
  3. ¿Cuáles de ellos cambiarán mientras la página está abierta?

Guardar un valor con un nombre

const nombre = "Teclado mecánico";
const precio = 89.9;
let stock = 12;

Una variable es un nombre para un valor. Se declara una vez y se usa muchas.

Palabra Se puede reasignar Cuándo se usa
const No Por defecto, siempre que el valor no cambie
let Sí Cuando el valor tiene que cambiar
var Sí Nunca en código nuevo

Empieza siempre por const

Declara con const y cámbialo a let solo cuando el propio lenguaje te obligue con un error. Así, al leer el código, un let significa algo: «esto cambia, presta atención».

var no lo usamos porque no respeta los bloques y permite redeclarar la misma variable sin avisar. Aparecerá en código antiguo y en respuestas de IA; sustitúyelo.

Los tipos que vas a usar

const texto = "Teclado";        // string
const numero = 89.9;            // number
const disponible = true;        // boolean
const sinValor = null;          // null: vacío a propósito
let noAsignada;                 // undefined: todavía no tiene valor

Hay dos más, bigint y symbol, que no usarás en este módulo.

La diferencia entre null y undefined se pregunta mucho y es sencilla: undefined es «nadie le ha dado valor»; null es «alguien decidió que estuviera vacío».

Para preguntar el tipo:

typeof "Teclado"   // "string"
typeof 89.9        // "number"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof null        // "object"  ← un error histórico del lenguaje

Textos: comillas y plantillas

const producto = "Teclado";
const unidades = 3;

const linea = "Has elegido " + unidades + " × " + producto;
const mejor = `Has elegido ${unidades} × ${producto}`;

Las plantillas —escritas con acento grave— permiten insertar valores con ${} y ocupar varias líneas. A partir de aquí, para construir texto usamos siempre plantillas: concatenar con + es donde nacen la mitad de los espacios perdidos.

Números: uno solo, y con un aviso

JavaScript tiene un único tipo numérico, en coma flotante. Eso trae una sorpresa clásica:

0.1 + 0.2        // 0.30000000000000004

El comportamiento no constituye un defecto de JavaScript, sino una consecuencia de la representación binaria de los decimales. Con dinero se trabaja en céntimos, con enteros, o se redondea al presentar:

const total = 0.1 + 0.2;
total.toFixed(2);            // "0.30"  ← ojo: devuelve texto
Number(total.toFixed(2));    // 0.3

Nombrar bien no es cosmética

const p = 89.9;              // ¿precio? ¿peso? ¿página?
const precioConIva = 89.9;   // se lee solo

En este módulo: camelCase, en castellano o en inglés pero sin mezclar, nombres que digan qué contienen, y MAYUSCULAS_CON_GUION solo para constantes de configuración.

Tarea 2 · La ficha de un producto

En js/main.js, con datos de tu tema:

  1. Declara seis variables que describan un producto: nombre, precio, categoría, unidades, disponible y descripción.
  2. Elige const o let justificando cada elección en un comentario.
  3. Escribe con una plantilla una línea de resumen legible.
  4. Calcula el precio con IVA y muéstralo con dos decimales.
  5. Comprueba con typeof que cada variable tiene el tipo que esperabas.
Objetivo mínimoSeis variables bien nombradas, del tipo correcto, y un resumen con plantilla.
Si lo tienesAñade un descuento en porcentaje y calcula el precio final redondeado.
RetoReasigna una const a propósito, lee el error y explica qué protege exactamente.

Checkpoint · fin de la sesión 2

  • Distingues const de let y usas const por defecto.
  • Nombras los cinco tipos que vas a usar.
  • Construyes texto con plantillas, no con el operador de suma.
  • Sabes por qué 0.1 + 0.2 no da exactamente 0.3.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué diferencia hay entre null y undefined?
  2. ¿Qué devuelve toFixed(2), un número o un texto?
  3. ¿Por qué no usamos var?
Ver respuestas

1 · undefined es que no se le ha dado valor; null es un vacío puesto a propósito.

2 · Un texto. Si vas a seguir calculando, conviértelo con Number().

3 · Porque ignora los bloques y permite redeclarar sin avisar, así que oculta errores.