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 toutes sortes de données.

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

Les identifiants peuvent contenir des lettres Unicode, des signes dollar ($), des traits de soulignement caractères (_), 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 des éléments d'entrée distincts. 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: ).
Les identifiants doivent commencer par une lettre, un trait de soulignement (_) ou le signe dollar ($). Ils ne peuvent pas commencer par des chiffres, pour éviter toute confusion entre les nombres et identifiants:
```
let 1a = true;

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

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

Les exemples suivants ne sont pas des règles strictes pour la création d'identifiants, mais ce sont les meilleures pratiques du secteur qui facilitent la maintenance de votre code. Si votre projet a des normes différentes, suivez-les plutôt pour plus de cohérence.

En suivant l'exemple défini par les méthodes et propriétés intégrées de JavaScript, camel Case (également stylisée sous le nom "camelCase") est une convention très courante pour des identifiants composés de plusieurs mots. Camel case est la pratique de Mise en majuscule de la première lettre de chaque mot, à l'exception du premier mot 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 étant généralement en majuscule, les noms de classes composés de plusieurs mots utilisent donc souvent une variante du mot "chameau". communément appelé "upper camel case" ou une coque Pascal.

class MyClass {

}

Les identifiants doivent décrire de manière concise la nature des données qu'ils contiennent (par exemple, exemple, currentMonthDays est mieux que theNumberOfDaysInTheCurrentMonth) et lisible d'un seul coup d'œil (originalValue est préférable à val). La Les identifiants myVariable utilisés tout au long de ce module fonctionnent dans le contexte de des exemples isolés, mais ils ne seraient pas utiles dans le code de production, car ils ne donnent aucune information sur les données qu’ils contiennent.

Les identifiants ne doivent pas être trop précis sur 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 de les décisions prises par les responsables futurs. Par exemple, une variable associée à l'attribut vous devrez peut-être remplacer l'identifiant miles par une valeur exprimée en kilomètres ultérieurement dans le projet, ce qui obligera les responsables à remplacer toutes les références à cette variable par éviter toute confusion future. Pour éviter cela, utilisez distance comme identifiant à la place.

JavaScript n'accorde aucun privilège ni sens particulier aux identifiants commencent par des traits de soulignement (_), 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'il ne s'agit que pour être utilisée dans le contexte de l'objet qui le contient, et ne doit pas être consultées ou modifiées en dehors de ce contexte. Il s'agit d'une convention transposée d'autres langages de programmation. Il est antérieur à l'ajout du code JavaScript propriétés privées.

Déclaration de variable

Il existe plusieurs façons de rendre JavaScript compatible avec un identifiant, un processus appelé « déclarer » une variable. Une variable est déclarée à l'aide des commandes let, const, ou var mots clés.

let myVariable;

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

Lorsque vous travaillez dans un codebase moderne, utilisez let au lieu de var. var fonctionne toujours dans les navigateurs récents, à l'exception de certains comportements peu intuitifs définis dans les plus anciennes versions de JavaScript, et ne pouvait pas être modifié ultérieurement en préservent la rétrocompatibilité. let a été ajouté dans ES6 pour résoudre certains problèmes avec la conception de var.

Une variable déclarée est initialisée en attribuant une valeur à la variable. Utilisez un signe égal (=) unique pour attribuer ou réattribuer une valeur à une variable. Vous pouvez dans la même déclaration que celle 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 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é. Le référencement d'une variable que vous n'avez pas déclaré provoque une erreur.

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 », et permet d'avoir plusieurs déclarations de variables séparées par des virgules (se terminant par le point-virgule attendu). Ainsi, les extraits de code suivants 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 connaît 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, vous obtenez une erreur de syntaxe:

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

Navigateurs outils pour les développeurs sont plus permissives concernant la redéclaration de let (et class). Vous pourriez donc ne pas la même erreur s'affiche dans la Play Console.

Pour préserver la compatibilité avec les anciens navigateurs, var permet une redéclaration inutile sans erreur, quel que soit le 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 sont immédiatement initialisés et ne peuvent pas être modifiés. Identifiants des constantes suivez les mêmes règles que les variables déclarées à l'aide de let (et 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éattribuées après leur création. Par conséquent, toute resterait undefined indéfiniment. Si vous essayez de déclarer une constante sans l'initialiser, vous obtenez une erreur de syntaxe:

const myConstant;
Uncaught SyntaxError: missing = in const declaration

Essayez de modifier la valeur d'une variable déclarée avec const comme vous le feriez pour modifier la valeur d'une variable déclarée "wit" avec let (ou var) entraîne un type erreur:

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 cette objet peut être modifié.

const constantObject = { "firstvalue" : true };

constantObject
> Object { firstvalue: true }

constantObject.secondvalue = false;

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

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

const constantObject = { "firstvalue" : true };

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

Si vous ne vous attendez pas à ce qu'une variable soit réattribuée, la meilleure pratique consiste à la rendre une constante. L'utilisation de const informe votre équipe de développement ou les futurs responsables d'une projet de ne pas modifier cette valeur, pour éviter de briser les hypothèses que votre code comment elle est utilisée (par exemple, qu'une variable finira par être évaluée par rapport à un type de données attendu.

Champ d'application de la variable

Le champ d'application d'une variable est la partie d'un script dans laquelle cette variable est disponible. En dehors du champ d'application d'une variable, celle-ci ne sera pas définie, et non comme identifiant contenant une valeur undefined, 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 la portée des variables sur les instructions de blocage (champ d'application de blocage), des fonctions individuelles (champ d'application de la fonction), ou l'ensemble de l'application JavaScript (champ d'application global)

Bloquer le champ d'application

Toute variable que vous déclarez à l'aide de let ou const est limitée à sa plus proche contenant une instruction de blocage, ce qui signifie que la variable n'est accessible que dans ce bloc. Tentative de une variable à l'échelle d'un bloc en dehors de son bloc conteneur entraîne le même s'affiche suite à une 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, il n'existe aucune variable à l'échelle d'un bloc. en dehors du bloc qui la contient. Par exemple, vous pouvez déclarer une constante à l'intérieur d'un bloc, puis déclarer une autre constante à l'extérieur 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 descendant. sans erreur, même s'il utilise le même identifiant qu'une variable dans une 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 à la fonction conteneur la plus proche. (ou bloc d'initialisation statique dans une classe).

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

C'est toujours le cas après l'appel d'une fonction. Même si est initialisée pendant l'exécution de la fonction, cette variable est toujours non disponible 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 toute une application JavaScript, à l'intérieur de tous les blocs et fonctions, à n'importe quel script de la page.

Bien que cela puisse sembler être une valeur par défaut souhaitable, les variables que l'application peut consulter et modifier peut engendrer des frais généraux inutiles, des collisions avec des variables ailleurs dans une application ayant le même identifiant. Cela s'applique à tout JavaScript impliqué dans l'affichage d'une page, y compris des bibliothèques tierces et des données analytiques sur les utilisateurs. Par conséquent, il est Bonnes pratiques pour éviter autant que possible de polluer le champ d'application global.

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

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 n'utilisez jamais var, let ou const pour la créer) élève une variable au un champ d'application global, même lorsqu'il est initialisé à l'intérieur d'une fonction ou d'un bloc. Une variable créé à l’aide de ce modèle est parfois appelé un « global implicite ».

function myFunction() {
    globalVariable = "global";

    return globalVariable
}

myFunction()\
> "global"

globalVariable\
> "global"

Hissage variable

Les variables et les déclarations de fonction sont hissées en haut de leur champ d'application. Cela signifie que l'interpréteur JavaScript traite toute variable déclarée d'un script et le déplace sur la première ligne de son code avant d'exécuter le script. Cela signifie qu'une variable déclarée à l'aide de var peut être référencé avant que la variable ne soit déclarée sans rencontrer de erreur:

hoistedVariable
> undefined

var hoistedVariable;

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

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 aux variables hissées à celles déclarées à l'aide de var.

hoistedVariable
> undefined

var hoistedVariable = 2 + 2;

hoistedVariable\
> 4

Ce comportement peu intuitif découle en grande partie des décisions de conception prises les plus anciennes versions de JavaScript et ne peut être modifiée sans risque craquer les sites existants.

let et const corrigent ce comportement en générant une erreur lorsqu'un est accessible avant d'être créée:

{
    hoistedVariable;

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

Cette erreur est différente de "histedVariable n'est pas définie" erreur auquel vous pouvez vous attendre lorsque vous tentez d'accéder à une variable non déclarée. Étant donné que JavaScript a hissé la variable, il est conscient qu'elle sera créée dans le champ d'application donné. Toutefois, au lieu de rendre cette variable disponible avant son avec la valeur undefined, l'interpréteur génère une erreur. Les variables déclarées avec let ou const (ou class) sont censées exister dans un "zone morte temporelle" ("TDZ") entre le début du bloc englobant et le point dans le code où la variable est déclarée.

La zone morte temporelle rend le comportement de let plus intuitif que var pour auteurs. Il est également essentiel à la conception de const. Comme les constantes ne peuvent pas être constante qui est hissée en haut de son champ d'application et se voit attribuer une valeur implicite de undefined n'a pas pu être initialisé avec une valeur significative.

Testez vos connaissances

Avec quels types de caractères pouvez-vous commencer un identifiant ?

Une lettre

Un trait de soulignement

Un chiffre

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

aux

const

variable