Le scope en JavaScript
Non, je ne parle pas d’un téléscope. Ici, ce sera le “scope”, le mot d’origine anglophone qui signifie “la portée”. Plus spécifiquement, nous allons donc voir la portée (de quoi ?) en JavaScript !
Le scope des variables en JavaScript est une notion très importante et souvent très mal maîtrisée. Il peut provoquer des effets de bords non désirables et quand il s’agit de débugger son code ensuite… Je ne vous parle pas de la galère !
Il faut savoir que cela peut également jouer sur les conflits entre différents code JavaScript. Typiquement, cela peut se retrouver régulièrement sur des développements sous WordPress puisque par défaut, un wp_add_inline_script va placer vos informations dans le scope global.
Une variable locale
Dès lors que vous créez une variable dans une fonction avec le mot-clé var, on dit alors que celle-ci est locale. Elle peut être utilisée à partir du niveau actuel de la fonction mais également dans les scopes du dessous.
Cependant, il est également possible de redéfinir cette variable (str dans notre exemple) dans le scope du dessous et d’en faire une nouvelle variable locale. De fait, on ne pointe pas vers la même valeur.
Une variable globale
A l’inverse, une variable globale est définit en dehors d’une fonction. Elles sont stockées dans la mémoire de votre navigateur et sont accessibles n’importe où dans les différents scripts.
On a l’impression que le comportement est identique à celui d’une variable locale mais pas tout à fait. Ce qui est similaire, c’est l’effet “descendant” et accessible dans les scopes du dessous.
Il est donc important de bien comprendre ce système et de bien définir ses variables. Ne pas le faire, c’est prendre le risque que notre valeur soit affectée par une variable disponible dans un scope plus large. C’est donc une source de conflits potentiels
ES6 : Let et Const
let & const sont des nouveautés apportées par ES6. La différence entre eux se situe sur la modification de la valeur de la variable.
const permet de définir une variable et initialise celle-ci de manière unique. C’est à dire qu’une fois défini, la variable ne sera plus modifiable. Quant à let, la variable le sera toujours (comme pour var).
En revanche, ces 2 mots-clés vont plus loin dans la notion de la portée. Ils permettent de déclarer des variables dont la portée est limitée à celle du bloc dans lequel elles sont déclarées.
Il est important de comprendre cette nouvelle notion ! De manière général, on utilise de moins en moins var et plutôt const et let avec ES6. Il faut donc se familiariser avec cette nouvelle différence.