Déclaration et assignation d'une variable [Les variables]

Déclaration et assignation d'une variable

Objectifs

Déclarer et initialiser une variable
Comprendre la différence entre var et let
Maîtriser la réaffectation et l'assignation par transitivité

Mise en situation

Afin de pouvoir utiliser notre variable, nous allons voir comment la déclarer et lui affecter une valeur.

Déclarer une variable

Avant d'initialiser une variable, il faut d'abord la déclarer. Pour cela, il suffit d'utiliser l'un des mots-clés permettant de déclarer une variable, suivi du nom qui lui est donné

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

En déclarant la variable et en lui assignant une valeur aussitôt via l'opérateur "=", qui n'agit alors pas comme un opérateur d'égalité, mais bien comme un opérateur d'assignation.
En déclarant la variable sans lui attribuer de valeur directement. Elle aura alors pour valeur undefined, jusqu'à ce qu'une autre valeur lui soit attribuée.

Exemple :

var maVariable = "ma variable";

var maVariable = "ma variable";

Dans cet exemple, on a affecté la valeur à droite de l'opérateur d'assignation (=) à la variable déclarée à gauche.

var maVariableSansValeur;
console.log(maVariableSansValeur) // Le résultat affiché sera undefined
maVariableSansValeur = 10;
console.log(maVariableSansValeur) // Le résultat affiché sera 10

var maVariableSansValeur;

console.log(maVariableSansValeur) // Le résultat affiché sera undefined
maVariableSansValeur = 10;
console.log(maVariableSansValeur) // Le résultat affiché sera 10

Dans cet exemple, on a tout d'abord déclaré la variable sans lui assigner de valeur. Elle valait donc undefined (non défini). On lui a ensuite assigné la valeur 10 : à ce moment-là, il ne faut pas mettre le mot var, car l'ordinateur comprendrait alors que nous souhaitons déclarer à nouveau la variable.

Avant d'essayer d'accéder à une variable, il faut qu'elle ait été déclarée au préalable.

Méthode : Nommage d'une variable

Une variable se compose d'une clé unique et d'une valeur. Cette clé ne peut pas être constituée de n'importe quel caractère alphanumérique, en effet, elle doit commencer par une lettre, un underscore ou un signe dollar.

Les noms de variables sont sensibles à la casse, ce qui signifie que la variable nommée myVariable est différente d'une autre variable nommée myvariable. Il est impossible d'avoir deux variables avec le même nom dans le même bloc ou dans le bloc parent et le bloc enfant.

Le nommage est libre, à l'exception de certains noms réservés, tels que boolean, abstract, return, var, etc. Pour rendre le code plus facile à lire, il doit être aussi significatif que possible.

Par exemple, pour la variable qui servira à stocker la date de naissance de l'utilisateur, il est judicieux de la nommer dateNaissance au lieu de variableAtHasard, afin qu'en lisant le code, on puisse facilement comprendre à quoi elle fait référence.

De manière générale, les variables sont nommées en utilisant la syntaxe camelCase, ce qui signifie que la première lettre du premier mot est en minuscule, et la première lettre de chaque mot suivant est en majuscule.

Par conséquent, le nom de la variable sera composé de la première lettre minuscule suivie d'une lettre majuscule, par exemple : dateNaissance.

Remarque : La notion de bloc

On appelle bloc de code tout code étant encapsulé et autonome. Nous verrons plus tard les fonctions JavaScript, mais en substance, il est possible de créer des parties de code autonomes (blocs) au sein d'un même fichier ou d'un même bloc. Vous trouverez dans le paragraphe suivant une explication plus détaillée.

Exemple :

Voici quelques exemples de noms de variables syntaxiquement corrects et incorrects :

let nommageOk; // Nom OK, caractères alphanumériques
let nommage-KO; // Nom KO, tiret non compris dans les caractères autorisés
let #symboles; // Nom KO, dièse non compris dans les caractères autorisés
let _variableAvecTiretBas // Nom OK, caractères alphanumériques et tiret bas autorisés dans le nommage
let boolean // Nom KO, boolean est un nom réservé
let mavariableavecunnomok // Nom OK, mais il vaut mieux préférer le lowerCamelCase qui facilite la lecture du nom de la variable

let nommageOk; // Nom OK, caractères alphanumériques
let nommage-KO; // Nom KO, tiret non compris dans les caractères autorisés
let #symboles; // Nom KO, dièse non compris dans les caractères autorisés
let _variableAvecTiretBas // Nom OK, caractères alphanumériques et tiret bas autorisés dans le nommage
let boolean // Nom KO, boolean est un nom réservé
let mavariableavecunnomok // Nom OK, mais il vaut mieux préférer le lowerCamelCase qui facilite la lecture du nom de la variable

Les mots-clés var et let

Différents mots-clés permettent de déclarer une variable :

Le mot-clé var : il a une portée limitée à la fonction et non au bloc courant, et peut être déclaré sans valeur initiale.

Les variables déclarées avec le mot-clé var peuvent être déclarées après la première utilisation. En effet, les déclarations de variables définies avec le mot-clé var sont traitées avant le reste du code en JavaScript. Après l'introduction de let, var n'a plus de sens, car la fonction de let est essentiellement la même que var, mais l'effet est meilleur. Préférez toujours utiliser let pour éviter les conflits dans le code.

Le mot-clé let a une portée limitée au bloc courant (accolades les plus proches) et peut être déclaré sans valeur initiale.

Un bloc de code est, de façon générale, tout ce que vous verrez entre deux accolades ( { } ).

La portée (ou scope en anglais) est la portion de code dans laquelle une variable existe. La portée est différente selon les mots-clés utilisés lors de la déclaration. Cette notion sera vue plus en détails en suivant le parcours Javascript, mais il est intéressant de connaître les grandes lignes avant d’y être confronté.

Retenez que let et const ont la même portée et que var a une portée légèrement supérieure, sans pour autant que cela soit toujours un avantage.

début portée de fonction  {
  début portée de bloc {
    //code
    //code 
  fin de portée de bloc }
  //code
fin de portée de fonction }

début portée de fonction  {
  début portée de bloc {
    //code
    //code 
  fin de portée de bloc }
  //code
fin de portée de fonction }

La déclaration d'une variable sans le mot-clé var ou let créera une variable d'une portée globale non déclarée (au niveau de l'élément window), mais ce n'est pas une pratique recommandée, car elle peut avoir des effets inattendus.

Il est donc préférable de définir la variable en question au niveau du bloc dans lequel elle doit être accessible.

L'utilisation des mots-clés var et let n'est utile que lors de la déclaration des variables : il suffit d'utiliser leur nom pour les manipuler une fois qu'elles ont été déclarées.

Réaffectation d'une variable

Pour affecter une nouvelle valeur à une variable déjà initialisée, il suffit de se servir de nouveau de l'opérateur d'assignation "=".

La nouvelle valeur attribuée à la variable va écraser l'ancienne valeur.

var a = "Une chaine de caractère";
console.log("a : ", a) ;
// Affichera "a  : Une chaine de caractère"
a = 10;
console.log("a : ", a);
// Affichera "a  : 10", l'ancienne valeur a été écrasée.

var a = "Une chaine de caractère";

console.log("a : ", a) ;
// Affichera "a  : Une chaine de caractère"

a = 10;
console.log("a : ", a);
// Affichera "a  : 10", l'ancienne valeur a été écrasée.

Assignation par transitivité

Si on assigne une valeur à une variable en lui assignant une autre variable comme valeur, alors la variable en question prendra la valeur de la seconde variable au moment de l'assignation.

var a = 0;
var b = a;
console.log("a : ", a, "& b : ", b) ;
// Affichera "a  : 0 & b : 0", b vaut la valeur de a au moment où l'assignation est faite.
a = 10;
console.log("a : ", a, "& b : ", b);
// Affichera "a  : 10 & b : 0", b ne change pas de valeur avec a.

var a = 0;
var b = a;
console.log("a : ", a, "& b : ", b) ;
// Affichera "a  : 0 & b : 0", b vaut la valeur de a au moment où l'assignation est faite.

a = 10;
console.log("a : ", a, "& b : ", b);
// Affichera "a  : 10 & b : 0", b ne change pas de valeur avec a.

Syntaxe : À retenir

Il y a donc plusieurs manières de déclarer une variable, selon la portée souhaitée : let pour une portée propre au bloc, et var pour une portée propre à la fonction dans laquelle elle est déclarée.
Afin de respecter les bonnes pratiques, il est préférable de choisir une méthode au début d'un projet et de s'y tenir par la suite, de manière à garder une cohérence dans le code produit.

Complément :

Déclaration de variables