Callbacks en

À propos de Callbacks

Les fonctions callback sont des fonctions passées en argument à d'autres fonctions. La fonction callback peut ensuite être appelée pour déclencher une action. Souvent, les callbacks servent à traiter le résultat d'un travail effectué, ou à réagir à un événement. Elles s'utilisent aussi bien en programmation synchrone qu'asynchrone.

const sideLength = 5;

// Caller function takes a callback function
function applySideLength(callback) {
  return callback(sideLength);
}

// Callback must expect the possible argument from the calling function
function areaOfSquare(side) {
  return side * side;
}

applySideLength(areaOfSquare); // => 25

Tu peux aussi écrire une fonction callback sous forme d'expression de fonction :

applySideLength(function squarePerimeter(side) {
  return side * 4;
});

C'est un schéma bien pratique en JavaScript, car JavaScript est conçu comme un environnement d'exécution mono-thread, où un seul appel de fonction peut s'exécuter à la fois. Pendant ce temps, l'environnement ne peut ni réagir à d'autres événements ni poursuivre l'exécution tant que la fonction n'a pas renvoyé la main.

De nombreux appels d'API (fonctions d'entrée-sortie, timers et écouteurs d'événements) utilisent un mécanisme asynchrone pour mettre de côté l'appel de fonction en cours jusqu'à ce que le travail soit terminé. Une fois celui-ci achevé, une fonction callback est placée dans la file de messages, de sorte que, lorsque l'environnement d'exécution se trouve entre deux appels de fonction, les messages sont traités en appelant la fonction callback.

Les fonctions callback sont aussi utiles parce qu'elles peuvent référencer des variables de leur portée de closure, inaccessibles à la fonction depuis laquelle elles sont appelées par la suite.

Quelques exemples concrets de fonctions callback

Gestionnaires d'événements

Les gestionnaires d'événements sont un cas d'usage courant des callbacks en JavaScript. Les événements du navigateur comme 'onload' ou 'onclick' sont des signaux qui peuvent déclencher l'appel de fonctions. Un objet DOM [Document Object Model possède une méthode addEventListener qui enregistre une fonction callback à appeler lorsqu'il « entend » qu'un événement s'est produit.

document.addEventListener('onload', function () {
  alert('The webpage has now been loaded');
});

Convention Node.js

Dans Node.js, les fonctions callback suivent une convention pour contrôler le déroulement d'un programme. Elles obéissent à ce schéma : le premier argument de la fonction callback peut recevoir une Error ou null ; les deuxième et suivants arguments reçoivent les données que la fonction appelante est censée envoyer.

Si une erreur se produit, les deuxième et suivants arguments peuvent être absents, et tu ne peux donc pas compter sur leur présence.

function operation(a, b, callback) {
  // Work ...

  if (/* an error occurs */) {
    return callback(new Error('An error occurred'))
  }

  // On success:
  callback(null, data)
}

function callback(error, returnedData) {
  if (error) {
    // An error occurred, handle it here.
    return
  }

  // No error occurred, continue with the returned data.
}

operation(1, 2, callback)

On retrouve souvent ce schéma avec les fonctions asynchrones, pour aider à contrôler le déroulement du programme.

Des callbacks déguisés

Les fonctions courantes d'Array utilisent des fonctions callback pour définir leur comportement :

• Array.prototype.forEach:

  • Accepte une fonction callback et l'applique à chaque élément d'un tableau.

    [1, 2, 3].forEach(function (element) {
      doSomething(element);
    });
    // => doSomething() is invoked 3 times, once with each element
    

• Array.prototype.map

  • Accepte une fonction callback, l'applique à chaque élément d'un tableau et se sert du résultat pour créer un nouveau tableau.

    [1, 2, 3].map(function (element) {
      return element + 1;
    });
    // => [2, 3, 4]
    

• Array.prototype.reduce

  • Accepte une fonction callback, l'applique à chaque élément d'un tableau et transmet le résultat à l'appel suivant.

    [1, 2, 3].reduce(function (runningSum, element) {
      return runningSum + element;
    }, 0);
    // => 6