16

Paso de argumentos a las funciones de callback.

JavaScript modules and build steps are getting more numerous and complicated, but what about boilerplate in new frameworks? Modulos JavaScript y construir pasos son cada vez más numerosos y complicados, pero ¿qué pasa en nuevos frameworks?

Por defecto no se puede pasar argumentos a una función de callback. Por ejemplo:

function callback() {
  console.log('Hi human');
}

document.getElementById('someelem').addEventListener('click', callback);

You can take advantage of the closure scope in Javascript to pass arguments to callback functions. Check this example: Puede aprovechar el closure scope en Javascript para pasar argumentos a funciones de callback. Compruebe este ejemplo:

function callback(a, b) {
  return function() {
    console.log('sum = ', (a+b));
  }
}

var x = 1, y = 2;
document.getElementById('someelem').addEventListener('click', callback(x, y));

Que son closures?

Closures son funciones que hacen referencia a las variables independientes (gratis). En otras palabras, la función definida en el closure “recuerda” el scope en el que se creó. Check MDN Documentation para conocer mas.

Así de esta manera los argumentos x y y están en el scope de la función de callback cuando se le llama.

Otro método para hacerlo es usando el método bind. Por ejemplo:

var alertText = function(text) {
  alert(text);
};

document.getElementById('someelem').addEventListener('click', alertText.bind(this, 'hello'));

Hay una ligera diferencia en el rendimiento de ambos métodos, ver jsperf.