JavaScript de Cero a Experto / Strings, números y fechas

Reto: el recibo perfecto

Reto30 min60 XP

El módulo completo en una sola pieza: vas a generar el recibo mensual de "Mi Bolsillo" con columnas alineadas, plata en formato colombiano, la fecha en español y una validación con regex. Es exactamente el tipo de salida que producen las apps de verdad — y la produce TU código.

Reto

El recibo perfecto

Media25 min60 XP(×2 sin mirar la solución)

Qué debes construir

Con estos datos de partida:

datos.js

const gastos = [
{ nombre: "Almuerzo", valor: 18000 },
{ nombre: "Bus", valor: 5800 },
{ nombre: "Café", valor: 4500 },
];
const titular = { nombre: "Sara", celular: "3001234567" };

Genera exactamente este recibo en la consola:

terminal

====== MI BOLSILLO ======

Fecha: miércoles, 15 de julio de 2026

-------------------------

Almuerzo....... $ 18.000

Bus............ $ 5.800

Café........... $ 4.500

-------------------------

TOTAL.......... $ 28.300

Celular válido: true

Requisitos:

Formato COP con Intl.NumberFormat (es-CO, moneda COP, sin decimales) — el formateador se crea UNA vez y se reutiliza.
La fecha (new Date(2026, 6, 15) para que la salida sea reproducible) mostrada con Intl.DateTimeFormat y dateStyle: "full".
Columnas alineadas: el nombre con padEnd(15, ".") y el valor ya formateado con padStart(10, " ").
Una función linea que reciba un gasto (con destructuring) y devuelva su renglón — las líneas del recibo salen de map + esa función, no copiadas a mano.
El TOTAL con reduce, mostrado con la MISMA función linea.
Todo el recibo es UN template literal multilínea (los renglones de gastos se unen con join).
Validación regex: el celular del titular contra /^3\d{9}$/, imprimiendo Celular válido: true.

Reglas

Cero concatenación con + para armar el recibo: template literals.
La plata NUNCA se formatea a mano: solo Intl.
La función linea se usa para gastos Y para el total (misma alineación garantizada).

25:00

Cuando estés listo, arranca el reloj.

El razonamiento — tres decisiones hacen elegante este recibo:

Los formateadores se crean una vez, arriba. Son la parte costosa de Intl; después, format() es gratis. Además concentran el "idioma" del recibo en un solo lugar: cambiar a otro país sería tocar dos líneas.
La función linea es LA pieza. Encapsula la alineación (padEnd/padStart) y el formato de plata; gastos y total pasan por ella, así que es IMPOSIBLE que queden desalineados entre sí. Cuando el total necesitó un renglón, no se copió el formato: se le fabricó un objeto y se reutilizó la función.
El recibo es datos → transformación → plantilla. Primero se calculan las piezas (renglones con map + join, total con reduce, fecha formateada) y al final UNA plantilla multilínea las ensambla. Se lee de arriba a abajo como una receta.

Autoevaluación: ¿tu recibo usa UN solo template literal (nada de sumas de strings)? ¿la plata sale de Intl (con sus puntos de miles correctos)? ¿el TOTAL pasa por la misma función linea que los gastos? ¿la regex tiene sus anclas ^ y $? Cuatro síes: acabas de escribir el tipo de código de presentación que se ve en apps profesionales.

Nota: si agregas un cuarto gasto al array, el recibo crece solo — renglones por map, total por reduce. Esa es la prueba de que separaste datos de presentación: los datos cambian, la plantilla ni se entera.

Qué sigue

Módulo 6 cerrado — y con él, un hito: ya dominas el LENGUAJE. Variables, control, funciones, arrays, objetos, strings, números, fechas y regex: todo lo que JavaScript es en sí mismo. Lo que viene es donde el lenguaje toca la página: el módulo 7 abre el DOM — leer y modificar el HTML desde JavaScript, el poder que convierte documentos en aplicaciones.