mozilla
Vos résultats de recherche

    Types et grammaire

    Ce chapitre décrit les bases de la grammaire et des types de données JavaScript.

    Les bases du langage

    JavaScript emprunte la plupart des éléments de sa syntaxe à Java mais sa syntaxe est également influencée par Awk, Perl et Python.

    JavaScript est sensible à la casse et utilise l'ensemble de caractères Unicode.

    En JavaScript, les instructions sont séparées par des points-virgules. Les espaces, les tabulations et les caractères de nouvelles lignes sont considérés comme des blancs. Le texte d'un code source JavaScript est analysé de gauche à droite et est converti en une série d'unités lexicales, de caractères de contrôle, de fins de lignes, de commentaires et de blancs. ECMAScript définit également certains mots-clés et littéraux, il existe aussi un ensemble de règles pour ajouter automatiquement des points-virgules à la fin des instructions (ASI pour Automatic Semicolon Insertion). Cependant, il est conseillé de toujours ajouter des points-virgules à la fin des instructions afin d'éviter des effets de bord néfastes. Pour plus d'informations, voir la page sur la grammaire lexicale de JavaScript dans la référence JavaScript.

    Commentaires

    La syntaxe utilisée pour les commentaires est la même que celle utilisée par le C++ et d'autres langages :

    // un commentaire sur une ligne
    
    /* un commentaire plus 
       long sur plusieurs lignes
     */ 
    
    /* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */
    

    Déclarations

    Il existe trois types de déclarations en JavaScript.

    var
    On déclare une variable, éventuellement en initialisant sa valeur.
    let
    On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.
    const
    On déclare une constante nommée, accessible en lecture seule.

    Variables

    Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés identifiants. Ces identifiants doivent respecter certaines règles.

    Un identifiant JavaScript doit commencer par une lettre, un tiret bas (_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9). JavaScript étant sensible à la casse, les lettres comprennent les signes de « A » à « Z » (majuscules) et de « a » à « z » (minuscules). On peut aussi utiliser des lettres Unicode ou ISO 8859-1 (comme å et ü) au sein des identifiants. Il est également possible d'utiliser les \uXXXX séquences d'échappement Unicode comme caractères dans les identifiants.

    Voici des exemples d'identifiants valides : Nombre_touches, temp99, et _nom.

    Déclaration de variables

    Il est possible de déclarer des variables de plusieurs façons :

    • En utilisant le mot-clé var, par exemple : var x = 42. Cette syntaxe peut être utilisée pour déclarer des variables locales ou globales.
    • En assignant un valeur à cette variable, comme x = 42. Cela déclare une variable globale et ne peut être changé localement. En mode strict, cela génère également un avertissement. L'utilisation de cette variante est déconseillée.
    • En utilisant le mot clé let, par exemple let y = 13. Cette syntaxe peut être utilisée pour déclarer une variable dont la portée sera celle du bloc. Voir le paragraphe sur les portées des variables ci-après.

    Évaluation de variables

    Une variable déclarée grâce à l'instruction var ou let sans valeur initiale définie vaudra undefined.

    Tenter d'accéder à une variable qui n'a pas été déclarée provoquera l'envoi d'une exception ReferenceError.

    var a;
    console.log("La valeur de a est " + a); // le log contient "La valeur de a est undefined"
    console.log("La valeur de b est " + b); // signale une exception ReferenceError
    

    Il est possible d'utiliser undefined pour déterminer si une variable possède une valeur. Dans l'exemple qui suit, la condition de l'instruction if sera validée car la variable n'a pas été initialisée (elle a simplement été déclarée) :

    var input;
    if (input === undefined){
      faireCeci();
    } else {
      faireCela();
    }
    

    La valeur undefined se comporte comme le booléen false lorsqu'elle est utilisée dans un contexte booléen. Ainsi, le fragment de code qui suit exécutera la fonction maFonction puisque le premier élément de monTableau n'est pas défini :

    var monTableau = new Array();
    if (!monTableau[0]){
      maFunction(); 
    }
    

    La valeur undefined est convertie en NaN (pour Not a Number : « n'est pas un nombre ») lorsqu'elle est utilisée dans un contexte numérique.

    var a;
    a + 2 = NaN

    Une variable valant null sera toujours considérée comme 0 dans un contexte numérique et comme false dans un contexte booléen. Par exemple, on aura :

    var n = null;
    console.log(n * 32); // Le log affichera 0

    Les portées de variables

    Lorsqu'une variable est déclarée avec var en dehors des fonctions, elle est appelée variable globale car elle est disponible pour tout le code contenu dans le document. Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable locale car elle n'est disponible qu'au sein de cette fonction.

    Avant ECMAScript 6, JavaScript ne définissait pas de portée pour une instruction de bloc ; les éléments du bloc seront locaux pour le code qui contient le bloc. Ainsi, l'exemple qui suit affichera 5 car la portée de x est la fonction (ou le contexte global) dans lequel x est déclaré, pas le bloc (correspondant à l'instruction if dans ce cas) :

    if (true) {
      var x = 5;
    }
    console.log(x);
    

    La déclaration let, introduite avec ECMAScript 6, ajoute un nouveau comportement :

    if (true) {
      let y = 5;
    }
    console.log(y); // ReferenceError: y is not defined
    

    Remontée de variables (hoisting)

    Un autre chose peut paraître étrange en JavaScript : il est possible, sans recevoir d'exception, de faire référence à une variable qui est déclarée plus tard. Ce concept est appelé « remontée » (hoisting en anglais) car, d'une certaine façon, les variables sont remontées en haut de la fonction ou de l'instruction. En revanche, les variables qui n'ont pas encore été initialisées renverront la valeur undefined.

    /**
     * Exemple 1
     */
    console.log(x === undefined); // donne "true"
    var x = 3;
    
    /**
     * Exemple 2
     */
    // renverra undefined
    var maVar = "ma valeur";
     
    (function () {
      console.log(maVar); // undefined
      var maVar = "valeur locale";
    })();
    

    Les exemples précédents peuvent être reformulés plus explicitement ainsi :

    /**
     * Exemple 1
     */
    var x;
    console.log(x === undefined); // donne "true"
    x = 3;
     
    /**
     * Exemple 2
     */
    var maVar = "ma valeur";
     
    (function () {
      var maVar;
      console.log(maVar); // undefined
      maVar = "valeur locale";
    })();
    

    C'est pourquoi il est conseillé de placer les instructions var dès que possible dans le code. De plus, cette bonne pratique aide à rendre le code plus lisible.

    Les variables globales

    Les variables globales sont en réalité des propriétés de l'objet global. Dans les pages web, l'objet global est window, et on peut donc accéder ou modifier la valeur de variables globales en utilisant la syntaxe suivante : window.variable .

    Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre ou dans un cadre depuis une autre fenêtre ou depuis un autre cadre (frame) en spécifiant son nom. Si, par exemple, une variable appelée numTéléphone est déclarée dans un document FRAMESET, il est possible d'y faire référence, depuis un cadre fils, avec la syntaxe parent.numTéléphone.

    Constantes

    Il est possible de créer des constantes en lecture seule en utilisant le mot-clé const. La syntaxe d'un identifiant pour une constante est la même que pour les variables (il doit débuter avec une lettre, un tiret bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode).

    const préfixe = '212';
    

    Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script.

    Les règles de portée des constantes sont les mêmes que pour les variables, à l'exception du mot-clé const qui est obligatoire. S'il est oublié, l'identifiant sera considéré comme celui d'une variable.

    Il est impossible de déclarer une constante avec le même nom qu'une autre variable ou fonction dans la même portée.

    // Renverra une erreur
    function f() {};
    const f = 5;
    
    // Renverra également une erreur
    function f() {
      const g = 5;
      var g;
    
      //instructions
    }
    

    Structures de données et types

    Types de données

    La dernière version du standard ECMAScript définit sept types de données :

    • Six types de données primitifs :
      • Type booléen : true et false.
      • Type nul (null), un mot-clé spécial pour indiquer une valeur nulle (au sens informatique). JavaScript étant sensible à la casse, null n'est pas Null, NULL, ou toute autre variante.
      • Un type pour les valeurs indéfinies (undefined).
      • Un type pour les nombres. 42 or 3.14159.
      • Un type pour les chaînes de caractères. "Coucou"
      • Un type pour les symboles, apparus avec ECMAScript 6. Ce type est utilisé pour représenter des données immuables et uniques.
    • et un type pour les objets (Object)

    Bien que cette description couvre peu de types de données, ceux-ci vous permettent d'implémenter une grande variété de fonctions au sein de vos applications. Les objets et les fonctions sont parmi les briques fondamentales du langage. On peut considérer, à première vue, les objets comme des conteneurs de valeurs et de fonctions pour une application.

    Conversion de types de données

    JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lorsque de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon :

    var réponse = 42;
    

    Et plus tard, d'affecter une chaîne de caractères à cette même variable :

    réponse = "Merci pour le dîner...";
    

    JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.

    Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :

    x = "La réponse est " + 42; // "La réponse est 42"
    y = 42 + " est la réponse"; // "42 est la réponse"
    

    Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura :

    "37" - 7; // 30
    "37" + 7; // "377"
    

    Conversion de chaînes de caractères en nombres

    Si un nombre est représenté en mémoire par une chaîne de caractères, il y a des méthodes pour effectuer la bonne conversion :

    parseInt renverra uniquement des nombres entiers, étant ainsi inappropriée pour la manipulation de nombre décimaux. Une bonne pratique pour cette fonction est de toujours inclure l'argument qui indique dans quelle base numérique le résultat doit être renvoyé (base 2, base 10...). 

    L'opérateur + unaire

    Une autre méthode pour récupérer une nombre à partir d'une chaîne de caractères consiste à utiliser l'opérateur +.

    "1.1" + "1.1" = "1.11.1"
    +"1.1" = 1.1 // fonctionne seulement avec le + unaire
    

    Littéraux

    Les littéraux sont utilisés pour représenter des valeurs en JavaScript. Ce sont des valeurs fixes, pas des variables, qui sont fournies littéralement au script. Cette section décrit les différents types de littéraux :

    Les littéraux de tableaux

    Un littéral de tableau est une liste de zéro ou plusieurs expressions, dont chacune représente l'élément d'un tableau, encadrées par des crochets ([]). Lorsqu'un tableau est créé à partir d'un littéral, il est initialisé avec les valeurs spécifiées qui sont ses éléments, sa longueur correspondant au nombre d'arguments donnés.

    L'exemple suivant crée ainsi le tableau cafés avec trois éléments et une taille égale à 3 :

    var cafés = ["Brésilien", "Colombien", "Kona"];
    

    Note : Un littéral de tableau est du type d'un initialisateur d'objets. Voir l'utilisation d'initialisateurs d'objets.

    Si un tableau est créé en utilisant un littéral dans un script du plus haut niveau, JavaScript interprète le tableau chaque fois qu'il évalue l'expression contenant le littéral. De plus, un littéral utilisé dans une fonction est créé chaque fois que la fonction est appelée.

    Les littéraux de tableaux sont également des objets Array. Voir la page sur l'objet Array pour plus de détails.

    Les virgules supplémentaires

    Il n'est pas nécessaire de définir tous les éléments dans un littéral de tableau. Si vous utilisez deux virgules, l'une à la suite de l'autre, le tableau utilisera la valeur undefined pour les éléments non définis. L'exemple qui suit utilise le tableau poisson :

    var poisson = ["Clown", , "Chat"];
    

    Ce tableau possède deux éléments ayant une valeur et un élément vide (poisson[0] vaut "Clown", poisson[1] vaut undefined, et poisson[2] vaut "Chat").

    Si une virgule est ajoutée à la fin de la liste des éléments, elle est ignorée. Dans le prochain exemple, la longueur du tableau est égale à 3. Il n'y a pas d'élément maListe[3]. Les autres virgules indiquent un nouvel élément.

    Note : Avec d'anciennes versions de navigateurs, les virgules de fin peuvent causer des erreurs, il est fortement conseillé de les retirer.

    var maListe = ['maison', , 'école', ];
    

    Dans l'exemple qui suit, la longueur du tableau est égale à 4 et maListe[0] et maListe[2] sont manquants.

    var maListe = [ , 'maison', , 'école'];
    

    Dans l'exemple qui suit, la longueur du tableau est égale à 4 et maListe[1] et maListe[3] sont manquants.

    var maListe = ['maison', , 'école', , ];
    

    Comprendre le fonctionnement des virgules supplémentaires est important. Cependant, lorsque vous écrivez du code, veillez, dès que c'est possible, à déclarer les éléments manquants avec undefined : cela améliorera la lisibilité de votre code et il sera ainsi plus facile à maintenir.

    Les littéraux booléens

    Le type booléen possède deux valeurs littérales : true et false.

    Il ne faut pas confondre les valeurs true et false du type primitif booléen et les valeurs true et false de l'objet Boolean. L'objet Boolean permet de créer un objet autour du type de donnée booléen. Voir la page sur l'objet Boolean pour plus d'informations.

    Les littéraux de nombres entiers

    Les entiers peuvent être exprimés en notation décimale (base 10), hexadécimale (base 16), et octale (base 8).

    • Les littéraux représentant des entiers décimaux sont une suite de chiffres qui ne commence pas par un 0 (zéro)
    • Un 0 (zéro) en préfixe indique que le littéral entier est en notation octale. Ces entiers ne peuvent être composés que des chiffres de 0 (zéro) à 7 (sept).
    • Un préfixe 0x (ou 0X) indique une notation hexadécimale. Les entiers hexadécimaux peuvent être composés de chiffres (0-9) et des lettres A à F (minuscules et majuscules).

    La notation octale est maintenant obsolète et retirée du standard ECMA-262, Edition 3 (en mode strict). JavaScript 1.5 continue à supporter cette notation à des fins de rétro-compatibilité.

    Voici des exemples pour ces littéraux :

    0, 117 et -345 (notation décimale, base 10)
    015, 0001 et -077 (notation octale, base 8) 
    0x1123, 0x00111 et -0xF1A7 (notation hexadécimale, base 16)
    

    Les littéraux de nombres décimaux

    Un littéral de nombre décimal peut être composé de ces différentes parties :

    • Un entier, pouvant être signé (précédé d'un « + » ou d'un « - »),
    • Un point, séparateur décimal (« . »),
    • La partie décimale (un autre nombre)
    • Un exposant.

    L'exposant est la partie du nombre décimal commençant par un « e » ou un « E », suivie d'un entier pouvant être signé (précédé d'un « + » ou d'un « - »). Un littéral de nombre décimal doit comporter au moins un chiffre et soit un point (séparateur décimal) soit un « e » ou un « E ».

    Des exemples sont 3.1415, -3.1E12, .1e12, et 2E-12.

    On peut raccourcir cette syntaxe en :

    [chiffres][.chiffres][(E|e)[(+|-)]chiffres]
    

    Par exemple :

    3.14
    2345.789
    .3333333333333333333
    

    Les littéraux objets

    Un littéral objet est une liste de zéro ou plusieurs paires de propriétés définies par des paires de noms/valeurs. Ces paires sont délimitées par des accolades ({}). Un tel littéral ne devrait pas être utilisé en début d'instruction. En effet, l'accolade ouvrante sera mal interprétée (début de bloc) et causera une erreur ou un comportement incohérent.

    L'exemple qui suit montre l'utilisation d'un littéral objet. Le premier élément de l'objet voiture définit une propriété maVoiture, le deuxième élément : la propriété getVoiture invoque une fonction (CarTypes("Honda")), le troisième élément, la propriété special utilise une variable existante (soldes).

    var soldes = "Toyota";
    
    function CarTypes(nom) {
      return (nom === "Honda") ?
        nom :
        "Désolé, nous ne vendons pas de " + nom + "." ;
    }
    
    var voiture = { maVoiture: "Saturn", getVoiture: CarTypes("Honda"), spécial: soldes };
    
    console.log(voiture.maVoiture);   // Saturn
    console.log(voiture.getVoiture);  // Honda
    console.log(voiture.spécial); // Toyota 
    

    Il est également possible d'utiliser un littéral numérique ou un littéral de chaîne de caractères pour désigner le nom d'une propriété ou pour imbriquer un objet dans un autre. L'exemple qui suit illustre cette possibilité :

    var voiture = { plusieursVoitures: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
    
    console.log(voiture.plusieursVoitures.b); // Jeep
    console.log(voiture[7]); // Mazda
    

    Les noms des propriétés d'objets peuvent être n'importe quelle chaîne de caractères, y compris la chaîne vide. Si le nom de la propriété n'est pas un identifiant valide, il faudra qu'il soit encadré de simples quotes. Les noms de propriétés qui ne sont pas des identifiants valides ne peuvent pas être utilisés pour accéder à la valeur en utilisant la notation simple objet.propriété. En revanche, il est possible d'y accéder avec la notation utilisant les crochets ("[]").

    var nomsBizarres = {
      "": "Chaîne vide",
      "!": "Bang !"
    }
    console.log(nomsBizarres."");   // SyntaxError: Unexpected string
    console.log(nomsBizarres[""]);  // Chaîne vide
    console.log(nomsBizarres.!);    // SyntaxError: Unexpected token !
    console.log(nomsBizarres["!"]); // Bang !
    
    

    Attention :

    var toto = {a: "alpha", 2: "deux"};
    console.log(toto.a);    // alpha
    console.log(toto[2]);   // deux
    //console.log(toto.2);  // Erreur: parenthèse ) manquante après la liste d'argument
    //console.log(toto[a]); // Erreur: a n'est pas défini
    console.log(toto["a"]); // alpha
    console.log(toto["2"]); // deux
    

    Les littéraux de chaînes de caractères

    Un littéral de chaîne de caractères consiste en zéro ou plusieurs caractères encadrés par des doubles quotes (") ou des simples quotes ('). Une chaîne de caractères doit être encadrée par des symboles du même type (guillemets droits doubles ou guillemets droits simples) :

    • "toto"
    • 'truc'
    • "1234"
    • "Une ligne \n une autre ligne"
    • "Aujourd'hui j'ai mangé une pomme"

    Il est possible d'utiliser les méthodes de String sur un tel littéral. JavaScript convertira automatiquement le littéral en un objet String, appellera la méthode puis détruira l'objet String. On peut également utiliser la propriété String.length sur un littéral de chaîne de caractère :

    console.log("j'ai mangé une pomme".length) 
    // Affichera le nombre de caractères (y compris les blancs).
    // Dans ce cas, 20.
    

    Il est préférable d'utiliser des littéraux de chaînes de caractères s'il n'est pas spécifiquement nécessaire d'utiliser un objet String. Voir la page sur l'objet String pour plus de détails sur les objets String.

    Utilisation des caractères spéciaux

    En plus des caractères « classiques », il est possible d'insérer des caractères spéciaux dans les chaînes de caractères. Voici un exemple :

    "une ligne \n une autre ligne"
    

    Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser dans les chaînes de caractères JavaScript :

    Caractères spéciaux en JavaScript
    Caractère Signification
    \0 Octet null
    \b Retour arrière
    \f Saut de page
    \n Nouvelle ligne
    \r Retour chariot
    \t Tabulation
    \v Tabulation verticale
    \' Apostrophe ou guillemet droit simple
    \" Guillemet droit double
    \\ Barre oblique inversée
    \XXX Le caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux XXX entre 0 et 377. \251, par exemple représente la caractère copyright.
    \xXX Le caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright.
    \uXXXX Le caractère Unicode spécifié par quatre chiffres hexadécimaux XXXX. Ainsi, \u00A9 correspondra à la séquence Unicode du symbole copyright. Voir Unicode escape sequences.

    Les caractères d'échappement

    Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (backslash) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité.

    En précédant d'un backslash les guillemets droits doubles, on échappe ces caractères. Voici un exemple :

    var citation = "Il lit \"Bug Jargal\" de V. Hugo.";
    console.log(citation);
    

    Le résultat serait alors

    Il lit "Bug Jargal" de V. Hugo.

    Pour inclure un backslash dans une chaîne de caractères, il faut aussi l'échapper. Par exemple, pour stocker le chemin c:\temp dans une chaîne de caractères, on utilisera le code suivant :

    var chemin = "c:\\temp";
    

    Il est également possible d'échapper des sauts de lignes de la même façon. La barre oblique et le saut de ligne seront alors ignorés dans la valeur de la chaîne de caractères.

    var str = "cette chaîne \
    est cassée \
    sur plusieurs \
    lignes."
    console.log(str);   // cette chaîne est cassée sur plusieurs lignes.
    

    Bien que JavaScript ne dispose pas d'une syntaxe permettant de traiter les chaînes de caractères comme des contenus de fichier, il est possible d'ajouter un caractère de saut de ligne échappé et un saut de ligne en fin de ligne en utilisant cette façon :

    var poème = 
    "Les roses sont rouges,\n\
    Les violettes sont bleues.\n\
    Je suis schizophrénique,\n\
    Et donc je suis."
    

    En savoir plus

    Ce chapitre est centré sur les bases de la syntaxe, les déclarations et les types utilisés en JavaScript. Pour en savoir plus sur les différents composants du langage, voir les chapitres suivants du guide:

    Dans le chapitre suivant, on abordera les structures conditionnelles, permettant de diriger le flux d'instructions et la gestion des erreurs.

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, Goofy, tregagnon, SphinxKnight, riplay777
    Dernière mise à jour par : SphinxKnight,
    Masquer la barre latérale