Datos, tipos y expresiones

Tres horas. Media hora para entender dónde se ejecuta tu código, cómo se guarda un dato y qué hace JavaScript cuando mezclas tipos, y dos horas y media prediciendo resultados y comprobándolos uno a uno.

Se explica

25 minutos · conceptos y demostración

La sesión entera gira alrededor de una idea incómoda: JavaScript casi nunca se niega a hacer algo. Convierte, adivina y devuelve un resultado. Entender qué devuelve y por qué es lo que separa programar de probar cosas.

Un lenguaje que vive dentro del navegador

Todo navegador moderno lleva dentro un motor de JavaScript: un programa que lee tu código y lo ejecuta. No hay que instalar nada ni compilar nada. Abres la consola, escribes una expresión y te responde.

2 + 3
"Pixel" + "Store"
10 / 4
new Date().getFullYear()

Escribir en la consola sirve para probar; lo que se conserva va en un fichero. Se crea js/main.js y se enlaza desde el head con defer:

console.log("El código se está ejecutando");

<script src="js/main.js" defer></script>

defer

Le dice al navegador: descarga el fichero mientras lees el documento, y ejecútalo cuando el documento esté completo. Sin defer, el código se ejecuta antes de que exista la página, y en la UD4 eso significaría buscar elementos que todavía no están.

Las razones son las mismas que en CSS: reutilización, caché y mantener separadas las tres capas. Un onclick mete comportamiento dentro de la estructura, que es justo lo que llevamos dos unidades evitando.

Leer un error en vez de asustarse

Uncaught ReferenceError: precioTotal is not defined
    at main.js:1:13

Ese es el aspecto de un error provocado por escribir console.log(precioTotal); sin haber declarado esa variable. Tiene tres partes y las tres importan: el tipo de error (ReferenceError), el mensaje (is not defined) y la posición (main.js, línea 1, columna 13). Con eso ya sabes qué mirar antes de tocar nada.

Guardar un valor con un nombre

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

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

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 está typeof, con una rareza histórica que conviene conocer:

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

Para construir texto se usan plantillas, escritas con acento grave, que permiten insertar valores con ${} y ocupar varias líneas:

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

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

A partir de aquí, siempre plantillas: concatenar con + es donde nacen la mitad de los espacios perdidos.

JavaScript tiene además un único tipo numérico, en coma flotante, y 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 con toFixed(2), que devuelve texto.

La conversión automática, el gran tropiezo

JavaScript, cuando mezclas tipos, convierte por su cuenta:

"3" + 1      // "31"   con texto, el + concatena
"3" - 1      // 2      el - no sabe concatenar: convierte a número
"3" * "2"    // 6
true + 1     // 2      true vale 1

La regla práctica: la suma con un texto a un lado concatena; el resto de operadores aritméticos convierten a número.

Esto no es una curiosidad de examen. Es exactamente el fallo que te espera en la UD4, cuando leas el valor de un campo:

const introducido = "10";      // lo que da un campo de formulario
introducido + 5                // "105"   ← el error clásico
Number(introducido) + 5        // 15      ← lo correcto

Comparar, y qué cuenta como verdadero

5 == "5"     // true   compara después de convertir
5 === "5"    // false  compara valor y tipo

En un if, JavaScript pregunta si el valor es truthy o falsy. Los falsos son exactamente estos seis:

false, 0, "", null, undefined, NaN

Todo lo demás es verdadero, incluidos "0", "false", [] y {}. Esto explica un fallo muy común:

const unidades = 0;

if (unidades) {
  // no entra: 0 es falsy, aunque sea un valor perfectamente válido
}

if (unidades !== undefined) {
  // esto sí comprueba lo que querías comprobar
}

En los operadores lógicos hay una distinción que importa por lo mismo:

true && false     // false   y
true || false     // true    o
!true             // false   no

const nombre = entrada || "Sin nombre";   // si entrada es falsy: también con 0 o ""
const stock = recibido ?? 0;              // solo si es null o undefined

El segundo suele ser el que quieres: el || también sustituiría un 0 legítimo.

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.

Se trabaja

150 minutos · práctica sobre tu propio proyecto

Los dos primeros pasos ponen el código en marcha. Del tercero en adelante se trabaja la única habilidad que de verdad se evalúa hoy: predecir qué va a hacer el lenguaje antes de ejecutarlo.

Paso 1 · Tu primer script · 20 min

1. Crea js/main.js y enlázalo en index.html con defer.
2. Escribe tres console.log con tu nombre, el nombre de tu proyecto y el año actual calculado.
3. Provoca un error a propósito y anota su tipo, su mensaje y su línea.
4. Corrígelo.
5. Enlaza el mismo fichero en el resto de páginas.

Antes de continuar: el mensaje aparece en la consola de las cuatro páginas, y sabes demostrarlo sin recurrir a que «parece que funciona».

Paso 2 · La ficha de un producto · 30 min

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.
6. Reasigna una const a propósito, lee el error y escribe qué protege exactamente.

7 + 2      // 9
7 - 2      // 5
7 * 2      // 14
7 / 2      // 3.5
7 % 2      // 1   resto de la división
7 ** 2     // 49  potencia

let stock = 10;
stock += 5;    // 15
stock -= 2;    // 13
stock++;       // 14

Number("10")       // 10
Number("10,5")     // NaN   ← la coma no es el separador decimal
parseInt("10px")   // 10    se queda con lo que puede leer
parseFloat("10.5") // 10.5
Number.isNaN(Number("hola"))   // true

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

Paso 3 · Predice y comprueba · 35 min

Es el trabajo central de la sesión. Crea js/predicciones.js. Para cada expresión, escribe primero tu predicción en un comentario y solo después ejecútala:

"5" + 3
"5" - 3
5 + true
"10" > 9
"10" > "9"
0 === -0
NaN === NaN
[] == false
null + 1
undefined + 1
Number("")
Boolean("false")

Las predicciones escritas antes son la tarea; ejecutar las doce expresiones son dos minutos. Cuando falles una, no te limites a corregir el comentario: escribe qué regla habías aplicado mal. Ese renglón vale más que el acierto.

Paso 4 · La entrada llega como texto · 25 min

Sobre tu proyecto, y simulando lo que en la UD4 vendrá de un formulario:

1. Declara tres datos «de formulario» como textos: unas unidades, un precio y un código.
2. Conviértelos correctamente en el momento de leerlos, no más tarde.
3. Calcula un total y comprueba que no es NaN.
4. Escribe una comprobación que detecte una entrada no numérica y avise en vez de calcular con basura.
5. Prueba tu comprobación con estos cinco valores y anota qué hace con cada uno: "12", "12,5", "", " 7 " y "doce".

El quinto apartado es el que enseña: dos de los cinco pasan por número sin serlo del todo, y la comprobación ingenua los deja entrar.

Paso 5 · Nombres que se leen solos · 20 min

Este fragmento funciona y es ilegible:

const x = 89.9;
const y = 3;
const z = x * y;
const w = z * 1.21;
let f = false;
const d = "Teclado mecánico compacto con retroiluminación";
const D = 12;
const precio_final = w;

1. Renómbralo entero. Cada nombre debe decir qué contiene.
2. Hay dos nombres que además incumplen el criterio del módulo por su forma, no por su significado: localízalos y corrígelos.
3. Decide en cada caso si va const o let, y justifica los que cambies.
4. Aplica después la misma revisión a tu propio main.js: si algún nombre necesita un comentario para entenderse, el nombre está mal.

Paso 6 · Predicciones cruzadas · 20 min

Escribe cinco expresiones tramposas para un compañero, con su respuesta apuntada aparte. Deben cumplir dos condiciones: que usen solo lo visto hoy, y que tú sepas explicar por qué dan lo que dan.

Intercambiadlas. Sobre las que recibas:

1. Predice cada una por escrito.
2. Ejecútalas y compara.
3. En las que falles, pide la explicación a su autor y comprueba si te convence. Si el autor no sabe explicarla, esa expresión no valía como trampa: era una casualidad.

Ampliación si has completado el trabajo

Primero termina y comprueba los seis pasos. Los dos retos siguen la misma idea: el lenguaje no falla, responde, y hay que saber qué va a responder.

Reto 1 · Por qué "10" > "9" es falso

"10" > 9      // true
"10" > "9"    // false

1. Explica por escrito qué comparación hace cada una, y por qué el resultado cambia al poner comillas en el segundo operando.
2. Predice y comprueba estas otras cinco: "2" > "10", "b" > "a", "B" > "a", [] + [], [] + {}.
3. La tercera sorprende a casi todo el mundo. Averigua qué se está comparando en realidad y escríbelo.
4. Enuncia en una frase la regla general: cuándo compara JavaScript como números y cuándo como texto.
5. Relaciónalo con un caso real: una lista de códigos de producto ordenada alfabéticamente frente a la misma lista ordenada numéricamente. ¿Dónde acaba el "10"?

Reto 2 · El formulario que miente

Estos son los valores que un formulario real puede entregar para un campo de cantidad. Todos son texto.

"12"        un número normal
"012"       con cero delante
"12,5"      con coma decimal, como se escribe en español
"12.5"      con punto decimal
"  12  "    con espacios alrededor
""          el campo vacío
"1e3"       notación científica
"12px"      alguien pegó algo de más
"doce"      texto sin ningún número
"-3"        negativo
"Infinity"  literalmente

Escribe una sola función de validación que decida, para cada uno, si es una cantidad aceptable y cuál es su valor numérico. Antes de escribirla:

1. Decide qué debería aceptar tu programa y qué no. No hay una respuesta única: "12,5" puede ser un error del usuario o una cantidad perfectamente legítima escrita como se escribe aquí. Documenta tu criterio.
2. Prueba qué hace Number() con cada uno, y qué hace parseInt(). Anota los tres casos en los que no coinciden.
3. Dos de la lista pasan Number() sin ser cantidades razonables. Identifícalos y explica qué comprobación adicional hace falta.
4. Comprueba tu función contra los once valores y construye una tabla con lo que aceptas, lo que rechazas y lo que conviertes antes de aceptar.

Cierre

5 minutos · comprobación y recuerdo