Cours 3.5. Les variables en JavaScript

Comme tous les langages de programmation, le JavaScript permet d'utiliser des variables. Elles permettent de mémoriser des nombres, du texte, des listes ... mais surtout, nous verrons plus loin qu'il est possible de faire des opérations avec ces variables.

Il existe trois mots-clés pour déclarer des variables :

La différence principale entre var et let est leur portée, c'est-à-dire les endroits du code où les variables pourront être utilisées.

Var

Le mot-clé Var permet de déclarer une variable globale (pour simplifier, elle sera accessible partout). Dans l'exemple ci-dessous, on déclare une variable x avec une valeur non définie et une variable y qui vaut 5.

var x;
var y = 5;

En JavaScript, les variables peuvent contenir différents types d'éléments :

Voici quelques exemples :

var entier = 12;
var reel = 12.3456;
var texte = "Hello Wolrd!";
var liste = ["Jacques", "Nicolas", "François"];

Le problème des variables créée avec var est qu'il est possible de créer plusieurs fois des variables avec le même nom :

var maVariable = "Le texte initial";
var maVariable = "Autre chose";

// Affiche "Autre chose"
console.log (maVariable);

Lorsque l'on développe de gros projets, c'est un problème parce qu'il est facile de déclarer une deuxième fois une variable déjà existente, et donc de l'écraser. C'est une source de bugs. Pour éviter ce problème, il est préférable de privilégier let.

Let

Pour éviter de créer deux variables avec le même nom (ce qui est possible avec var), JavaScript a introduit un nouveau type en 2015 : let.

Le premièr avantage de let est qu'il est impossible de déclarer deux variables avec le même nom :

let maVariable = 5;
let maVariable = 7;

Le code ci-dessus affiche un message d'erreur dans la console :

Uncaught SyntaxError: Identifier 'maVariable' has already been declared.

let a un autre avantage : la variable n'existe que dans le bloc où elle est déclarée, on dit que c'est une variable locale. Les variables locales permettent d'économiser la mémoire, car elles sont effacées à la fin du bloc dans lequel elles sont déclarées.

Pour ces raisons, il est préférable de privilégier la déclaration des variables avec let.

Const

const est l'abbréviation de constante. Il ne s'agit pas exactement d'une variable : les variables sont variables (elle peuvent changer), par opposition aux constantes qui sont constantes (leur valeur ne changera jamais). Le code ci-dessous déclare une constante, puis tente de modifier sa valeur :

const maVariable = 5;
maVariable = 12;

Comme on pouvait s'en douter, ce code génère une erreur qui stipule que l'on ne peut pas changer la valeur d'une constante.

Uncaught TypeError: Assignment to constant variable.

Exercice

Complétez le script du code suivant avec la déclaration de la variable message (avec let). La variable message contiendra le texte La valeur de PI est :. Déclarez ensuite une constante PI qui contiendra 3.1415.

<html>
  <head>
  </head>
  <body>
    <h1>Variables</h1>

    <script>
      // Déclarez les variables ici

      console.log(message, PI);
    </script>
  </body>
</html>

Quiz

Quelles syntaxes permettent de déclarer des variables en JavaScript ?

Vérifier Bravo ! Dans le dernier cas, la variable est déclarée, mais sa valeur est non définie. Essaie encore ...

Que peut contenir une variable ?

Vérifier Bravo ! En JavaScript, les variables sont très polyvalentes. Essaie encore ...

Quelle est la différence entre var et let ?

Vérifier Bravo ! Les variables déclarées avec let occupe moins de place en mémoire et ne peuvent pas être déclarée plusieurs fois. Essaie encore ...

Quelle est la différence entre var et const ?

Vérifier Bravo ! Les variables peuvent varier, les constantes sont figées. Essaie encore ...

Voir aussi


Dernière mise à jour : 22/09/2022