Array Methods Avanzados y Higher Order Functions
Volver a clases
Fundamentos de Programación●●Intermedio

Array Methods Avanzados y Higher Order Functions

120 min
0 vistas

Encadenamiento de métodos, funciones de orden superior y pipelines funcionales.

Métodos avanzados de arrays

  • map, filter, reduce para transformar, filtrar y resumir datos. Ejemplo:
    javascript
    1const nums = [1, 2, 3, 4];
    2const dobles = nums.map((n) => n * 2);
    3const pares = nums.filter((n) => n % 2 === 0);
    4const total = nums.reduce((acc, n) => acc + n, 0);
  • find, some, every para búsquedas y validaciones rápidas. Ejemplo:
    javascript
    1const usuarios = [{ id: 1 }, { id: 2 }];
    2const encontrado = usuarios.find((u) => u.id === 2);
    3const hayId3 = usuarios.some((u) => u.id === 3);
    4const todosConId = usuarios.every((u) => typeof u.id === "number");
  • sort, flat, flatMap para ordenar y aplanar estructuras. Ejemplo:
    javascript
    1const valores = [3, 1, 2];
    2valores.sort((a, b) => a - b); // [1, 2, 3]
    3const anidado = [1, [2, 3], [4]];
    4const plano = anidado.flat(); // [1, 2, 3, 4]
    5const frases = ["hola mundo", "js es genial"];
    6const palabras = frases.flatMap((f) => f.split(" "));

Method chaining y pipelines

  • Encadenar métodos permite crear flujos de datos legibles y mantenibles. Ejemplo:
    javascript
    1const resultado = productos
    2  .filter((p) => p.stock > 0)
    3  .map((p) => ({ ...p, precioFinal: p.precio * 0.9 }))
    4  .sort((a, b) => a.precioFinal - b.precioFinal);
  • Buenas prácticas: mantener funciones pequeñas, evitar mutaciones y reutilizar helpers. Ejemplo:
    javascript
    1const conDescuento = (p) => ({ ...p, precioFinal: p.precio * 0.9 });
    2const enStock = (p) => p.stock > 0;
    3
    4const resultado = productos.filter(enStock).map(conDescuento);

Higher Order Functions (HOF)

  • Funciones que reciben o retornan funciones para reutilización y composición. Ejemplo:
    javascript
    1const aplicarOperacion = (a, b, operacion) => operacion(a, b);
    2const suma = (x, y) => x + y;
    3const total = aplicarOperacion(3, 4, suma);
  • Ejemplo de función que devuelve otra función.
    javascript
    1const multiplicarPor = (factor) => (numero) => numero * factor;
    2const duplicar = multiplicarPor(2);

Ejemplos de Código

3 ejemplos

Agrupar por categoría

javascript
1const productos = [
2  { nombre: "Mouse", categoria: "tech" },
3  { nombre: "Silla", categoria: "muebles" },
4  { nombre: "Teclado", categoria: "tech" },
5];
6
7const porCategoria = productos.reduce((acc, p) => {
8  acc[p.categoria] = acc[p.categoria] || [];
9  acc[p.categoria].push(p);
10  return acc;
11}, {});

Función de orden superior

javascript
1const multiplicarPor = (factor) => (numero) => numero * factor;
2const duplicar = multiplicarPor(2);

FlatMap para palabras

javascript
1const frases = ["hola mundo", "js es genial"];
2const palabras = frases.flatMap((f) => f.split(" "));

Recursos

3 recursos disponibles

¡Hora de Practicar!

PrácticaIntermedio15 min

Práctica guiada - Filtrado de productos

Práctica

Crear un filtro por categoría y precio con filter, map y sort.

Desafío de Código

EjercicioIntermedio15 min

Ejercicios - Encadenamiento

Ejercicios

(1) Pipeline para top 3 productos, (2) total con reduce, (3) búsqueda con find.

Documentación Oficial

DocumentaciónPrincipiante15 min

JavaScript.info - Array methods

Guía completa de métodos de arrays.

ALVESC ACADEMY - Plataforma Educativa