Funciones de orden superior
Una función que acepta y / o devuelve otra función se denomina función de orden superior .
Es de orden superior , porque en lugar de cadenas, números o booleanos, que va más alta para operar en funciones. Bastante meta.
Con funciones en JavaScript, puede
- Almacenarlos como variables
- Úselos en matrices
- Asignarlos como propiedades de objeto (métodos)
- Pasarlos como argumentos
- Devolverlos de otras funciones
Como cualquier otro dato . Esa es la clave aquí.
Las funciones operan con datos
Las cadenas son datos
sayHi = (name) => `Hi, ${name}!`; result = sayHi('User'); console.log(result); // 'Hi, User!' Los números son datos
double = (x) => x * 2; result = double(4); console.log(result); // 8 Los booleanos son datos
getClearance = (allowed) => (allowed ? 'Access granted' : 'Access denied'); result1 = getClearance(true); result2 = getClearance(false); console.log(result1); // 'Access granted' console.log(result2); // 'Access denied' Los objetos son datos
getFirstName = (obj) => obj.firstName; result = getFirstName({ firstName: 'Yazeed' }); console.log(result); // 'Yazeed' Las matrices son datos
len = (array) => array.length; result = len([1, 2, 3]); console.log(result); // 3 Estos 5 tipos son ciudadanos de primera clase en todos los idiomas principales.
¿Qué los hace de primera clase? Puede pasarlos, almacenarlos en variables y matrices, usarlos como entradas para cálculos. Puede utilizarlos como cualquier dato .
Las funciones también pueden ser datos
Funciones como argumentos
isEven = (num) => num % 2 === 0; result = [1, 2, 3, 4].filter(isEven); console.log(result); // [2, 4] ¿Ves cómo se filterusa isEvenpara decidir qué números conservar? isEven, una función , era un parámetro de otra función .
Se llama por filtercada número y usa el valor devuelto trueo falsepara determinar si un número debe mantenerse o descartarse.
Funciones de retorno
add = (x) => (y) => x + y; addrequiere dos parámetros, pero no todos a la vez. Es una función que solicita solo x, que devuelve una función que solicita solo y.
Nuevamente, esto solo es posible porque JavaScript permite que las funciones sean un valor de retorno, como cadenas, números, booleanos, etc.
Todavía puede suministrar xe yinmediatamente, si lo desea, con una doble invocación
result = add(10)(20); console.log(result); // 30 O xahora y ymás tarde:
add10 = add(10); result = add10(20); console.log(result); // 30 Rebobinemos ese último ejemplo. add10es el resultado de llamar addcon un parámetro. Intente iniciar sesión en la consola.
add10es una función que toma yay devuelve x + y. Después de suministrar y, se apresura a calcular y devolver el resultado final.
Mayor reutilización
Probablemente, el mayor beneficio de los HOF es una mayor reutilización. Sin ellos, los métodos de estreno de matriz de JavaScript - map, filtery reduce - no existirían!
Aquí hay una lista de usuarios. Haremos algunos cálculos con su información.
users = [ { name: 'Yazeed', age: 25 }, { name: 'Sam', age: 30 }, { name: 'Bill', age: 20 } ]; Mapa
Sin funciones de orden superior, siempre necesitaríamos bucles para imitar mapla funcionalidad.
getName = (user) => user.name; usernames = []; for (let i = 0; i < users.length; i++) { const name = getName(users[i]); usernames.push(name); } console.log(usernames); // ["Yazeed", "Sam", "Bill"] ¡O podríamos hacer esto!
usernames = users.map(getName); console.log(usernames); // ["Yazeed", "Sam", "Bill"] Filtrar
En un mundo sin HOF, también necesitaríamos bucles para recrear filterla funcionalidad.
startsWithB = (string) => string.toLowerCase().startsWith('b'); namesStartingWithB = []; for (let i = 0; i < users.length; i++) { if (startsWithB(users[i].name)) { namesStartingWithB.push(users[i]); } } console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] ¡O podríamos hacer esto!
namesStartingWithB = users.filter((user) => startsWithB(user.name)); console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] Reducir
Sí, reduce también ... ¡¡No se pueden hacer muchas cosas interesantes sin funciones de orden superior !! ?
total = 0; for (let i = 0; i < users.length; i++) { total += users[i].age; } console.log(total); // 75 ¿Cómo es esto?
totalAge = users.reduce((total, user) => user.age + total, 0); console.log(totalAge); // 75 Resumen
- Las cadenas, números, bools, matrices y objetos se pueden almacenar como variables, matrices y propiedades o métodos.
- JavaScript trata las funciones de la misma manera.
- Esto permite funciones que operan en otras funciones: funciones de orden superior .
- Mapear, filtrar y reducir son ejemplos principales, ¡y hacen que los patrones comunes como transformar, buscar y sumar listas sean mucho más fáciles!
I’m on Twitter if you’d like to talk. Until next time!
Take care,
Yazeed Bzadough
yazeedb.com