Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Javascript: ¿Qué son, cómo usar y ejemplos del uso de callbacks?
Actualizado el 17 Diciembre, 2015 y leído 22,294 veces
Calificación: 9.45 / 10

Javascript: ¿Qué son, cómo usar y ejemplos del uso de callbacks?

Anexsoft

Hoy vamos a conocer un concepto muy usado en javascript y que lo usa bastante los frameworks, librerías de hoy en día, sobre todo NodeJS. Este es el uso de Callbacks.

 

¿Qué es un Callback?

En español, vendría ser la llamada de vuelta. En nuestro idioma, es pasar una función como parámetro para que dicha función se encargue de ejecutar nuestro parámetro. Posiblemente, tu vengas programando todo como lo haces en C#, PHP, Java y haces que tu función/método retorne algo para realizar la acción. Es lo que comunmente hacemos.

function hagoAlgo() {
    return 'Hola Anexsoft !!';
}

console.log(hagoAlgo());

En callback hacemos algo similar, solo que pasámos una función como parámetro, y ese algo que queremos que haga lo ejecutar la función que recibe nuestro parámetro. ¿Medio confuso no?

¿Un ejemplo de Callback?

Mucho de ustedes son jQueryanos, incluyéndome. Veamos un ejemplo simple, cuando hemos usado el API de jQuery para hacer peticiones XHR (Ajax), esperamos el resultado como parámetro de una función.

$.post('algun-lugar-de-mi-web.html', function(r){
    console.log(r);
}, 'json')

Si se dan cuenta, la variable "r", es la respuesta que va a retornar el servidor. Eso es un callback, le hemos pasado al $.post una función que se va a ejecutar internamente, donde esta nos va a setear dicha variable "r" con la respuesta que va a imprimir el servidor.

 

¿Estamos hablando Chino?

Si, puede parecer un poco complejo, a mi por lo menos me mareó al comienzo. Así que comencemos con un ejemplo bastante sencillo.

function hagoAlgo(callback) {
    callback();
}

hagoAlgo(function(){
    console.log('Hola Anexsoft !!');
})

Lo que he hecho es declarar una función llamada hagoAlgo, esta va a recibir como parámetro otra función. Dicho esto, el parámetro será ejecutado dentro de hagoAlgo.

 

Otro ejemplo pasándole un parámetro, a nuestro parámetro de hagoAlgo();

function hagoAlgo(callback) {
    callback('Hola Anexsoft !!');
}

hagoAlgo(function(valorQueMeSetearon){
    console.log(valorQueMeSetearon);
})

Es parecido al anterior solo que dentro de hagoAlgo() estamos seteando el valor. Entonces cuando llamemos a nuestra función hagoAlgo y declaremos la función que va a recibir como parámetro, vamos a declarar al variable que va a ser retornada, dicha variable va a ser seteada dentro de la función hagoAlgo.

 

Un ejemplo más, pero algo más real y complejo

Vamos a sumar 2 cajas de texo usando callback un evento click.

<input type="text" id="a" />
<input type="text" id="b" />
<button id="operar">
    Sumar
</button>
function Sumar(a, b, callback){
    return callback(a+b);
}

document.querySelector("#operar").addEventListener('click', function(){
    var a = parseInt(document.querySelector("#a").value),
        b = parseInt(document.querySelector("#b").value);
    
    Sumar(a, b, function(r){
        console.log('El resultado es ' + r);
    })
})

Nuestra función Sumar(a, b, callback), recibe 3 parámetros, los 2 primeros son los valores de la caja de texto y el segundo es el callback, este será el encargado de retornar el resultado de la sumatoria.

 

Adjunto un enlace en jsfiddle para que puedan apreciar el último ejemplo.

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.