Marc Semper Lloret
← JavaScript: el lenguaje

Sesión 11 · Semana 4

Métodos declarativos

Hoy · Hoja de ruta

  1. 1. Aprende: map, filter, find, some, every, sort y reduce.
  2. 2. Haz: Sustituye tus bucles por métodos y compara la legibilidad.
  3. 3. Comprueba: Eliges el método por lo que devuelve, no por costumbre.

Antes de empezar · 5 minutos, sin apuntes

  1. En la sesión 8 escribiste aplicarATodos y filtrarPor. ¿Qué devolvía cada una?
  2. ¿Qué diferencia hay entre «quiero los caros» y «quiero el primero caro»?
  3. ¿Y entre «quiero saber si hay alguno caro» y «quiero los caros»?

Cada método devuelve una cosa distinta

Método Devuelve Pregunta que responde
map Un array del mismo tamaño «Transforma cada uno»
filter Un array más corto «Quédate con los que cumplan»
find Un elemento, o undefined «Dame el primero que cumpla»
findIndex Una posición, o -1 «¿En qué posición está?»
some true o false «¿Hay alguno que cumpla?»
every true o false «¿Cumplen todos?»
sort El array ordenado «Ponlos en este orden»
reduce Un solo valor «Combínalos todos en uno»

Elige por lo que necesitas recibir

La mitad de los errores con estos métodos son de elección, no de escritura: usar filter y quedarse con [0] cuando lo que se quería era find, o usar find esperando una lista.

Pregúntate qué quieres tener después: ¿otra lista, un elemento, un sí o un no, o un número?

En código

const productos = [
  { nombre: "Teclado", precio: 89.9, stock: 4 },
  { nombre: "Ratón", precio: 24.5, stock: 0 },
  { nombre: "Monitor", precio: 199, stock: 7 }
];

const nombres = productos.map((p) => p.nombre);
const disponibles = productos.filter((p) => p.stock > 0);
const caro = productos.find((p) => p.precio > 100);
const hayAgotados = productos.some((p) => p.stock === 0);
const todosBaratos = productos.every((p) => p.precio < 500);

sort y su trampa

[10, 9, 100].sort();                  // [10, 100, 9]  ← compara como texto
[10, 9, 100].sort((a, b) => a - b);   // [9, 10, 100]

Sin función de comparación, sort convierte a texto. Con números hay que pasarla siempre: a - b ascendente, b - a descendente. Para textos con acentos y mayúsculas:

productos.sort((a, b) => a.nombre.localeCompare(b.nombre));

Recuerda además que sort muta: ordena sobre una copia si el orden original importa.

reduce, el que da más miedo

const total = productos.reduce((suma, p) => suma + p.precio * p.stock, 0);

Se lee así: empieza con 0, y por cada producto, quédate con lo que llevabas más lo que aporta este. Es el acumulador de la sesión 5, escrito en una línea. Si te cuesta leerlo, escríbelo primero con for...of y tradúcelo después.

Encadenar

const resumen = productos
  .filter((p) => p.stock > 0)
  .sort((a, b) => a.precio - b.precio)
  .map((p) => `${p.nombre}: ${p.precio.toFixed(2)} €`);

Cada método devuelve un array, así que el siguiente puede trabajar sobre él. Se lee de arriba abajo como una frase: filtra, ordena, formatea. Con sort en medio, ojo: aquí es seguro porque filter ya devolvió un array nuevo.

En js/catalogo.js, sobre tu lista de productos:

  1. nombresDisponibles(productos) con filter y map.
  2. buscarPorNombre(productos, texto) con find, sin distinguir mayúsculas.
  3. hayAgotados(productos) con some.
  4. valorAlmacen(productos) con reduce.
  5. ordenarPorPrecio(productos, ascendente) que no mute el original.
  6. Reescribe dos de tus bucles de la semana 2 con estos métodos y comenta cuál se lee mejor.
Objetivo mínimoLas cinco funciones, cada una con el método adecuado.
Si lo tienesUna consulta encadenada que responda a una pregunta compuesta.
RetoAgrupa los productos por categoría usando reduce.

Checkpoint · fin de la sesión 11

  • Eliges el método por lo que devuelve.
  • Pasas función de comparación a sort con números.
  • Encadenas dos o tres métodos y lo lees como una frase.
  • Sabes traducir un reduce a un bucle y al revés.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué devuelve find si no encuentra nada?
  2. ¿Por qué [10, 9, 100].sort() da un orden raro?
  3. ¿Qué diferencia hay entre some y filter?
Ver respuestas

1 · undefined, y hay que comprobarlo antes de usar el resultado.

2 · Porque sin comparador ordena como texto, y "100" va antes que "9".

3 · some devuelve un booleano; filter, un array con los que cumplen.