1

Encontre esta función, pero no puedo entender dos cosas:

1) Para que sirve retornar una función que ejecutará el return, y no directamente ejecutar el return ?, además como esa función retornada recibe el parámetro element ?, he leído que es el patrón "higher-order", pero no entiendo su funcionalidad.

const comments = [
  { text: 'Hello', id: 1 },
  { text: 'World', id: 4 },
];

const byId = function(id){
   return function(element){
     return element.id === id;
   };
};

const comment = comments.find(byId(1));

console.log(comment)

2 respuestas 2

4

La utilidad en tu ejemplo no está clara porque el código es muy simple, pero te pongo un caso real en el que se hace uso de esta estrategia:

En , cuando trabajas con formularios, puedes decir cómo validar un campo. Lo más común es declarar el campo como obligatorio, o que la longitud mínima sea X, o que el valor sea un número con un mínimo y un máximo. Esto se hace declarando algo como (versión simplificada, no real):

let form= [
  {name:'campo1', validators: [<funcion validadora1>,<funcion validadora2>...]}
  {name:'campo2', validators: [<funcion validadora1>,<funcion validadora2>...]}
];

El propio Angular tiene unas funciones validadoras genéricas que se usan así:

let form= [
  {name:'campo1', validators: [Validators.required]}
  {name:'campo2', validators: [Validators.minLength(4)]}
];

Como imaginarás, Validators.required es una función a la que le pasas el campo y comprueba si está vacío. Eso es relativamente sencillo de implementar. En cambio, cuando escribimos Validators.minLength(4) ¡estamos llamando a una función! Puesto que lo que necesitamos es una función validadora que compruebe que la longitud sea la que le hemos pasado, el código sería algo así (de nuevo simplificado):

Validators.minLength= function(l) {
  return function (control) {
    return control.value.length>=l;
  };
};

De ese modo no tienes que implementar la función para cada longitud, tienes una "metafunción" que se encarga de generarla.

Un ejemplo mucho más tonto pero que quizá te lo deje más claro es el siguiente:

function generadorSaludos(saludado) {
  return function (hola) {
    console.log(`${hola} ${saludado}!`);
  };
}

let saludaAlex= generadorSaludos('Alex');

saludaAlex('Hola');
saludaAlex('Hello');
saludaAlex('Bonjoir');

4
  • Entonces al hacer saludaAlex, lo que estas haciendo es ejecutar la funcion que se retorna y el parámetro hola es hello, hello y bonjoir ?
    – ESCM
    Commented el 14 nov. 2017 a las 16:40
  • Sí, bueno son Hola, Hello y Bonjoir, pero creo que te refieres a eso. Al crear la función se "fija" el valor de saludado, con lo que el parámetro que pasas es el que se guarda en hola Commented el 14 nov. 2017 a las 16:47
  • @PabloLozano esto se entenderia que seria como un metodo dentro de un objeto en POO?, se podria decir que de esta forma funciona el prototype? Commented el 14 nov. 2017 a las 17:10
  • No, no tiene nada que ver con prototype o POO, es programación funcional Commented el 14 nov. 2017 a las 17:36
4

Las razones por la que se envia la funcion byid(1) como parámetro la funcion array.find() es para hacer el codigo mas claro de entender y para separar la logica del filtro de la colección en una funcion aparte en caso de cambios futuros.

Obviamente, esto:

 comments.find(byId(1));

Es mucho mas claro que especificar la funcion directamente como parametro asi:

 comments.find(function(element){ return element.id == 1; });

Fijate lo facil que es leer el codigo en el primer ejemplo que en el segundo. Esto tambien ayuda a que si en un futuro la propiedad donde esta el id definido cambia a ID, entonces solo se tendria que cambiar en la funcion byid() y no en todos los lugares donde le enviaste la funcion directamente al metodo find().

Me parece necesario aclarar el primer ejemplo que mostre y el segundo son en esencia lo mismo. El metodo byid() retorna una funcion, que es lo que el metodo find() requiere para filtrar el contenido.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.