Exemple de fonction anonyme

Une fonction anonyme est simplement une fonction qui n'a pas d'identificateur. Elle est le plus souvent utilisée lors de l'assignation d'un gestionnaire d'événement.

Le code suivant ajoute un gestionnaire d'événement à un bouton :

<button>Cliquer ici pour dire bonjour</button>
<p></p>

<script>
  let bouton = document.querySelector("button");
  bouton.addEventListener("click", direBonjour);

  function direBonjour() {
    let para = document.querySelector("p");
    para.innerHTML = "Bonjour!";
  }
</script>

Un clic sur le bouton insère le texte "Bonjour!" dans le paragraphe (élément p).

Puisque la fonction direBonjour n'est utilisée que dans l'assignation du gestionnaire d'événement et qu'elle n'est jamais appelée ailleurs dans le code, certains préféreront en faire une fonction anonyme (sans nom) et la définir directement dans l'espace réservé aux paramètres de addEventListener.

Ainsi, enlevons son identificateur à la fonction et plaçons sa définition en paramètre de la méthode addEventListener.

<script>
  let bouton = document.querySelector("button");
  bouton.addEventListener("click", direBonjour);
                                        ^
                                        |
  function direBonjour() { -------------+
    let para = document.querySelector("p");
    para.innerHTML = "Bonjour!";
  }
</script>

Ce qui donne au final le code suivant :

<script>
  let bouton = document.querySelector("button");
  bouton.addEventListener("click", function() {
    let para = document.querySelector("p");
    para.innerHTML = "Bonjour!";
  });
</script>

Cela résulte en un code plus compact qui peut sembler plus obscur au programmeur débutant, mais auquel on s'habitue assez rapidement et dont le style est largement répandu dans le monde JavaScript.