Funciones de orden superior
Las funciones de orden superior en JavaScript son aquellas que pueden recibir otras funciones como argumentos, o bien, pueden devolver funciones. Estas funciones son fundamentales para escribir código más limpio, modular y reutilizable. Aquí te explico para qué se usan y por qué son importantes:
Beneficios de usar funciones de orden superior:
- Modularidad: Facilitan la creación de piezas de código reutilizables y modulares, lo que mejora la mantenibilidad.
- Legibilidad: Las operaciones en arrays y otros contextos se pueden expresar de manera declarativa, lo que suele ser más fácil de entender que los bucles tradicionales.
- Facilitan la programación funcional: Permiten implementar conceptos clave de la programación funcional, como la inmutabilidad, composición y uso de funciones puras.
Aquí tienes una explicación detallada de cada una de las funciones de orden superior, con ejemplos para ayudarte a entender cómo se utilizan en JavaScript:
1. Array.prototype.map() #
Descripción: Crea un nuevo array con los resultados de aplicar una función a cada uno de los elementos del array original.
Ejemplo:
1const numeros = [1, 2, 3]; 2const dobles = numeros.map(num => num * 2); 3console.log(dobles); // [2, 4, 6]Salida de consola [ 2, 4, 6 ]
2. Array.prototype.filter() #
Descripción: Crea un nuevo array con todos los elementos que pasen una prueba especificada por una función.
Ejemplo:
1const numeros = [1, 2, 3, 4]; 2const pares = numeros.filter(num => num % 2 === 0); 3console.log(pares); // [2, 4]Salida de consola [ 2, 4 ]
3. Array.prototype.reduce() #
Descripción: Aplica una función a un acumulador y a cada valor del array (de izquierda a derecha) para reducirlo a un solo valor.
Ejemplo:
1const numeros = [4, 7, 1, 5]; 2const suma = numeros.reduce((acumulador, num) => acumulador + num, 0); 3console.log(suma); // 17Salida de consola 17
4. Array.prototype.forEach() #
Descripción: Ejecuta una función para cada elemento del array. A diferencia de map, forEach no devuelve un nuevo array.
Ejemplo:
1const frutas = ["manzana", "banana", "cereza"]; 2frutas.forEach(fruta => console.log(fruta));Salida de consola manzana banana cereza
5. Array.prototype.find() #
Descripción: Devuelve el primer elemento del array que cumpla con la condición especificada en la función. Si no se encuentra, devuelve undefined.
Ejemplo:
1const numeros = [1, 2, 3, 4]; 2const encontrado = numeros.find(num => num > 2); 3console.log(encontrado); // 3Salida de consola 3
6. Array.prototype.some() #
Descripción: Verifica si al menos un elemento del array cumple con la condición especificada en la función. Devuelve true o false.
Ejemplo:
1const numeros = [1, 2, 3, 4]; 2const hayMayorQueTres = numeros.some(num => num > 3); 3console.log(hayMayorQueTres); // trueSalida de consola true
7. Array.prototype.every() #
Descripción: Verifica si todos los elementos del array cumplen con la condición especificada en la función. Devuelve true o false.
Ejemplo:
1const numeros = [1, 2, 3, 4]; 2const todosSonMenoresQueCinco = numeros.every(num => num < 5); 3console.log(todosSonMenoresQueCinco); // trueSalida de consola true
8. Array.prototype.sort() #
Descripción: Ordena los elementos de un array en su lugar y devuelve el array. Por defecto, ordena los elementos como cadenas de texto.
Ejemplo:
1const numeros = [4, 2, 3, 1]; 2numeros.sort(); 3console.log(numeros); // [1, 2, 3, 4]Salida de consola [ 1, 2, 3, 4 ]
9. Array.prototype.reduceRight() #
Descripción: Aplica una función a un acumulador y a cada valor del array (de derecha a izquierda) para reducirlo a un solo valor.
Ejemplo:
1const letras = ['a', 'b', 'c', 'd']; 2const resultado = letras.reduceRight((acumulador, letra) => acumulador + letra); 3console.log(resultado); // "dcba"Salida de consola dcba
10. Array.prototype.flatMap() #
Descripción: Primero aplica una función a cada elemento, luego aplana el resultado en un nuevo array. Es equivalente a map seguido de flat con profundidad 1.
Ejemplo:
1const arr = [1, 2, 3]; 2const resultado = arr.flatMap(x => [x, x * 2]); 3console.log(resultado); // [1, 2, 2, 4, 3, 6]Salida de consola [ 1, 2, 2, 4, 3, 6 ]
11. Array.prototype.concat() #
Descripción: Combina dos o más arrays y devuelve un nuevo array sin modificar los arrays originales.
Ejemplo:
1const arr1 = [1, 2]; 2const arr2 = [3, 4]; 3const combinado = arr1.concat(arr2); 4console.log(combinado); // [1, 2, 3, 4]Salida de consola [ 1, 2, 3, 4 ]
12. Array.prototype.slice() #
Descripción: Devuelve una copia de una porción del array dentro de un nuevo array, sin modificar el array original.
Ejemplo:
1const numeros = [5, 7, 3, 4, 9]; 2const subarray = numeros.slice(1, 3); 3console.log(subarray); // [7, 3]Salida de consola [ 7, 3 ]
13. Array.prototype.splice() #
Descripción: Cambia el contenido de un array eliminando, reemplazando, o añadiendo nuevos elementos.
Ejemplo:
1const numeros = [5, 3, 7, 2, 9, 1]; 2numeros.splice(1, 3, 'a', 'b'); 3console.log(numeros); // [ 5, 'a', 'b', 9, 1 ]Salida de consola [ 5, 'a', 'b', 9, 1 ]
14. Array.prototype.flat() #
Descripción: Aplana un array de arrays en un solo array. Puedes especificar la profundidad del aplanado.
Ejemplo:
1const arr = [1, [2, [3, [4]]]]; 2const plano = arr.flat(2); 3console.log(plano); // [1, 2, 3, [4]]Salida de consola [ 1, 2, 3, [ 4 ] ]
15. Array.prototype.reverse() #
Descripción: Invierte el orden de los elementos de un array in situ.
Ejemplo:
1const numeros = [1, 2, 3]; 2numeros.reverse(); 3console.log(numeros); // [3, 2, 1]Salida de consola [ 3, 2, 1 ]
16. Array.prototype.includes() #
Descripción: Verifica si un array contiene un elemento específico. Devuelve true o false.
Ejemplo:
1const numeros = [1, 2, 3]; 2const incluyeDos = numeros.includes(2); 3console.log(incluyeDos); // trueSalida de consola true
17. Array.prototype.indexOf() #
Descripción: Devuelve el primer índice en el que se encuentra un elemento dado en el array, o -1 si no se encuentra.
Ejemplo:
1const numeros = [1, 2, 3, 2]; 2const indice = numeros.indexOf(2); 3console.log(indice); // 1Salida de consola 1
18. Array.prototype.lastIndexOf() #
Descripción: Devuelve el último índice en el que se encuentra un elemento dado en el array, o -1 si no se encuentra.
Ejemplo:
1const numeros = [1, 2, 3, 2]; 2const ultimoIndice = numeros.lastIndexOf(2); 3console.log(ultimoIndice); // 3Salida de consola 3
19. Array.prototype.join() #
Descripción: Une todos los elementos de un array en una cadena, separada por un delimitador opcional.
Ejemplo:
1const numeros = [1, 2, 3]; 2const cadena = numeros.join('-'); 3console.log(cadena); // "1-2-3"Salida de consola 1-2-3
20. Array.prototype.keys() #
Descripción: Devuelve un nuevo objeto de iterador de array que contiene las claves de índice para cada elemento del array.
Ejemplo:
1const numeros = [6, 8, 2]; 2const iterador = numeros.keys(); 3for (let key of iterador) { 4 console.log(key); // 0 1 2 5}Salida de consola 0 1 2
21. Array.prototype.values() #
Descripción: Devuelve un nuevo objeto de iterador de array que contiene los valores para cada índice del array.
Ejemplo:
1const numeros = [6, 8, 2]; 2const iterador = numeros.values(); 3for (let valor of iterador) { 4 console.log(valor); // 6 8 2 5}Salida de consola 6 8 2
22. Array.prototype.entries() #
Descripción: Devuelve un nuevo objeto de iterador de array que contiene pares clave/valor para cada índice en el array.
Ejemplo:
1const numeros = [6, 8, 2]; 2const iterador = numeros.entries(); 3for (let [indice, valor] of iterador) { 4 console.log(indice, valor); 5}Salida de consola 0 6 1 8 2 2
Estas funciones de orden superior son fundamentales para trabajar de manera eficiente con arrays en JavaScript, proporcionando herramientas poderosas para manipular y procesar datos.
Resumen del tema
Conceptos clave #
- Funciones de Orden Superior (Higher-Order Functions): funciones que reciben otras funciones como argumentos (callbacks) y/o devuelven una función.
- Transformación y Reducción Inmutable:
.map(fn): transforma cada elemento devolviendo un nuevo array de igual longitud..filter(fn): filtra elementos basándose en un predicado booleano..reduce(fn, init): pliega el array en un único valor acumulado (de izquierda a derecha).
- Búsqueda y Verificación:
.find(),.some(),.every(),.includes(),.indexOf(). - Mutación vs Inmutabilidad:
.slice()y.concat()devuelven copias inmutables;.splice(),.sort()y.reverse()mutan el array in-situ.
Qué debes recordar #
Prioriza métodos declarativos e inmutables (map, filter, reduce) frente a bucles manuales para lograr un código limpio, legible y modular.