Funciones Callback

¿Qué son las funciones callback en JavaScript?

Una función callback es una función que se pasa como argumento a otra función y se ejecuta después de que la función que la recibe haya terminado su trabajo. Esto es muy útil para manejar tareas asincrónicas o acciones que deben realizarse en un orden específico.

En términos simples: una función callback es como decirle a una función principal: «Oye, cuando termines, llama a esta otra función para continuar con el proceso.»

Veamos un ejemplo de un programa simple:

function modify(array,callback){
    // hacemos algo
    callback(array)
    array.push('armando')
    // Despues de hacer algo...
    callback(array)
}

const names = ['gabriel','pedro','antonio']

modify(names,function(array) {console.log("Imprimo el arreglo: "+array)})

Vamos analizar el código por partes:

1. La Función modify

function modify(array, callback) {
    // Hacemos algo
    callback(array);
    array.push('armando'); // Agregamos un nuevo elemento al arreglo
    // Después de hacer algo...
    callback(array);
}

Esta función recibe dos argumentos:

  1. array: Un arreglo que será modificado dentro de la función.
  2. callback: Una función que será llamada (o ejecutada) en momentos específicos dentro de modify.

Dentro de modify:

  • Primero se llama a callback(array) para ejecutar la función callback pasada, con el arreglo actual como argumento.
  • Luego, se modifica el arreglo agregando el string 'armando' usando array.push.
  • Finalmente, se llama a callback(array) nuevamente para que se ejecute con el arreglo actualizado.

2. El Arreglo Inicial names

const names = ['gabriel', 'pedro', 'antonio'];

Este es un arreglo de strings que contiene tres nombres: 'gabriel', 'pedro', y 'antonio'.

Será pasado como argumento a la función modify.

3. Llamada a la Función modify

modify(names, function(array) {
    console.log("Imprimo el arreglo: " + array);
});

Aquí llamamos a modify con dos argumentos:

  1. names: El arreglo inicial.
  2. Una función callback anónima que toma el arreglo (array) como argumento y lo imprime en la consola.

Ejecución del Código: Paso a Paso

Primera llamada a callback(array)

  • El arreglo inicial ['gabriel', 'pedro', 'antonio'] se pasa a la función callback:
console.log("Imprimo el arreglo: " + array);

Se imprime: Imprimo el arreglo: gabriel,pedro,antonio.

Modificación del Arreglo

  • Se agrega 'armando' al arreglo usando array.push('armando').
  • El arreglo ahora es: ['gabriel', 'pedro', 'antonio', 'armando'].

Segunda llamada a callback(array)

  • El arreglo actualizado se pasa nuevamente a la función callback:
console.log("Imprimo el arreglo: " + array);

Salida del Programa

Cuando ejecutas este código, la consola mostrará lo siguiente:

Imprimo el arreglo: gabriel,pedro,antonio
Imprimo el arreglo: gabriel,pedro,antonio,armando

Conclusión

Los callbacks son una forma poderosa de hacer que las funciones sean más flexibles y reutilizables, permitiéndoles ejecutar lógica específica según las necesidades del usuario. En este caso, la lógica es imprimir el arreglo en la consola, pero podrías usar cualquier otra función en su lugar.

Video en youtube, este es el enlace:

Otros código ejemplo más simples:

// Con funciones
function login (name,printMessage){
    printMessage(name);
}

// Con constantes flechas
/*const login = (name,printMessage)=>{
    printMessage(name);
}*/

login('Laura',(name)=>{
    console.log('Hola '+name);
})

login('Pedro',(name)=>{
    console.log('Hello '+name);
})

Ejemplo simple:

const suma=(a,b,metodo)=>{
    return metodo(a,b)
}

resultado=suma(2,3,(a,b)=>a+b);
console.log(resultado);

Ejemplo simple:

function suma(a,b,metodo){
    resultado_suma=metodo(a,b)
    return resultado_suma;
}

resultado=1;
resultado=suma(12,3,function(a,b){return a+b});
console.log(resultado);

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *