domingo, 4 de octubre de 2020

Javascript: Ejemplo de función usada como parámetro (callback).

Las funciones son ciudadanos de primera clase en Javascript. Cuando se dice primera clase, es porque las funciones se tratan como cualquier otro tipo, ya sea primitivo o resultado de instanciar una clase creada por el desarrollador. Es decir, una función se puede utilizar igual que los otros tipos,  almacenándola en una array, utilizándola como parámetro de otra función, almacenándola  en una variable, etc.

Se muestra a continuación un ejemplo que hace uso de una función como parámetro de otra. Este ejemplo se muestra la misma funcionalidad codificada con 3 sintaxis distintas: funciones clásicas, funciones asignadas a una variable y funciones arrow asignadas a una variable.

1. Funciones clásicas

    function hi (name, lastName) {return `Hi ${name} ${lastName}`;}
    function bye (name, lastName) {return `Bye ${name} ${lastName}`;}
    function greeting (f) {
        const name ="pepe";
        const lastName = "suarez";
        return f(name, lastName);
    }
    console.log (greeting(hi));
    console.log (greeting(bye));

2.  Funciones asignadas a una variable

    const hi = function (name, lastName) {
        return `Hi ${name} ${lastName}`;
        }
    const bye =  function (name, lastName) {
        return `Bye ${name} ${lastName}`;
        }
    const greeting = function (f) {
        const name ="pepe";
        const lastName = "suarez";
        return f(name, lastName);
    }
    console.log (greeting(hi));
    console.log (greeting(bye));

3. Funciones arrow asignadas a una variable

    const hi = (name, lastName) => `Hi ${name} ${lastName}`;
    const bye = (name, lastName) => `Bye ${name} ${lastName}`;
    const greeting = (f) => {
        const name ="pepe";
        const lastName = "suarez";
        return f(name, lastName);
    }
    console.log (greeting(hi));
    console.log (greeting(bye));

 
 
Estos tres códigos son equivalentes, es decir si los ejecutamos obtenemos el mismo resultado:

    Hi pepe suarez
    Bye pepe suarez

Las funciones conocidas como callback, son funciones que se pasan como parámetros de otras funciones y que se ejecutan dentro de éstas. Es decir el ejemplo tiene  dos funciones hi y bye que son llamadas como callbacks desde la función greeting.

Esta posibilidad de llamar a funciones desde otras funciones que las han recibido como parámetros, acerca a javascript hacia la programación funcional. La programación funcional permite desarrollar código más estable, porque está menos acoplado y es más legible frente a la programación imperativa.

Si se supone que no se puede utilizar una función como parámetro. Una posible codificación para conseguir una funcionalidad idéntica a la mostrada podría ser:

    function hi (name, lastName) {return `Hi ${name} ${lastName}`;}
    function bye (name, lastName) {return `Bye ${name} ${lastName}`;}
    function greeting (greetingType) {
        const name ="pepe";
        const lastName = "suarez";
        if (greetingType=="hiType"){
          return hi(name, lastName);
        } else {
          return bye(name, lastName);
        }
    }
   console.log (greeting("hiType"));
   console.log (greeting("byeType"));

Este código tiene sabor a lo que se conoce como programación tipo imperativa.

Si fuese necesario incluir un nuevo tipo de saludo por ejemplo “Buenas tardes” los cambios a realizar serían en cada caso serían:

- En el caso “tipo funcional” tendríamos que añadir la función goodEvening(name, lastName) y una  llamada a la función greetings, es decir greetings(goodEvening). Ningún cambio más es necesrio.

- En el caso “tipo imperativo” tendríamos que añadir la función goodEvening(name, lastName), un  nuevo tipo de saludo greeting(“goodEveningType”) y modificar la función greeting para que el if considerase que pueden existir un nuevo tipo de saludo.

Conclusión.

La posibilidad de utilizar funciones como parámetros permite generar un código más orientado a la extensión que a la modificación. Esto es debido a que en el caso “tipo funcional” extendemos el comportamiento del sistema sin la necesidad de cambiar nada en la función greeting. La modificación es más costosa en el caso “tipo imperativo” incluye tener que modificar la propia función greeting.


 

No hay comentarios:

Publicar un comentario