Les funcions d'ordre superior són un concepte fonamental en JavaScript i altres llenguatges de programació funcionals. Aquest tipus de funcions poden rebre altres funcions com a arguments i/o retornar funcions com a resultat. Això permet una gran flexibilitat i potència en la programació, ja que permet crear funcions més abstractes i reutilitzables.
Què és una Funció d'Ordre Superior?
Una funció d'ordre superior és una funció que compleix almenys una de les següents condicions:
- Rep una o més funcions com a arguments.
- Retorna una funció com a resultat.
Exemples de Funcions d'Ordre Superior
Exemple 1: Funció que rep una altra funció com a argument
function saluda(nom) {
return `Hola, ${nom}!`;
}
function processaUsuari(nom, funcio) {
return funcio(nom);
}
console.log(processaUsuari("Anna", saluda)); // Sortida: Hola, Anna!En aquest exemple, processaUsuari és una funció d'ordre superior perquè rep saluda com a argument.
Exemple 2: Funció que retorna una altra funció
function creaSalutacio(salutacio) {
return function(nom) {
return `${salutacio}, ${nom}!`;
};
}
const saludaEnCatala = creaSalutacio("Hola");
console.log(saludaEnCatala("Pere")); // Sortida: Hola, Pere!En aquest cas, creaSalutacio és una funció d'ordre superior perquè retorna una funció.
Funcions d'Ordre Superior en JavaScript
JavaScript inclou diverses funcions d'ordre superior predefinides que són molt útils per treballar amb arrays i altres col·leccions. Algunes de les més comunes són:
forEachmapfilterreducesomeevery
forEach
La funció forEach executa una funció proporcionada una vegada per cada element de l'array.
const numeros = [1, 2, 3, 4, 5];
numeros.forEach(function(numero) {
console.log(numero);
});
// Sortida: 1 2 3 4 5map
La funció map crea un nou array amb els resultats de la funció proporcionada aplicada a cada element de l'array original.
const numeros = [1, 2, 3, 4, 5];
const dobles = numeros.map(function(numero) {
return numero * 2;
});
console.log(dobles); // Sortida: [2, 4, 6, 8, 10]filter
La funció filter crea un nou array amb tots els elements que compleixen la condició de la funció proporcionada.
const numeros = [1, 2, 3, 4, 5];
const parells = numeros.filter(function(numero) {
return numero % 2 === 0;
});
console.log(parells); // Sortida: [2, 4]reduce
La funció reduce aplica una funció a un acumulador i a cada element de l'array (de dreta a esquerra) per reduir-lo a un únic valor.
const numeros = [1, 2, 3, 4, 5];
const suma = numeros.reduce(function(acumulador, numero) {
return acumulador + numero;
}, 0);
console.log(suma); // Sortida: 15Exercicis Pràctics
Exercici 1: Utilitzant map
Crea una funció que rebi un array de números i retorni un nou array amb cada número elevat al quadrat.
function elevaAlQuadrat(nums) {
return nums.map(function(num) {
return num * num;
});
}
// Prova la funció
const nums = [1, 2, 3, 4, 5];
console.log(elevaAlQuadrat(nums)); // Sortida: [1, 4, 9, 16, 25]Exercici 2: Utilitzant filter
Crea una funció que rebi un array de números i retorni un nou array amb només els números imparells.
function filtraImparells(nums) {
return nums.filter(function(num) {
return num % 2 !== 0;
});
}
// Prova la funció
const nums = [1, 2, 3, 4, 5];
console.log(filtraImparells(nums)); // Sortida: [1, 3, 5]Exercici 3: Utilitzant reduce
Crea una funció que rebi un array de números i retorni la suma de tots els números.
function sumaTotal(nums) {
return nums.reduce(function(acumulador, num) {
return acumulador + num;
}, 0);
}
// Prova la funció
const nums = [1, 2, 3, 4, 5];
console.log(sumaTotal(nums)); // Sortida: 15Conclusió
Les funcions d'ordre superior són una eina poderosa en JavaScript que permeten escriure codi més abstracte, modular i reutilitzable. Comprendre com utilitzar aquestes funcions pot millorar significativament la teva capacitat per treballar amb arrays i altres col·leccions de dades. Practica amb els exemples i exercicis proporcionats per consolidar els teus coneixements.
JavaScript: De Principiant a Avançat
Mòdul 1: Introducció a JavaScript
- Què és JavaScript?
- Configuració del Teu Entorn de Desenvolupament
- El Teu Primer Programa en JavaScript
- Sintaxi i Conceptes Bàsics de JavaScript
- Variables i Tipus de Dades
- Operadors Bàsics
Mòdul 2: Estructures de Control
- Declaracions Condicionals
- Bucles: for, while, do-while
- Declaracions Switch
- Gestió d'Errors amb try-catch
Mòdul 3: Funcions
- Definició i Crida de Funcions
- Expressions de Funció i Funcions Fletxa
- Paràmetres i Valors de Retorn
- Àmbit i Tancaments
- Funcions d'Ordre Superior
Mòdul 4: Objectes i Arrays
- Introducció als Objectes
- Mètodes d'Objecte i Paraula Clau 'this'
- Arrays: Conceptes Bàsics i Mètodes
- Iteració sobre Arrays
- Desestructuració d'Arrays
Mòdul 5: Objectes i Funcions Avançades
- Prototips i Herència
- Classes i Programació Orientada a Objectes
- Mòduls i Importació/Exportació
- JavaScript Asíncron: Callbacks
- Promeses i Async/Await
Mòdul 6: El Model d'Objectes del Document (DOM)
- Introducció al DOM
- Selecció i Manipulació d'Elements del DOM
- Gestió d'Esdeveniments
- Creació i Eliminació d'Elements del DOM
- Gestió i Validació de Formularis
Mòdul 7: APIs del Navegador i Temes Avançats
- Emmagatzematge Local i de Sessió
- Fetch API i AJAX
- WebSockets
- Service Workers i Aplicacions Web Progressives (PWAs)
- Introducció a WebAssembly
Mòdul 8: Proves i Depuració
- Depuració de JavaScript
- Proves Unitàries amb Jest
- Proves d'Integració
- Proves de Cap a Cap amb Cypress
Mòdul 9: Rendiment i Optimització
- Optimització del Rendiment de JavaScript
- Gestió de Memòria
- Manipulació Eficient del DOM
- Càrrega Per Mandat i Divisió de Codi
Mòdul 10: Frameworks i Llibreries de JavaScript
- Introducció a React
- Gestió d'Estat amb Redux
- Conceptes Bàsics de Vue.js
- Conceptes Bàsics d'Angular
- Triar el Framework Adequat