Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Cette page a été traduite par l'API Cloud Translation.

Variables

Les variables sont une structure de données qui attribue un nom représentatif à une valeur. Ils peuvent contenir des données de n'importe quel type.

Le nom d'une variable est appelé identifiant. Un identifiant valide doit respecter les règles suivantes:

Les identifiants peuvent contenir des lettres Unicode, des signes dollar ($), des traits de soulignement (_), des chiffres (0-9) et même certains caractères Unicode.
Les identifiants ne peuvent pas contenir d'espaces blancs, car l'analyseur utilise des espaces blancs pour séparer les éléments d'entrée. Par exemple, si vous essayez d'appeler une variable my Variable au lieu de myVariable, l'analyseur voit deux identifiants, my et Variable, et génère une erreur de syntaxe ("jeton inattendu : identifiant").
Les identifiants doivent commencer par une lettre, un trait de soulignement (_) ou un signe dollar ($). Ils ne peuvent pas commencer par des chiffres, afin d'éviter toute confusion entre les nombres et les identifiants:
```
let 1a = true;

> Uncaught SyntaxError: Invalid or unexpected token
```
Si JavaScript autorisait les nombres au début d'un identifiant, cela permettrait d'utiliser des identifiants composés uniquement de chiffres, ce qui entraînerait des conflits entre les nombres utilisés comme nombres et les nombres utilisés comme identifiants:
```
let 10 = 20

10 + 5
> ?
```
Les mots réservés qui ont déjà une signification syntaxique ne peuvent pas être utilisés comme identifiants.
Les identifiants ne doivent pas contenir de caractères spéciaux (! . , / \ + - * =).

Les éléments suivants ne sont pas des règles strictes pour créer des identifiants, mais ce sont des bonnes pratiques du secteur qui facilitent la gestion de votre code. Si votre projet spécifique comporte des normes différentes, suivez-les à la place pour assurer la cohérence.

Suivant l'exemple des méthodes et propriétés intégrées de JavaScript, la majuscule à la première lettre (également stylisée en "camelCase") est une convention très courante pour les identifiants composés de plusieurs mots. Le CamelCase consiste à mettre en majuscule la première lettre de chaque mot, à l'exception du premier, pour améliorer la lisibilité sans espaces.

let camelCasedIdentifier = true;

Certains projets utilisent d'autres conventions de nommage en fonction du contexte et de la nature des données. Par exemple, la première lettre d'une classe est généralement mise en majuscule. Par conséquent, les noms de classe composés de plusieurs mots utilisent souvent une variante de la casse camel, communément appelée "casse camel majuscule" ou Pascal.

class MyClass {

}

Les identifiants doivent décrire de manière concise la nature des données qu'ils contiennent (par exemple, currentMonthDays est un meilleur nom que theNumberOfDaysInTheCurrentMonth) et être lisibles en un coup d'œil (originalValue est meilleur que val). Les identifiants myVariable utilisés dans tout ce module fonctionnent dans le contexte d'exemples isolés, mais seraient très peu utiles dans le code de production, car ils ne fournissent aucune information sur les données qu'ils contiennent.

Les identifiants ne doivent pas être trop spécifiques concernant les données qu'ils contiennent, car leurs valeurs peuvent changer en fonction de la façon dont les scripts agissent sur ces données ou des décisions prises par les futurs responsables. Par exemple, une variable à laquelle l'identifiant miles a été attribué à l'origine peut devoir être remplacée par une valeur en kilomètres plus tard dans le projet. Les mainteneurs doivent alors modifier toutes les références à cette variable pour éviter toute confusion ultérieure. Pour éviter cela, utilisez plutôt distance comme identifiant.

JavaScript n'accorde aucun privilège ni aucune signification particulière aux identifiants commençant par un caractère souligné (_), mais ils sont généralement utilisés pour indiquer qu'une variable, une méthode ou une propriété est "privée", ce qui signifie qu'elle n'est destinée qu'à être utilisée dans le contexte de l'objet qui la contient et qu'elle ne doit pas être accessible ni modifiée en dehors de ce contexte. Il s'agit d'une convention reprise à partir d'autres langages de programmation, et qui date d'avant l'ajout des propriétés privées de JavaScript.

Déclaration de variable

Il existe plusieurs façons de faire connaître un identifiant à JavaScript, un processus appelé "déclaration" d'une variable. Une variable est déclarée à l'aide des mots clés let, const ou var.

let myVariable;

Utilisez let ou var pour déclarer une variable pouvant être modifiée à tout moment. Ces mots clés indiquent à l'interprète JavaScript qu'une chaîne de caractères est un identifiant pouvant contenir une valeur.

Lorsque vous travaillez dans un codebase moderne, utilisez let au lieu de var. var fonctionne toujours dans les navigateurs modernes, mais présente des comportements peu intuitifs qui ont été définis dans les premières versions de JavaScript et qui n'ont pas pu être modifiés par la suite pour préserver la rétrocompatibilité. let a été ajouté en ES6 pour résoudre certains problèmes liés à la conception de var.

Une variable déclarée est initialisée en lui attribuant une valeur. Utilisez un seul signe égal (=) pour attribuer ou réattribuer une valeur à une variable. Vous pouvez le faire dans la même instruction qui le déclare:

let myVariable = 5;

myVariable + myVariable
> 10

Vous pouvez également déclarer une variable avec let (ou var) sans l'initialiser immédiatement. Dans ce cas, la valeur initiale de la variable est undefined jusqu'à ce que votre code lui attribue une valeur.

let myVariable;

myVariable;
> undefined

myVariable = 5;

myVariable + myVariable
> 10

Une variable avec une valeur undefined est différente d'une variable non définie dont l'identifiant n'a pas encore été déclaré. Si vous faites référence à une variable que vous n'avez pas déclarée, une erreur se produit.

myVariable
> Uncaught ReferenceError: myVariable is not defined

let myVariable;

myVariable
> undefined

L'association d'un identifiant à une valeur est généralement appelée "liaison". La syntaxe qui suit les mots clés let, var ou const est appelée "liste de liaison". Elle permet de déclarer plusieurs variables séparées par une virgule (qui se terminent par le point-virgule attendu). Les extraits de code suivants sont donc fonctionnellement identiques:

let firstVariable,
     secondVariable,
     thirdVariable;

let firstVariable;
let secondVariable;
let thirdVariable;

La réaffectation de la valeur d'une variable n'utilise pas let (ou var), car JavaScript sait déjà que la variable existe:

let myVariable = true;

myVariable
> true

myVariable = false;

myVariable
> false

Vous pouvez réattribuer de nouvelles valeurs aux variables en fonction de leurs valeurs existantes:

let myVariable = 10;

myVariable
> 10

myVariable = myVariable * myVariable;

myVariable
> 100

Si vous essayez de redéclarer une variable à l'aide de let dans un environnement de production, une erreur de syntaxe s'affiche:

let myVariable = true;
let myVariable = false;
> Uncaught SyntaxError: redeclaration of let myVariable

Les outils de développement des navigateurs sont plus permissifs concernant la redéfinition de let (et de class). Vous ne verrez donc peut-être pas la même erreur dans votre console de développement.

Pour préserver la compatibilité avec les anciens navigateurs, var autorise une redéfinition inutile sans erreur dans n'importe quel contexte:

var myVariable = true;
var myVariable = false;

myVariable\
> false

`const`

Utilisez le mot clé const pour déclarer une constante, un type de variable qui doit être immédiatement initialisé, puis ne peut plus être modifié. Les identifiants des constantes suivent toutes les mêmes règles que les variables déclarées à l'aide de let (et de var):

const myConstant = true;

myConstant
> true

Vous ne pouvez pas déclarer une constante sans lui attribuer immédiatement une valeur, car les constantes ne peuvent pas être réaffectées après leur création. Par conséquent, toute constante non initialisée restera undefined pour toujours. Si vous essayez de déclarer une constante sans l'initialiser, une erreur de syntaxe s'affiche:

const myConstant;
Uncaught SyntaxError: missing = in const declaration

Essayer de modifier la valeur d'une variable déclarée avec const de la même manière que vous pourriez modifier la valeur d'une variable déclarée avec let (ou var) entraîne une erreur de type:

const myConstant = true;

myConstant = false;
> Uncaught TypeError: invalid assignment to const 'myConstant'

Toutefois, lorsqu'une constante est associée à un objet, les propriétés de cet objet peuvent être modifiées.

const constantObject = { "firstvalue" : true };

constantObject
> Object { firstvalue: true }

constantObject.secondvalue = false;

constantObject
> Object { firstvalue: true, secondvalue: false }

Une constante contenant un objet est une référence immuable à une valeur de données modifiable. Bien que la constante elle-même ne puisse pas être modifiée, les propriétés de l'objet référencé peuvent être modifiées, ajoutées ou supprimées:

const constantObject = { "firstvalue" : true };

constantObject = false
> Uncaught TypeError: invalid assignment to const 'constantObject'

Lorsque vous ne prévoyez pas qu'une variable soit réaffectée, il est recommandé de la définir comme une constante. L'utilisation de const indique à votre équipe de développement ou aux futurs responsables d'un projet de ne pas modifier cette valeur, afin d'éviter de briser les hypothèses que votre code fait sur son utilisation (par exemple, qu'une variable sera éventuellement évaluée par rapport à un type de données attendu).

Champ d'application de la variable

Le champ d'application d'une variable correspond à la partie d'un script où cette variable est disponible. En dehors du champ d'application d'une variable, elle ne sera pas définie, pas en tant qu'identifiant contenant une valeur undefined, mais comme si elle n'avait pas été déclarée.

Selon le mot clé que vous utilisez pour déclarer une variable et le contexte dans lequel vous la définissez, vous pouvez définir le champ d'application des variables pour les instructions de bloc (champ d'application de bloc), les fonctions individuelles (champ d'application de fonction) ou l'ensemble de l'application JavaScript (champ d'application global).

Champ d'application du bloc

Toute variable que vous déclarez à l'aide de let ou const est limitée à l'instruction de bloc la plus proche, ce qui signifie que vous ne pouvez y accéder que dans ce bloc. Toute tentative d'accès à une variable de portée de bloc en dehors de son bloc contenant entraîne la même erreur que toute tentative d'accès à une variable qui n'existe pas:

{
    let scopedVariable = true;
    console.log( scopedVariable );
}
> true

scopedVariable
> ReferenceError: scopedVariable is not defined

En ce qui concerne JavaScript, une variable de portée de bloc n'existe pas en dehors du bloc qui la contient. Par exemple, vous pouvez déclarer une constante dans un bloc, puis déclarer une autre constante en dehors de ce bloc qui utilise le même identifiant:

{
  const myConstant = false;
}
const myConstant = true;

scopedConstant;
> true

Bien qu'une variable déclarée ne puisse pas s'étendre dans son bloc parent, elle est disponible pour tous les blocs descendants:

{
    let scopedVariable = true;
    {
    console.log( scopedVariable );
    }
}
> true

La valeur d'une variable déclarée peut être modifiée à partir d'un bloc descendant:

{
    let scopedVariable = false;
    {
    scopedVariable = true;
    }
    console.log( scopedVariable );
}
> true

Une nouvelle variable peut être initialisée avec let ou const dans un bloc descendant sans erreur, même si elle utilise le même identifiant qu'une variable dans un bloc parent:

{
    let scopedVariable = false;
    {
    let scopedVariable = true;
    }
    console.log( scopedVariable );
}
> false

Champ d'application de la fonction

Les variables déclarées à l'aide de var sont limitées à leur fonction contenant la plus proche (ou bloc d'initialisation statique dans une classe).

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

Cela reste vrai après l'appel d'une fonction. Même si la variable est initialisée pendant l'exécution de la fonction, elle reste indisponible en dehors du champ d'application de la fonction:

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

myFunction();
> true

scopedVariable;
> ReferenceError: scopedVariable is not defined

Champ d'application global

Une variable globale est disponible dans l'ensemble d'une application JavaScript, dans tous les blocs et fonctions, et pour tous les scripts de la page.

Bien que cela puisse sembler être une valeur par défaut souhaitable, les variables auxquelles n'importe quelle partie d'une application peut accéder et modifier peuvent ajouter des frais généraux inutiles, voire provoquer des collisions avec des variables ailleurs dans une application avec le même identifiant. Cela s'applique à tout code JavaScript impliqué dans le rendu d'une page, y compris les bibliothèques tierces et les données analytiques sur les utilisateurs. Par conséquent, il est recommandé d'éviter de polluer le champ d'application global dans la mesure du possible.

Toute variable déclarée à l'aide de var en dehors d'une fonction parente, ou à l'aide de let ou const en dehors d'un bloc parent, est globale:

var functionGlobal = true; // Global
let blockGlobal = true; // Global

{
    console.log( blockGlobal );
    console.log( functionGlobal );
}
> true
> true

(function() {
    console.log( blockGlobal );
    console.log( functionGlobal );
}());
> true
> true

Attribuer une valeur à une variable sans la déclarer explicitement (c'est-à-dire en n'utilisant jamais var, let ou const pour la créer) élève la variable au niveau du champ d'application global, même lorsqu'elle est initialisée dans une fonction ou un bloc. Une variable créée à l'aide de ce modèle est parfois appelée "globale implicite".

function myFunction() {
    globalVariable = "global";

    return globalVariable
}

myFunction()\
> "global"

globalVariable\
> "global"

Élévation de variable

Les déclarations de variables et de fonctions sont élevées en haut de leur portée, ce qui signifie que l'interprète JavaScript traite toute variable déclarée à un moment donné dans un script et la déplace effectivement sur la première ligne de son champ d'application englobant avant d'exécuter le script. Cela signifie qu'une variable déclarée à l'aide de var peut être référencée avant d'être déclarée sans rencontrer d'erreur:

hoistedVariable
> undefined

var hoistedVariable;

Comme seule la déclaration de variable est hébergée, et non l'initialisation, les variables qui n'ont pas été déclarées explicitement avec var, let ou const ne sont pas hissées:

unhoistedVariable;
> Uncaught ReferenceError: unhoistedVariable is not defined

unhoistedVariable = true;

Comme indiqué précédemment, une variable déclarée, mais non initialisée, se voit attribuer la valeur undefined. Ce comportement s'applique également aux déclarations de variables hissées, mais uniquement à celles déclarées à l'aide de var.

hoistedVariable
> undefined

var hoistedVariable = 2 + 2;

hoistedVariable\
> 4

Ce comportement peu intuitif est en grande partie un héritage des décisions de conception prises dans les premières versions de JavaScript. Il ne peut pas être modifié sans risquer de casser les sites existants.

let et const corrigent ce comportement en générant une erreur lorsqu'une variable est consultée avant sa création:

{
    hoistedVariable;

    let hoistedVariable;
}
> Uncaught ReferenceError: can't access lexical declaration 'hoistedVariable' before initialization

Cette erreur est différente de l'erreur "hoistedVariable n'est pas défini" que vous pourriez rencontrer lorsque vous essayez d'accéder à une variable non déclarée. Comme JavaScript a hissé la variable, il sait qu'elle sera créée dans le champ d'application donné. Toutefois, au lieu de rendre cette variable disponible avant sa déclaration avec une valeur de undefined, l'interprète génère une erreur. Les variables déclarées avec let ou const (ou class) sont dites exister dans une "zone morte temporelle" (TDZ) du début de leur bloc englobant jusqu'au point du code où la variable est déclarée.

La zone morte temporelle rend le comportement de let plus intuitif que celui de var pour les auteurs. Il est également essentiel à la conception de const. Étant donné que les constantes ne peuvent pas être modifiées, une constante hissée en haut de son champ d'application et à laquelle est attribuée une valeur implicite de undefined ne peut pas être initialisée avec une valeur significative.

Vérifier vos connaissances

Quels types de caractères pouvez-vous utiliser pour commencer un identifiant ?

Une lettre

Un trait de soulignement

Un chiffre

Quelle est la méthode recommandée pour déclarer une variable dont la valeur peut être modifiée à tout moment ?

let

const

var