La portée désigne la possibilité d’accéder ou non à certaines variables (et donc aux valeurs, fonctions ou objets contenus à l’intérieur de ces variables) depuis un endroit précis d'un script.
En JavaScript, les variables peuvent être définies soit localement, soit globalement dans le script.
La portée va influer sur le fait qu’on puisse récupérer la valeur qu’elles contiennent et travailler avec ces variables n’importe où dans notre script ou non.
Une variable est dite « locale » lorsqu’elle est définie à l’intérieur d’une fonction (donc localement).
Une variable locale n’est accessible que localement, c’est-à-dire seulement à un endroit spécifique dans le script.
Par exemple, lorsqu’on déclare une variable à l’intérieur d’une fonction, on ne pourra utiliser cette variable qu’à l’intérieur même de notre fonction.
Par défaut, cette variable ne sera pas accessible depuis le reste de notre script. Voyons immédiatement quelques exemples pour nous en assurer.
Dans ce premier exemple, on définit une variable x à l’intérieur d’une fonction qu’on appelle locale().
On dit que x est définie localement par rapport à notre fonction. x ne peut donc être utilisée qu’à l’intérieur de locale().
Cette fonction a justement pour but d’afficher la valeur contenue dans la variable x. Ainsi, lorsqu’on l’appelle, on obtient la valeur de x sans aucun problème.
Cependant, si on veut afficher directement la variable x ou modifier son contenu depuis l’extérieur de notre fonction, cela ne va pas fonctionner :
Comme vous pouvez le constater, le JavaScript ne va pas trouver la variable dont on souhaite afficher le contenu et donc rien ne va s’afficher.
Une variable est globale si elle est définie dans l’espace global d’un script, c’est-à-dire en dehors de toute fonction.
Une variable globale possède une portée globale et est donc accessible depuis n’importe où dans un script, même à l’intérieur des fonctions (attention, nous venons de voir que la réciproque est fausse).
Ici, nous avons défini une nouvelle variable x, globale. Comme x est une variable globale, on va pouvoir s’en servir n’importe où dans le script.
Ainsi, on peut commencer par effectuer des calculs sur x dans l’espace global (ici, on lui ajoute 6 par exemple) puis on peut se resservir de x dans n’importe quelle fonction.
Toutefois, notez qu’il est généralement considéré comme une très mauvaise pratique d’utiliser des variables globales au sein de contextes locaux (c’est-à-dire à l’intérieur de fonctions) pour des raisons évidentes de clarté et de lisibilité.
Ici, on va se servir de ce qu’on a appris sur la portée en JavaScript pour observer des choses intéressantes.
Nous allons créer deux variables portant le même nom, une dans l’espace global et une à l’intérieur d’une fonction.
Ces deux variables vont posséder le même nom mais être bien différentes.
Le but ici va être d’afficher simultanément le contenu de ces deux variables afin d’observer ce qui est renvoyé par le JavaScript.
Ici, on définit une première variable globale x dans laquelle on stocke le chiffre 4. Ensuite, on crée une deuxième variable locale x dans laquelle on stocke le chiffre 7.
Finalement, on tente d’afficher le contenu de ces deux variables depuis l’espace global.
Sans surprise, notre variable x définie dans l'espace global renvoie bien la valeur 4.
Pour la variable locale cependant cela semblait plus problématique car je vous rappelle qu’une variable globale est accessible depuis n’importe où dans un script.
Le JavaScript sait il donc quelle variable utiliser à l’intérieur de notre fonction ? Comme vous pouvez l’observer, la réponse est oui puisque la valeur renvoyée est bien celle contenue dans notre variable x définie localement (7).
Notez une nouvelle fois qu’il est fortement déconseillé de créer plusieurs variables avec un même nom : cela aura tendance à très vite complexifier un script sans raison.
Vous devez savoir que si vous omettez le mot clef var lorsque vous voulez créer une variable, le JavaScript va automatiquement créer une sorte de variable globale.
Si je vous montre ceci, c’est pour vous conseiller de ne jamais coder de cette manière.
En effet, il est largement préférable d’utiliser le mot clef var lorsque vous créez une nouvelle variable en JavaScript.
Outre le fait que cela rendra votre code beaucoup plus lisible, si vous n’écrivez pas var, le JavaScript ne va pas exactement créer une variable globale mais va utiliser des procédés légèrement différents qui pourraient vous poser problème par la suite lorsque vous voudrez travailler sur vos variables justement.
Après avoir lu ce chapitre, vous serez peut-être tenté de déclarer toutes vos variables globalement, puisqu’on peut y accéder partout.
Ne le faites pas. Ce qui peut vous sembler être un avantage ne l’est au final pas. En effet, lorsque vous vous lancerez dans un gros projet, vous aurez des centaines de variables et des milliers de lignes de code.
Créer des variables locales est un bon moyen de ne pas « polluer » l’espace global et d’éviter de nombreuses erreurs d’inattention.
Si vous déclarez toutes vas variables comme étant globales, vous serez vite perdus et risquez d’écraser des valeurs en re-déclarant une même variable.
En résumé : ne déclarez une variable globalement que si cela vous semble strictement nécessaire.
2015-2017 - Tous droits réservés à Pierre Giraud.
Il est strictement interdit de copier et de distribuer le contenu de ce site sans l'accord express de son propriétaire.
En continuant votre navigation sur ce site, vous acceptez l'utilisation des cookies.
N'oubliez pas de me suivre !
