JavaScript moderno: Intl, copias y groupBy

⏱ 30 minutos
📶 Nivel: intermedio
⭐ Extra opcional (no cuenta para el progreso)

⚠️ Soporte

Todo lo de esta página está disponible en las versiones actuales de los navegadores principales y en Node LTS. Si apuntas a navegadores antiguos, consulta Can I use.

1.Intl: fechas, monedas y listas sin librerías

Intl formatea números, fechas y listas según el idioma. Para precios en soles usa Intl.NumberFormat con currency: "PEN".

▶ Formatos con Intl

Código (edítalo y pulsa Ejecutar)

<script>
const precio = new Intl.NumberFormat("es-PE", { style: "currency", currency: "PEN" });
console.log(precio.format(1234.5));

const fecha = new Intl.DateTimeFormat("es-PE", { dateStyle: "full" });
console.log(fecha.format(new Date()));

const lista = new Intl.ListFormat("es", { style: "long", type: "conjunction" });
console.log(lista.format(["HTML", "CSS", "JavaScript"]));

const rel = new Intl.RelativeTimeFormat("es", { numeric: "auto" });
console.log(rel.format(-1, "day"), "·", rel.format(3, "hour"));
</script>

Página (resultado)

Consola

💡 Consejo

Crea el formateador una vez y reutilízalo: es más rápido que llamar a toLocaleString() en cada iteración.

2.Arrays: toSorted, toReversed, with y toSpliced

Los métodos clásicos sort() y reverse() modifican el array original. Las versiones nuevas devuelven una copia y dejan el original intacto, clave en React y en cualquier código que evite mutaciones.

▶ Sin mutar el original

Código (edítalo y pulsa Ejecutar)

<script>
const notas = [14, 9, 18, 12];
console.log(notas.toSorted((a, b) => a - b));   // ordenado
console.log(notas.toReversed());                 // invertido
console.log(notas.with(1, 20));                  // cambia la posición 1
console.log(notas.toSpliced(0, 1));              // quita el primero
console.log("original:", notas);                 // sigue igual
</script>

Página (resultado)

Consola

3.Agrupar: Object.groupBy y Map.groupBy

Agrupar elementos por una clave era un reduce largo. Ahora es una sola llamada.

▶ Agrupar productos por categoría

Código (edítalo y pulsa Ejecutar)

<script>
const productos = [
  { nombre: "Taladro", cat: "herramientas" },
  { nombre: "Martillo", cat: "herramientas" },
  { nombre: "Cemento", cat: "obra" },
];
const porCat = Object.groupBy(productos, (p) => p.cat);
console.log(porCat);
console.log(porCat.herramientas.length, "herramientas");
</script>

Página (resultado)

Consola

⚠️ Nota

Object.groupBy devuelve un objeto sin prototipo. Si necesitas claves que no sean texto, usa Map.groupBy.

📒 Apuntes para llevar

Intl.NumberFormat, DateTimeFormat, ListFormat y RelativeTimeFormat formatean según el idioma.
toSorted, toReversed, with y toSpliced no mutan el original.
Object.groupBy y Map.groupBy agrupan en una sola llamada.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta.

¿Qué diferencia hay entre sort() y toSorted()?

¿Cómo formateas un precio en soles?

¿Qué hace Object.groupBy(lista, fn)?