Cours 3.5. Les variables en JavaScript

Cours 3.4 Sommaire Cours 3.6

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 :

var définit des variables globales ;
let définit des variables locales ;
const définir des constantes.

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 :

des nombres,
du texte
des objets,
des listes,
des tableaux,
des fonctions
...

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);

Tester l'exemple en ligne

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.

Tester l'exemple en ligne

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.

Tester l'exemple en ligne

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>

Faire l'exercice en ligne

Solution

Quiz

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

x = 5;

let x = 5;

var y = 12;

let z;

Vérifier

Que peut contenir une variable ?

un entier

un nombre à virgule

une chaîne de caractère (du texte)

une liste

Vérifier

Quelle est la différence entre var et let ?

Il n'y a pas de différence.

let occupe plus de place en mémoire.

Il y a moins de risque de confusion avec let.

let n'est plus supporté par les dernières version de JavaScript.

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.

Quelle est la différence entre var et const ?

Il n'y a pas de différence.

Avec let, la variable ne peut plus être modifiée.

let déclare une variable qui peut changer.

const déclare une constante qui sera figée.

Vérifier

Cours 3.4 Sommaire Cours 3.6

Voir aussi

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