Portée JavaScript
La portée détermine l'accessibilité (visibilité) des variables.
JavaScript a 3 types de portée :
- Portée du bloc
- Portée de la fonction
- Portée mondiale
Portée du bloc
Avant ES6 (2015), JavaScript n'avait que Global Scope et Function Scope .
ES6 a introduit deux nouveaux mots-clés JavaScript importants : letet const.
Ces deux mots-clés fournissent Block Scope en JavaScript.
Les variables déclarées à l'intérieur d'un bloc { } ne sont pas accessibles depuis l'extérieur du bloc :
Exemple
{
let x = 2;
}
// x can NOT be used here
Les variables déclarées avec le mot- varclé ne peuvent PAS avoir une portée de bloc.
Les variables déclarées à l'intérieur d'un bloc { } sont accessibles depuis l'extérieur du bloc.
Exemple
{
var x = 2;
}
// x CAN be used here
Portée locale
Les variables déclarées dans une fonction JavaScript deviennent LOCALES à la fonction.
Exemple
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
Les variables locales ont Function Scope :
Ils ne sont accessibles qu'à partir de la fonction.
Étant donné que les variables locales ne sont reconnues qu'à l'intérieur de leurs fonctions, les variables portant le même nom peuvent être utilisées dans différentes fonctions.
Les variables locales sont créées lorsqu'une fonction démarre et supprimées lorsque la fonction est terminée.
Portée de la fonction
JavaScript a une portée de fonction : chaque fonction crée une nouvelle portée.
Les variables définies à l'intérieur d'une fonction ne sont pas accessibles (visibles) depuis l'extérieur de la fonction.
Les variables déclarées avec var, let
et constsont assez similaires lorsqu'elles sont déclarées dans une fonction.
Ils ont tous une portée de fonction :
function myFunction() {
var carName = "Volvo";
// Function Scope
}
function myFunction() {
let carName = "Volvo"; //
Function Scope
}
function myFunction() {
const carName = "Volvo"; //
Function Scope
}
Variables JavaScript globales
Une variable déclarée en dehors d'une fonction, devient GLOBAL .
Exemple
let carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}
Une variable globale a une portée globale :
Tous les scripts et fonctions d'une page Web peuvent y accéder.
Portée mondiale
Les variables déclarées Globally (en dehors de toute fonction) ont Global Scope .
Les variables globales sont accessibles de n'importe où dans un programme JavaScript.
Les variables déclarées avec var, let
et constsont assez similaires lorsqu'elles sont déclarées en dehors d'un bloc.
Ils ont tous une portée mondiale :
var x = 2;
// Global scope
let x = 2; //
Global scope
const x = 2; //
Global scope
Variables JavaScript
En JavaScript, les objets et les fonctions sont également des variables.
La portée détermine l'accessibilité des variables, des objets et des fonctions à partir de différentes parties du code.
Automatiquement global
Si vous affectez une valeur à une variable non déclarée, elle deviendra automatiquement une variable GLOBALE .
Cet exemple de code déclarera une variable globale carName, même si la valeur est affectée à l'intérieur d'une fonction.
Exemple
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}
Mode strict
Tous les navigateurs modernes prennent en charge l'exécution de JavaScript en "mode strict".
Vous en apprendrez plus sur l'utilisation du mode strict dans un chapitre ultérieur de ce didacticiel.
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 varmot clé appartiennent à l'objet window :
Exemple
var carName = "Volvo";
// code here
can use window.carName
Les variables globales définies avec le letmot clé n'appartiennent pas à l'objet window :
Exemple
let carName = "Volvo";
// code here can not use window.carName
Avertissement
Ne créez PAS de variables globales sauf si vous en avez l'intention.
Vos variables globales (ou fonctions) peuvent écraser les variables de fenêtre (ou fonctions).
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.
Arguments de la fonction
Les arguments de fonction (paramètres) fonctionnent comme des variables locales à l'intérieur des fonctions.