Introducción
Las funciones de orden superior son un concepto fundamental en JavaScript y en muchos otros lenguajes de programación funcional. Una función de orden superior es una función que puede tomar otras funciones como argumentos y/o devolver una función como resultado. Este concepto permite escribir código más modular y reutilizable.
Conceptos Clave
- Funciones como Argumentos: Una función de orden superior puede recibir una o más funciones como parámetros.
- Funciones que Devuelven Funciones: Una función de orden superior puede devolver una nueva función.
- Composición de Funciones: Permite combinar funciones simples para crear funciones más complejas.
Ejemplos Prácticos
Funciones como Argumentos
Las funciones de orden superior más comunes en JavaScript son map, filter y reduce.
Array.prototype.map()
El método map crea un nuevo array con los resultados de llamar a una función proporcionada en cada elemento del array que llama.
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]Array.prototype.filter()
El método filter crea un nuevo array con todos los elementos que pasen la prueba implementada por la función proporcionada.
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evens); // [2, 4]Array.prototype.reduce()
El método reduce aplica una función a un acumulador y a cada valor de un array (de izquierda a derecha) para reducirlo a un solo valor.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(acc, num) {
return acc + num;
}, 0);
console.log(sum); // 15Funciones que Devuelven Funciones
Una función de orden superior también puede devolver una nueva función.
function createMultiplier(multiplier) {
return function(num) {
return num * multiplier;
};
}
const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15Composición de Funciones
La composición de funciones es el proceso de combinar dos o más funciones para producir una nueva función.
function compose(f, g) {
return function(x) {
return f(g(x));
};
}
function add2(x) {
return x + 2;
}
function multiply3(x) {
return x * 3;
}
const add2ThenMultiply3 = compose(multiply3, add2);
console.log(add2ThenMultiply3(5)); // 21Ejercicios Prácticos
Ejercicio 1: Implementar map
Implementa tu propia versión del método map.
function myMap(array, callback) {
const result = [];
for (let i = 0; i < array.length; i++) {
result.push(callback(array[i], i, array));
}
return result;
}
// Prueba tu implementación
const numbers = [1, 2, 3, 4, 5];
const doubled = myMap(numbers, function(num) {
return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]Ejercicio 2: Implementar filter
Implementa tu propia versión del método filter.
function myFilter(array, callback) {
const result = [];
for (let i = 0; i < array.length; i++) {
if (callback(array[i], i, array)) {
result.push(array[i]);
}
}
return result;
}
// Prueba tu implementación
const numbers = [1, 2, 3, 4, 5];
const evens = myFilter(numbers, function(num) {
return num % 2 === 0;
});
console.log(evens); // [2, 4]Ejercicio 3: Implementar reduce
Implementa tu propia versión del método reduce.
function myReduce(array, callback, initialValue) {
let accumulator = initialValue;
for (let i = 0; i < array.length; i++) {
accumulator = callback(accumulator, array[i], i, array);
}
return accumulator;
}
// Prueba tu implementación
const numbers = [1, 2, 3, 4, 5];
const sum = myReduce(numbers, function(acc, num) {
return acc + num;
}, 0);
console.log(sum); // 15Resumen
En esta sección, hemos aprendido sobre las funciones de orden superior en JavaScript. Hemos visto cómo estas funciones pueden recibir otras funciones como argumentos y/o devolver funciones. También hemos explorado ejemplos prácticos de métodos de array como map, filter y reduce, y cómo podemos implementar nuestras propias versiones de estos métodos. Las funciones de orden superior son una herramienta poderosa para escribir código más modular y reutilizable.
En el siguiente módulo, profundizaremos en los objetos y arrays, explorando cómo trabajar con estas estructuras de datos fundamentales en JavaScript.
JavaScript: De Principiante a Avanzado
Módulo 1: Introducción a JavaScript
- ¿Qué es JavaScript?
- Configuración de tu Entorno de Desarrollo
- Tu Primer Programa en JavaScript
- Sintaxis y Conceptos Básicos de JavaScript
- Variables y Tipos de Datos
- Operadores Básicos
Módulo 2: Estructuras de Control
- Sentencias Condicionales
- Bucles: for, while, do-while
- Sentencias Switch
- Manejo de Errores con try-catch
Módulo 3: Funciones
- Definición y Llamada de Funciones
- Expresiones de Función y Funciones Flecha
- Parámetros y Valores de Retorno
- Ámbito y Closures
- Funciones de Orden Superior
Módulo 4: Objetos y Arrays
- Introducción a los Objetos
- Métodos de Objeto y la Palabra Clave 'this'
- Arrays: Conceptos Básicos y Métodos
- Iteración sobre Arrays
- Desestructuración de Arrays
Módulo 5: Objetos y Funciones Avanzadas
- Prototipos y Herencia
- Clases y Programación Orientada a Objetos
- Módulos e Importación/Exportación
- JavaScript Asíncrono: Callbacks
- Promesas y Async/Await
Módulo 6: El Modelo de Objetos del Documento (DOM)
- Introducción al DOM
- Selección y Manipulación de Elementos del DOM
- Manejo de Eventos
- Creación y Eliminación de Elementos del DOM
- Manejo y Validación de Formularios
Módulo 7: APIs del Navegador y Temas Avanzados
- Almacenamiento Local y de Sesión
- Fetch API y AJAX
- WebSockets
- Service Workers y Aplicaciones Web Progresivas (PWAs)
- Introducción a WebAssembly
Módulo 8: Pruebas y Depuración
- Depuración de JavaScript
- Pruebas Unitarias con Jest
- Pruebas de Integración
- Pruebas de Extremo a Extremo con Cypress
Módulo 9: Rendimiento y Optimización
- Optimización del Rendimiento de JavaScript
- Gestión de Memoria
- Manipulación Eficiente del DOM
- Carga Perezosa y División de Código
Módulo 10: Frameworks y Librerías de JavaScript
- Introducción a React
- Gestión de Estado con Redux
- Conceptos Básicos de Vue.js
- Conceptos Básicos de Angular
- Elegir el Framework Adecuado