Portée de JavaScript
Portée = Visibilité
La portée détermine l' accessibilité (visibilité) des variables.
Les variables JavaScript ont trois types de portée :
- Portée globale
- Portée de fonction
- Portée de bloc
Portée Globale
Les variables déclarées globalement (en dehors de tout bloc ou fonction) ont une portée globale .
Les variables globales peuvent être accessibles de n'importe où dans un programme JavaScript.
Les variables déclarées avec var , let et const sont assez similaires lorsqu'elles sont déclarées en dehors d'un bloc.
Elles ont toutes une portée globale :
var x = 1; // Portée globale
let y = 2; // Portée globale
const z = 3; // Portée globale
Exemple
Une variable déclarée en dehors d'une fonction devient globale .
let carName = "Volvo";
// le code ici peut utiliser carName
function myFunction() {
// le code ici peut aussi utiliser carName
} Les variables globales ont une portée globale :
Tous les scripts et fonctions dans la même page web peuvent accéder à une variable avec une portée globale.
Portée de Fonction
Chaque fonction JavaScript a sa propre portée.
Les variables définies à l'intérieur d'une fonction ne sont pas accessibles (visibles) de l'extérieur de la fonction.
Les variables déclarées avec var , let et const sont assez similaires lorsqu'elles sont déclarées à l'intérieur d'une fonction.
Elles ont toutes une portée de fonction :
function myFunction1() {
var carName = "Volvo"; // Portée de fonction
}
function myFunction2() {
let carName = "Volvo"; // Portée de fonction
}
function myFunction3() {
const carName = "Volvo"; // Portée de fonction
} Exemple
Les variables déclarées dans une fonction JavaScript sont locales à la fonction :
// le code ici ne peut PAS utiliser carName
function myFunction() {
let carName = "Volvo";
// le code ici PEUT utiliser carName
}
// le code ici ne peut PAS utiliser carName Les Variables Locales ont une Portée de Fonction
- Elles ne peuvent être accessibles que depuis l'intérieur de la fonction
- Aucun script ou fonction en dehors de la fonction ne peut y accéder
- Des variables avec le même nom peuvent être utilisées en dehors de la fonction
- Des variables avec le même nom peuvent être utilisées dans différentes fonctions
- Les variables locales sont créées lorsque la fonction commence
- Les variables locales sont supprimées lorsque la fonction est terminée
- Les arguments (paramètres) fonctionnent comme des variables locales à l'intérieur des fonctions
Portée de Bloc
Avant ES6 , les variables JavaScript ne pouvaient avoir qu'une portée globale ou une portée de fonction .
ES6 a introduit deux nouveaux mots-clés JavaScript importants : let et const .
Ces deux mots-clés fournissent une portée de bloc en JavaScript.
Les variables déclarées avec let et const à l'intérieur d'un bloc de code sont "portées par bloc", ce qui signifie qu'elles ne sont accessibles que dans ce bloc.
Cela aide à prévenir les écrasements de variables non intentionnels et favorise une meilleure organisation du code :
Exemple
{
let x = 2;
}
// x ne peut PAS être utilisé ici Les variables déclarées avec le mot-clé var ne peuvent PAS avoir de portée de bloc.
Les variables déclarées avec le mot-clé var , à l'intérieur d'un bloc { }; peuvent être accessibles de l'extérieur du bloc.
Exemple (Non Recommandé)
{
var x = 2;
}
// x PEUT être utilisé ici Global Automatique
Si vous assignez une valeur à une variable qui n'a pas été déclarée , elle deviendra une variable globale .
Cet exemple de code déclarera une variable globale carName , même si la valeur est assignée à l'intérieur d'une fonction.
Exemple
myFunction();
// le code ici peut utiliser carName
function myFunction() {
carName = "Volvo";
} Mode Strict
Tous les navigateurs modernes prennent en charge l'exécution de JavaScript en "Mode Strict".
En "Mode Strict", les variables non déclarées ne sont pas automatiquement globales.
Variables Globales en HTML
Avec JavaScript, la portée globale est l'environnement JavaScript.
En HTML, la portée globale est l'objet window.
Les variables globales définies avec le mot-clé var appartiennent à l'objet window :
Exemple (Non Recommandé)
var carName = "Volvo";
// le code ici peut utiliser window.carName
Les variables globales définies avec le mot-clé let n'appartiennent pas à l'objet window :
Exemple
let carName = "Volvo";
// le code ici ne peut PAS utiliser window.carName Avertissement
Ne créez PAS de variables globales à moins que vous ne le souhaitiez.
Vos variables (ou fonctions) globales peuvent écraser les variables (ou fonctions) de la fenêtre.
Toute fonction, y compris l'objet window, peut écraser vos variables et fonctions globales.
La Durée de Vie des Variables JavaScript
La durée de vie d'une variable JavaScript commence lorsqu'elle est déclarée.
Les variables de fonction (locales) sont supprimées lorsque la fonction est terminée.
Dans un navigateur web, les variables globales sont supprimées lorsque vous fermez la fenêtre (ou l'onglet) du navigateur.