Sommaire

Temps de lecture approximative : 11 minutes

Les variables en JavaScript

En JavaScript, une variable est un conteneur qui va nous permettre de stocker des informations. Elles ne servent qu'à stocker temporairement des informations. En effet, elles n'existent que durant l'exécution du code JS ; elles ne persistent pas dans le temps. Si l'on souhaite sauvegarder durablement des informations, il faut se tourner vers une autre méthode : base de données, fichiers, cookies par exemple. Cependant, la valeur d'une variable peut évoluer au fil de l'exécution d'un code JS. Il faut bien distinguer les deux termes : la variable et la valeur. Si on souhaite faire une métaphore, on peut prendre un conteneur de marchandises. Le conteneur correspond à la variable et la valeur correspond au contenu du conteneur.

Les variables, ça sert à quoi ?

Comme dans tous les langages de programmation, les variables font partie des fondements. Il est essentiel de pouvoir stocker et manipuler des variables pour développer les scripts JavaScript. Les futures instructions que nous écrirons en JS feront évoluer des variables pour répondre au besoin initial. Vous comprendrez mieux l'intérêt des variables quand nous commencerons réellement à écrire des scripts.

Créer ou déclarer une variable en JavaScript

Comme énoncé précédemment, une variable nous permet de stocker temporairement des informations. Chaque variable est identifiée au sein du code JS par un nom unique. Cela permet de les distinguer les unes des autres et de les utiliser sans problèmes.

A l'instar des identifiants en HTML, on peut identifier nos variables avec n'importe quel nom. Chaque développeur est libre d'utiliser les noms de variables qu'il souhaite. Cependant, il y a tout de même quelques règles à respecter.

Pour déclarer une variable en JS, vous devez respecter les règles suivantes :

• Utiliser le mot-clé let avant chaque nom de variable ;
• Le nom d’une variable doit obligatoirement commencer par une lettre ou un underscore (_) ;
• Le nom ne doit pas contenir d'espace, ni de caractère spécial (-, !, %, etc.) hormis le _ (underscore) ;
• Toujours terminer par un ; (point-virgule) ;

let test;

Vous pouvez trouver sur d'autres cours ou d'autres ressources web, le mot-clé var pour déclarer une variable, qui était anciennement utilisé. Pour le moment, les deux fonctionnent mais dans un avenir plus ou moins proche, le mot-clé var va disparaître. Dans ce cours, nous utiliserons uniquement le mot-clé let.

Les noms de variables sont sensibles à la casse. Donc pour exemple, les variables test, TEST et Test sont bien trois variables distinctes.

let test;
let TEST;
let Test;

Ci-après quelques exemples de noms de variables incorrects :

Déclaration de variable incorrecte	Raison
let une variable;	Comporte un espace
let 1variable;	Démarre par un chiffre
let une-variable;	Comporte un caractère spécial
let unevariable	Ne termine pas par un ;

Nous savons désormais comment créer une variable avec un nom correct. Nous avons également vu plusieurs exemples de noms de variables incorrects, ce qui nous permettra d'éviter des erreurs par la suite. Cependant, les variables ne stockent rien pour le moment. Et, c'est bien dommage.

Initialiser une variable en JavaScript

Nous l'avons vu en introduction, le but d'une variable est de contenir des informations. Lorsque l'on assigne une valeur pour la première fois à une variable, alors on parle d'initialisation. On peut déclarer une variable puis l'initialiser ou faire les deux actions dans la même instruction. Ci-après les deux méthodes.

let test;
test = "Hello world !";

let test = "Hello world !";

Dans le premier cas, on déclare la variable test, puis on l'initialise avec la valeur Hello world !. Alors que dans le second cas, on fait tout en une seule instruction. Dans notre exemple, on affecte la valeur Hello world ! dans la variable test.

Pour initialiser une variable, on utilise l'opérateur = (égal). Attention, à ne pas confondre l'opérateur d’assignation ou d’affectation, avec le signe mathématique, qu'on utilisera par la suite comme un opérateur d’égalité.

Dans l'exemple, on stocke la chaîne de caractères Hello world ! dans la variable test. On observe que le texte est entouré par des symboles. Les valeurs de type chaîne de caractères sont encadrées par des guillemets simples ou doubles. Tout de suite, un exemple où les deux instructions sont équivalentes.

let test = "Hello world !";
let test = 'Hello world !';

Afficher la valeur d'une variable

Nous verrons au fil de ce cours qu'il existe plusieurs méthodes pour afficher ce que contient une variable. Pour tester l'affichage d'une variable, nous allons utiliser la fonction alert(). Nous l'utiliserons de la manière suivante :

let test = 'Hello world !';
alert(test);

Quelle est cette sorcellerie ? La fonction alert() permet d'afficher une boîte de dialogue. Cette dernière affiche le contenu du paramètre de la fonction, en l'occurrence notre variable test. Suivant le navigateur web utilisé, on obtient un rendu similaire à celui ci-dessous.

Nous reviendrons plus en détails par la suite sur les notions clés de fonction et de paramètre. Pour le moment, gardons en mémoire que la fonction alert() est utile pour afficher facilement le contenu d'une variable.

Redéclaration de variables en JavaScript

Dans le cas d'une déclaration de variable avec le mot-clé let, on ne peut pas redéclarer la même variable. Sinon, on obtient une erreur de syntaxe : Identifier 'test' has already been declared. L'exemple ci-après est une mauvaise pratique qui n'est pas à reproduire.

let test = 'Hello world !';
let test = 'Goodbye world !';

Modifier une variable en JavaScript

Comme expliqué en introduction de ce chapitre, la valeur d'une variable peut évoluer au fil de l'exécution d'un code JS. Nous venons de voir juste avant que l'on ne peut pas redéclarer une variable déjà déclarée précédemment. Alors, comment modifier la valeur d'une variable ? Pour assigner une nouvelle valeur à une variable, il faut de nouveau utiliser l'opérateur =, mais avec une légère nuance par rapport à l'initialisation. Exemple.

let test = 'Hello world !';
test = 'Goodbye world !';
alert(test);

Plus besoin d'utiliser le mot-clé let, il suffit simplement d'utiliser le nom de la variable. Dans l'exemple ci-dessus, la nouvelle valeur va écraser la valeur déjà stockée. Cette dernière sera supprimée. La valeur Goodbye world ! sera donc affichée dans la boîte de dialogue.

Ce premier chapitre sur le JavaScript se termine. Nous venons de faire nos premiers pas dans ce langage de programmation en jouant avec les variables, une notion très importante. Le deuxième chapitre sera tout aussi important : les types de données. Pour le moment, nous avons uniquement stocké dans nos variables des chaînes de caractères. Nous allons découvrir que l'on peut stocker différents types de données.