path: root/files/fr/learn/javascript/first_steps/variables/index.html

---
title: Stocker les informations nécessaires — les variables
slug: Learn/JavaScript/First_steps/Variables
translation_of: Learn/JavaScript/First_steps/Variables
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>

<p>Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Prérequis&nbsp;:</th>
   <td>Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.</td>
  </tr>
  <tr>
   <th scope="row">Objectif&nbsp;:</th>
   <td>Se familiariser avec l'usage élémentaire des variables en JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="Outils_nécessaires">Outils nécessaires</h2>

<p>Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Les outils de développement du navigateur</a> pour plus d'informations sur la manière d'accéder à ces outils).</p>

<p>Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable.</p>

<h2 id="Quest_ce_quune_variable">Qu'est ce qu'une variable ?</h2>

<p>Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple&nbsp;:</p>

<pre class="brush: html">&lt;button&gt;Pressez moi&lt;/button&gt;</pre>

<pre class="brush: js">const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('Quel est votre nom ?');
  alert('Salut ' + name + ', sympa de vous voir !');
}</pre>

<p>{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}</p>

<p>Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.</p>

<p>Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ?</p>

<pre class="example-bad">let name = prompt('Quel est votre nom ?');

if (name === 'Adam') {
  alert('Salut Adam, sympa de vous voir !');
} else if (name === 'Alan') {
  alert('Salut Alan, sympa de vous voir !');
} else if (name === 'Bella') {
  alert('Salut Bella, sympa de vous voir !');
} else if (name === 'Bianca') {
  alert('Salut Bianca, sympa de vous voir !');
} else if (name === 'Chris') {
  alert('Salut Chris, sympa de vous voir !');
}

// ... etc.</pre>

<p>Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine  — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.</p>

<p>Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.</p>

<p>Une autre particularité des variables&nbsp;: elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.</p>

<div class="note">
<p><strong>Note :</strong> Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.</p>
</div>

<p><img alt="" src="boxes.png"></p>

<h2 id="Déclarer_une_variable">Déclarer une variable</h2>

<p>Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons <em>déclarer la variable</em>. Pour ce faire, nous saisissons le mot‑clé <code>var</code> ou <code>let</code> suivi du nom que vous voulez donner à la variable&nbsp;:</p>

<pre class="brush: js">let myName;
let myAge;</pre>

<p>Dans ces lignes, nous venons de créer deux variables nommées respectivement <code>myName</code> et <code>myAge</code>. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrez cette console</a> soit dans un onglet séparé, soit dans une fenêtre selon votre préférence). Après cela, essayez de créer une variable (ou deux) en choisissant vous même le nom.</p>

<pre class="brush: html hidden">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JavaScript console&lt;/title&gt;
    &lt;style&gt;
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;


  &lt;/body&gt;

  &lt;script&gt;
    var geval = eval;
    function createInput() {
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class','input');
      inputPara.textContent = '&gt;';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);

      if(document.querySelectorAll('div').length &gt; 1) {
        inputForm.focus();
      }

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'error — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = 'Result: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }

    createInput();

  &lt;/script&gt;
&lt;/html&gt;</pre>

<p>{{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }}</p>

<div class="note">
<p><strong>Note :</strong> En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (<code>;</code>) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.</p>
</div>

<p>Vous pouvez maintenant tester si ces valeurs existent dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple</p>

<pre class="brush: js">myName;
myAge;</pre>

<p>Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur <code>undefined</code> en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant</p>

<pre class="brush: js">scoobyDoo;</pre>

<div class="note">
<p><strong>Note :</strong> Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, <em>ne pas exister</em> correspond à l'absence de boîte ; <em>valeur indéfinie</em> correspond à une boîte vide.</p>
</div>

<h2 id="Initialisation_dune_variable">Initialisation d'une variable</h2>

<p>Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (<code>=</code>), lui-même suivi de la valeur souhaitée pour la variable. Par exemple&nbsp;:</p>

<pre class="brush: js">myName = 'Chris';
myAge = 37;</pre>

<p>Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore&nbsp;:</p>

<pre class="brush: js">myName;
myAge;</pre>

<p>Il est possible de déclarer et initialiser une variable en même temps, comme ceci&nbsp;:</p>

<pre class="brush: js">let myDog = 'Rover';</pre>

<p>C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.</p>

<h2 id="La_différence_entre_var_et_let">La différence entre <code>var</code> et <code>let</code></h2>

<p>A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi <code>var</code> et <code>let</code> ?</p>

<p>Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que <code>var</code>. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du <code>var</code> peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, <code>let</code> a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du <code>var</code>, réglant ainsi les difficultés évoquées ci-dessus.</p>

<p>Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du <code>let</code>). </p>

<p>Pour commencer, si vous écrivez un programme JavaScript multi-lignes qui déclare et initialise une variable, vous pouvez déclarez une variable avec le mot-clé <code>var</code> après l'avoir initialisée. Cela fonctionnera. Par exemple :</p>

<pre class="brush: js">myName = 'Chris';

function logName(){
    console.log(myName);
}

logName();

var myName;
</pre>

<div class="note">
<p><strong>Note :</strong> l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.</p>
</div>

<p>Ce processus se nomme <strong>«</strong> <strong>hoisting »</strong> (en français, "hissage") — lisez <a href="/fr/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> pour plus de précisions sur ce sujet.</p>

<p>Le hissage ne fonctionne plus avec <code>let</code>. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire.</p>

<p>Deuxièmement, quand vous utilisez <code>var</code>, vous pouvez déclarer la même variable autant de fois que vous le désirez, avec <code>let</code> c'est impossible. Le code suivant s'exécute sans erreur :</p>

<pre class="brush: js">var myName = 'Chris';
var myName = 'Bob';
</pre>

<p> Celui là produit une erreur sur la seconde ligne :</p>

<pre class="brush: js">let myName = 'Chris';
let myName = 'Bob';
</pre>

<p>Le code correct serait :</p>

<pre class="brush: js">let myName = 'Chris' ;

myName = 'Bob' ;</pre>

<p>Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable —  cela rend les choses obscures.</p>

<p>Pour ces raisons, et d'autres, nous recommandons d'utiliser <code>let</code> plutôt que <code>var</code>. Il n'y a pas de bonne raison d'utiliser <code>var</code>, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du <code>let</code> avant la version 11 ; le support de <code>let</code> par le navigateur Edge ne pose pas de problème).</p>

<h2 id="Mise_à_jour_dune_variable">Mise à jour d'une variable</h2>

<p>Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console&nbsp;:</p>

<pre class="brush: js">myName = 'Bob';
myAge = 40;</pre>

<h3 id="Aparté_concernant_les_règles_de_nommage_des_variables">Aparté concernant les règles de nommage des variables</h3>

<p>Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z)  et du underscore ( _ ).</p>

<ul>
 <li>N'utilisez pas d'autres caractères ; ils pourraient entraîner des erreurs ou être difficiles à comprendre pour un auditoire international.</li>
 <li>N'utilisez pas le underscore comme premier caractère d'un nom de variable — cette façon d'opérer est utilisée dans certaines constructions JavaScript pour signer certaines spécificités ; il pourrait y avoir confusion.</li>
 <li>Ne mettez pas un chiffre en début de nom de variable. Ce n'est pas permis et provoque une erreur.</li>
 <li>Une convention sûre, nommée <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a> (dos de chameau), consiste à accoler plusieurs mots en mettant le premier en minuscules les suivants commençant par une majuscule. Dans cet article, nous avons adopté cette convention pour les noms de variables.</li>
 <li>Prenez des noms de variable intuitifs, décrivant les données que la variable contient. Évitez les noms se limitant à un caractère ou à l'inverse des noms trop longs, trop verbeux.</li>
 <li>Les variables sont sensibles à la casse — donc <code>myage</code> et <code>myAge</code> correspondent à deux variables différentes.</li>
 <li>Enfin les <em>mots réservés</em> du langage JavaScript ne peuvent pas être choisis comme nom pour une variable — les mots réservés sont les mots qui font effectivement partie de la syntaxe du JavaScript. Donc, vous ne pouvez pas utiliser des mots comme <code>var</code>, <code>function</code>, <code>let</code> ou <code>for</code> comme noms de variable. Les navigateurs les reconnaîtront en tant qu'éléments de code, et cela déclenchera des erreurs.</li>
</ul>

<div class="note">
<p><strong>Note :</strong> Une liste exhaustive des mots réservés est proposée dans la page <a href="/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords">Lexical grammar — keywords</a>.</p>
</div>

<p>Exemples de noms corrects&nbsp;:</p>

<pre class="example-good">age
myAge
init
initialColor
finalOutputValue
audio1
audio2</pre>

<p>Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) :</p>

<pre class="example-bad">1
a
_12
myage
MYAGE
var
document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman </pre>

<p>Parmi ces noms, les suivants déclenchent une <code>SyntaxError</code> &nbsp;:</p>

<pre class="brush: js example-bad">1 //la variable commence par un chiffre
var //mot réservé
document //mot réservé
</pre>

<p>Essayez maintenant de créer quelques variables supplémentaires en tenant compte de ce qui précède.</p>

<h2 id="Types_de_variables">Types de variables</h2>

<p>Plusieurs types de données peuvent être stockés dans des variables. Dans cette section, nous allons les décrire brièvement, puis dans les prochains articles, nous vous en dirons plus.</p>

<p>Jusqu'à présent, nous avons vu les deux types suivants, mais il y en a d'autres.</p>

<h3 id="Nombres">Nombres</h3>

<p>Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante). Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation. Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets.</p>

<pre class="brush: js">var myAge = 17;</pre>

<h3 id="Chaînes">Chaînes</h3>

<p>Les chaînes sont des mots ou des suites de mots. Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable.</p>

<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre>

<h3 id="Booléens">Booléens</h3>

<p>Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: <code>true</code> ou <code>false</code>. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être&nbsp;:</p>

<pre class="brush: js">var iAmAlive = true;</pre>

<p>Toutefois, en réalité, un booléen sera plutôt utilisé ainsi&nbsp;:</p>

<pre class="brush: js">var test = 6 &lt; 3;</pre>

<p>Cette expression utilise l'opérateur  « inférieur à » (<code>&lt;</code>) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra <code>false</code>, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.</p>

<h3 id="Tableaux">Tableaux</h3>

<p>Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console&nbsp;:</p>

<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim'];
var myNumberArray = [10,15,40];</pre>

<p>Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes&nbsp;:</p>

<pre class="brush: js">myNameArray[0]; // renverra 'Chris'
myNumberArray[2]; // renverra 40</pre>

<p>La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro&nbsp;: le premier élément a l'index 0.</p>

<p>Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.</p>

<h3 id="Objets">Objets</h3>

<p>En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.</p>

<p>Entrez la ligne suivant dans la console de votre explorateur&nbsp;:</p>

<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre>

<p>Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante&nbsp;:</p>

<pre class="brush: js">dog.name</pre>

<p>Nous en resterons là avec les objets pour le moment — vous en saurez plus à leur propos dans un module ultérieur.</p>

<h2 id="Typage_faible">Typage faible</h2>

<p>JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).</p>

<p>Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne&nbsp;:</p>

<pre class="brush: js">var myString = 'Hello';</pre>

<p>Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents&nbsp;:</p>

<pre class="brush: js">var myNumber = '500'; // oops, c'est toujours une chaîne
typeof(myNumber);
myNumber = 500; // mieux — maintenant c'est un nombre
typeof(myNumber);</pre>

<p>Entrez ces quatre lignes dans la console les unes à la suite des autres, et voyez les résultats. Notez l'emploi de la fonction spéciale <code>typeof()</code> — elle renvoie le type de donnée placé dans la variable. À son premier appel, elle renverra <code>string</code>, car à ce stade la variable <code>myNumber</code> contient la chaîne <code>'500'</code>. Observez bien et voyez ce que la fonction renvoie au second appel.</p>

<h2 id="Résumé">Résumé</h2>

<p>Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier comment les créer. Dans le prochain article, nous verrons en détail les nombres et comment effectuer les opérations mathématiques élémentaires.</p>

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</p>