3/8/2019 Funciones callback - Descubre las funciones en JavaScript - OpenClassrooms

programa.

Las funciones conocidas como callback, son funciones que se pasan como parámetros de otras
funciones y que se ejecutan dentro de éstas.

Este tipo de funciones se utilizan constantemente en JavaScript. Por ejemplo, cuando trabajamos con
arrays y utilizamos métodos como   forEach   o   map  , estamos pasando una función como parámetro
de otra, que se ejecuta por cada uno de los elementos del array.

Empecemos viendo un ejemplo sencillo:

javascript

1 function ejemplo1(fn) {
2 fn();
3 }
4
5 ejemplo1(function() {
6 console.log("hola");
7 }); // "hola"

De no una función llamada   ejemplo1   que toma como parámetro otra función, que he llamado   fn  
(aunque podría haberla llamado como quisiera). Dentro de   ejemplo1   se ejecutará la función  fn() .

Ahora, puedo llamar a la función   ejemplo1   sabiendo que tengo que pasarle como parámetro una
función (la que yo quiera). La función que le pase se ejecutará dentro de la función   ejemplo1   . En

el código de arriba, le paso una función anónima que muestra por consola la palabra   "hola"  .

Pasar parámetros a las funciones callback


Las funciones callback, como cualquier otra función, pueden tomar parámetros. veamos el siguiente
ejemplo:
javascript

1 function ejemplo2(fn) {
2 var nombre = "Pepe";
3 fn(nombre);
4 }
5
6 ejemplo2(function(nom) {
7 console.log("hola " + nom);
8 }); // "hola Pepe"

ElBy
callbak se ejecutará
continuing on the site,tomando como parámetro
you are agreeing to our use ofelcookies.
nombre "Pepe" cuando vaya a ser ejecutado
dentro de   ejemplo2   .

ACCEPT

https://openclassrooms.com/en/courses/4309531-descubre-las-funciones-en-javascript/5143716-funciones-callback 2/6
3/8/2019 Funciones callback - Descubre las funciones en JavaScript - OpenClassrooms

Por lo tanto, cuando ejecutemos la función   ejemplo2   , sabemos que ésta toma como argumento una
función callback con un nombre como argumento. De esta forma, podemos saludar utilizando el
nombre de nido dentro de   ejemplo2  . 

Ejemplos comunes del uso de funciones calback


En JavaScript, puedes encontrar callbacks prácticamente en todas partes. Por ejemplo, cuando quieres
añadir un gestor de eventos a un botón, utilizas un callback: una función que se ejecutará cuando el
usuario haga clic en el botón seleccionado.

Observa el siguiente ejemplo. La función   addEventListener()   , acepta otra función como parámetro
que se ejecutará cuando se produzca el evento:
javascript

1 document.getElementById("btn1").addEventListener("click", function() {
2 console.log("has pulsado el botón 1");
3 });

Este mismo código en jQuery también hace uso de una función callback:
javascript

1 $("#btn1").click(function() {
2 console.log("has pulsado el botón 1");
3 });

Un gestor de evento no es más que una función callback, que se ejecuta cuando ocurre el evento
especi cado.

Otro ejemplo, podemos encontrarlo en el método   map   de los array en JavaScript. Este método
crea un nuevo array con el resultado de la llamada a la función callback aplicada a cada uno de
los elementos del array.

Si por ejemplo, queremos pasar una función callback que multiplique cada elemento del array por dos.
, haremos lo siguiente:
javascript

1 var array = [1, 2, 4, 8];

2 var arrayDuplicado = array.map(function(elemento) {
3 return elemento * 2;
4 }); // [2, 4, 8, 16]

La variable   arrayDuplicado   contendrá un array en el que cada elemento del array anterior ha sido
By continuing on the site, you are agreeing to our use of cookies.
multiplicado por dos.

ACCEPT

https://openclassrooms.com/en/courses/4309531-descubre-las-funciones-en-javascript/5143716-funciones-callback 3/6
3/8/2019 Funciones callback - Descubre las funciones en JavaScript - OpenClassrooms

La función callback la de nimos nosotros, por lo que podemos hacer cualquier cosa que queramos con
los elementos del array. Esto permite una gran exibilidad.

Pensemos en cómo ha podido implementarse este método y hagamos uno similar utilizando una
función callback  .

Creando nuestra propia función map


Haciendo uso de un callback, podemos crear una función   map   parecida a la que hemos visto
anteriormente. Observa el siguiente código:
javascript

1 function miMap(arr, fn) {

2 var nuevoArray = [];
3 for (var i = 0; i < arr.length; i++) {
4 nuevoArray.push(fn(arr[i]));
5 }
6 return nuevoArray;
7 }

La función   miMap   acepta dos parámetros: un array y una función. Dentro de   miMap   se crea un
nuevo array y, haciendo uso de un bucle for, se itera a través del array.

En cada iteración, se ejecuta la función callback tomando como parámetro cada uno de los elementos
del array   fn(arr[i])   . El valor que retorna la función se inserta en el nuevo array   newArray.push   .

Finalmente la función   miMap   retorna el nuevo array. 

javascript

1 var array1 = miMap([1,2,3,4,5], function(e) {

2 return e * 2;
3 }); // [2, 4, 6, 8, 10]
4
5
6 var array2 = miMap([1,2,3,4,5], function(e) {
7 return e + 1;
8 }); // [2, 3, 4, 5, 6]

Ahora, podemos llamar a la función   miMap   y pasarle un array y la función callback que necesitemos
en cada caso. Por ejemplo, he llamado a la función   miMap   para crear dos arrays diferentes. En el
primer caso, he multiplicado los elementos por 2 y en el segundo he sumado 1 a cada uno de los
elementos del array original.

Durante este curso, has descubierto algunas de las particularidades más importantes de las funciones.
By continuing on the site, you are agreeing to our use of cookies.
Las funciones de primera clase, hacen que JavaScript sea un lenguaje diferente a otros que no
soportan esta característica. A partir de ahora, utiliza las funciones autoinvocadas cuando quieras
ACCEPT

https://openclassrooms.com/en/courses/4309531-descubre-las-funciones-en-javascript/5143716-funciones-callback 4/6