Javascript : que sont les closures et comment les utiliser

Une closure (qui peut se traduire par fermeture en français) est une fonction qui garde accès au scope englobant dans laquelle elle est définie. Et ce même lorsque ce scope est “fermé”. Cette définition ma rendu très perplexe au début. Mais essayons de la comprendre. Pour cela faisons un petit rappel sur la portée des variables.

Portée des variables.

La portée d’une variable fait référence aux règles qui régissent l’accès et l’utilisation aux variables de nos script. S’interroger sur la portée d’une variable permet de savoir si la variable est bien définie et si donc on a le droit de s’en servir.

Lorsqu’on commence à programmer on se pose rarement la question.

La portée globale

var le_yo="yo";
alert(yo);

Ici notre variable le_yo est défnit globalement, elle est donc disponible dans tout notre script c’est pour cela que l’on peut ecrire alert(le_yo); sans problèmes. Rien de bien sorcier ici.

La portée locale

C’est ici que cela se corse :

function dire_yo(){
  var loc = "yo":
  alert(yo);
}

Ici la variable loc a une portée locale car elle est défnit dans une fonction. En fait chaque fonction javascript dispose de son scope. Le scope, pour prendre une image, c’est un peu le bac à sable de notre fonction : l’ensemble de son terrain de jeu. On y a notre pelle, notre rateau.

Ce qu’il faut comprendre c’est qu’on ne peut pas accéder à notre pelle et notre rateau en dehors du bac à sable.

Ce code ne fonctionnera pas :

function dire_yo(){
  var loc = "yo";
  alert(yo);
}
alert(loc);

On se mangera l’erreur Uncaught ReferenceError: loc is not defined. Et c’est normal, parce que loc n’existe que dans la fonction dire_yo !

En revanche ce code marche :

var glob="yaaaaaaaa"
function dire_yo(){
  var loc = "yo";
  alert(yo);
}
alert(glob);
// alertera : 'yaaaaaaaa'

Ici la variable glob est définie dans le scope global donc elle est accessible dans tout notre script. On peut même modifier cette variable dans notre fonction :

var glob="yaaaaaaaa"
function dire_yo(){
  var loc = "yo";
  glob= glob+"ouuuuuu";
}
dire_yo();
alert(glob);
// alertera : 'yaaaaaaaaouuuuuu'

Ici on execute d’abord notre fonction, qui va ajouter ouuuuuu à la variable glob et du coup on aura une alerte yaaaaaaaaouuuuuu.