Les variables

La plupart du temps, une application JavaScript doit utiliser des informations. Voici 2 exemples :

1. Une boutique en ligne – les informations peuvent inclure des articles vendus et un panier d’achat.
2. Une application de chat – les informations peuvent inclure des utilisateurs, des messages et bien plus encore.

Les variables sont utilisées pour stocker ces informations.

Une variable

Une variable est un “stockage nommé” pour les données. Nous pouvons utiliser des variables pour stocker des goodies, des visiteurs et d’autres données.

Pour créer une variable en JavaScript, nous devons utiliser le mot-clé let.

L’instruction ci-dessous crée (autrement dit: déclare) une variable avec le nom “message” :

let message;

Maintenant, nous pouvons y mettre des données en utilisant l’opérateur d’affectation = :

let message;

message = 'Hello'; // stocke la chaîne de caractères 'Hello' dans la variable nommée message

La chaîne de caractères est maintenant enregistrée dans la zone de mémoire associée à la variable. Nous pouvons y accéder en utilisant le nom de la variable :

let message;
message = 'Hello!';

alert(message); // affiche le contenu de la variable

Pour être concis, nous pouvons fusionner la déclaration et l’affectation de variables en une seule ligne :

let message = 'Hello!'; // définir la variable et assigner la valeur

alert(message); // Hello!

Nous pouvons également déclarer plusieurs variables sur une seule ligne :

let user = 'John', age = 25, message = 'Hello';

Cela peut sembler plus court, mais ce n’est pas recommandé. Pour une meilleure lisibilité, veuillez utiliser une seule ligne par variable.

La variante multiligne est un peu plus longue, mais plus facile à lire :

let user = 'John';
let age = 25;
let message = 'Hello';

Certaines personnes définissent également plusieurs variables dans ce style multiligne :

let user = 'John',
  age = 25,
  message = 'Hello';

… Ou même dans le style “virgule première” :

let user = 'John'
  , age = 25
  , message = 'Hello';

Techniquement, toutes ces variantes font la même chose. C’est donc une question de goût personnel et d’esthétique.

var message = 'Hello';

Une analogie avec la vie réelle

Nous pouvons facilement saisir le concept d’une “variable” si nous l’imaginons comme une “boîte” pour les données, avec un autocollant portant un nom unique.

Par exemple, la variable message peut être imaginée comme une boîte étiquetée “message” avec la valeur “Hello!” à l’intérieur :

Nous pouvons mettre n’importe quelle valeur dans la boîte.

On peut aussi le changer autant de fois qu’on veut :

let message;

message = 'Hello!';

message = 'World!'; // valeur changée

alert(message);

Lorsque la valeur est modifiée, les anciennes données sont supprimées de la variable :

Nous pouvons également déclarer deux variables et copier des données de l’une à l’autre.

let hello = 'Hello world!';

let message;

// copier 'Hello world' de hello vers message
message = hello;

// maintenant les deux variables contiennent les mêmes données
alert(hello); // Hello world!
alert(message); // Hello world!

let message = "This";

// répéter 'let' conduit à une erreur
let message = "That"; // SyntaxError: 'message' has already been declared

Nom de variable

Il existe deux limitations pour un nom de variable en JavaScript :

1. Le nom ne doit contenir que des lettres, des chiffres, des symboles $ et _.
2. Le premier caractère ne doit pas être un chiffre.

Noms valides, par exemple :

let userName;
let test123;

Lorsque le nom contient plusieurs mots, le camelCase est couramment utilisé. C’est-à-dire que les mots se succèdent, chaque mot à l’exception du premier commence par une majuscule : monTresLongNom.

Ce qui est intéressant – le signe dollar '$' et l’underscore '_' peuvent également être utilisé dans les noms. Ce sont des symboles réguliers, tout comme les lettres, sans aucune signification particulière.

Ces noms sont valides :

let $ = 1; // déclarer une variable avec le nom "$"
let _ = 2; // et maintenant une variable avec le nom "_"

alert($ + _); // 3

Exemples de noms de variables incorrects :

let 1a; // ne peut pas commencer avec un chiffre

let mon-nom; // un trait d'union '-' n'est pas autorisé dans le nom

let имя = '...';
let 我 = '...';

let let = 5; // impossible de nommer une variable "let", erreur!
let return = 5; // on ne peut pas la nommer "return" aussi, erreur!

// note : pas de "use strict" dans cet exemple

num = 5; // la variable "num" est créée si elle n'existe pas

alert(num); // 5

"use strict";

num = 5; // erreur: num n'est pas défini

Les Constantes

Pour déclarer une constante (non changeante), on peut utiliser const plutôt que let :

const myBirthday = '18.04.1982';

Les variables déclarées à l’aide de const sont appelées “constantes”. Elles ne peuvent pas être réassignées. Une tentative de le faire provoquerait une erreur :

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // erreur, ne peut pas réaffecter la constante !

Lorsqu’un programmeur est certain que la variable ne doit jamais changer, il peut utiliser const pour le garantir et également le montrer clairement à tout le monde.

Les constantes en majuscules

Il existe une pratique répandue d’utiliser des constantes comme alias pour des valeurs difficiles à mémoriser, qui sont connues avant leur exécution.

Ces constantes sont nommées en utilisant des majuscules et des underscores.

Par exemple, créons des constantes pour les couleurs au format dit “web” (hexadécimal) :

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ... quand il faut choisir une couleur
let color = COLOR_ORANGE;
alert(color); // #FF7F00

Bénéfices:

• COLOR_ORANGE est beaucoup plus facile à retenir que "#FF7F00".
• Il est beaucoup plus facile de mal saisir "#FF7F00" que COLOR_ORANGE.
• En lisant le code, COLOR_ORANGE est beaucoup plus significatif que #FF7F00.

Quand devrions-nous utiliser les majuscules pour une constante et quand devrions-nous les nommer normalement ? Soyons clairs.

Être une “constante” signifie simplement que la valeur ne change jamais. Mais il existe des constantes connues avant l’exécution (comme une valeur hexadécimale pour le rouge), et il y a celles qui sont calculées en temps réel, pendant l’exécution, mais ne changent pas après l’affectation.

Par exemple :

const pageLoadTime = /* temps pris par une page Web pour charger */;

La valeur de pageLoadTime n’est pas connue avant le chargement de la page, elle est donc nommée normalement. Mais cela reste une constante, car elle ne change pas après l’affectation.

En d’autres termes, les constantes nommées en majuscules ne sont utilisées que comme alias pour les valeurs “codées en dur”.

Nommez les choses correctement

En parlant de variables, il y a une autre chose extrêmement importante.

Un nom de variable doit avoir une signification claire et évidente, décrivant les données qu’elle stocke.

Le nommage de variables est l’une des compétences les plus importantes et les plus complexes de la programmation. Un rapide coup d’œil sur les noms de variables peut révéler quel code est écrit par un débutant et par un développeur expérimenté.

Dans un projet réel, la majeure partie du temps est consacrée à la modification et à l’extension de la base de code existant, plutôt que d’écrire quelque chose de complètement séparé de zéro. Et lorsque nous revenons au code après un certain temps, il est beaucoup plus facile de trouver des informations bien étiquetées. Ou, en d’autres termes, lorsque les variables ont de bons noms.

Veuillez prendre le temps de réfléchir à un nom pertinent pour une variable avant de la déclarer. Cela vous facilitera énormément la vie.

Voici quelques règles à suivre :

• Utilisez des noms lisibles par des humains comme userName ou shoppingCart.
• Restez à l’écart des abréviations ou des noms courts tels que a, b, c, à moins que vous ne sachiez vraiment ce que vous faites.
• Faire en sorte que le nom soit le plus descriptif et concis possible. Des exemples de noms incorrects sont data et value. Un tel nom ne dit rien. C’est tout à fait acceptable de les utiliser si le contexte dans lequel les données ou les valeurs sont impliquées est particulièrement évident.
• S’accorder avec son équipe (et soi-même) sur les termes utilisés. Si un visiteur du site est appelé un “utilisateur”, nous devrions nommer les variables connexes comme currentUser ou newUser, mais non currentVisitor ou encore newManInTown.

Cela semble simple ? En effet, ça l’est, mais la création de noms descriptifs et concis dans la pratique ne l’est pas. Fonce.

Résumé

Nous pouvons déclarer des variables pour stocker des données. Cela peut être fait en utilisant var ou let ou const.

• let – est une déclaration de variable moderne.
• var – est une déclaration de variable old-school. Normalement, nous ne l’utilisons pas du tout, mais nous couvrirons les différences subtiles par rapport à let dans le chapitre L'ancien "var", juste au cas où vous en auriez besoin.
• const – est équivalent à let, mais la valeur de la variable ne peut pas être modifiée.

Les variables doivent être nommées d’une manière qui nous permet de comprendre facilement ce qui est à l’intérieur.