Chaque variable vit dans un territoire délimité : en dehors de ce territoire, elle devient invisible ou inexistante. C’est ce territoire que l’on appelle la portée, et il détermine où une variable peut être lue ou modifiée sans provoquer d’erreur.
Trois niveaux à connaître
Une variable déclarée avec var a une portée de fonction ; avec let ou const, elle a une portée de bloc, limitée aux accolades { } où elle apparaît. Dans un script de thème WordPress qui manipule plusieurs blocs de contenu en boucle, bien choisir sa portée évite qu’une variable d’une itération n’interfère avec une autre.
Exemple
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// Affiche 0, 1, 2
for (var j = 0; j < 3; j++) {
setTimeout(() => console.log(j), 100);
}
// Affiche 3, 3, 3Avec let, chaque tour de boucle crée sa propre portée pour i ; avec var, une seule variable partagée est modifiée par toutes les itérations avant l’exécution différée du setTimeout.
À ne pas confondre avec la fermeture
- La portée définit où une variable est visible ; la fermeture (closure) désigne la capacité d’une fonction à « se souvenir » des variables de la portée où elle a été créée, même après que cette portée a techniquement pris fin.
- La portée globale, accessible partout, est à limiter au strict nécessaire : trop de variables globales augmentent le risque de collision de noms entre scripts, notamment entre plugins WordPress chargés sur la même page.
- Un linter configuré en mode strict signale généralement toute variable utilisée sans déclaration explicite, symptôme d’une fuite vers la portée globale.