Variables JavaScript

Variables JavaScript : let, const et var

Variables JavaScript

Les variables JavaScript sont des conteneurs nommés pour stocker des valeurs de données. Considérez-les comme des étiquettes pour les informations que votre programme doit mémoriser et manipuler.

Dans cet exemple, x, y et sum sont des variables :

const x = 5;
const y = 6;
const sum = x + y; // sum stockera la valeur 11

D’après l’exemple ci-dessus :

• x stocke la valeur 5.
• y stocke la valeur 6.
• sum stocke le résultat de x + y, qui est 11.

Déclaration de variables : let, const et var

Dans JavaScript moderne (ES6 et versions ultérieures), les variables sont généralement déclarées à l’aide de let et const. Le mot-clé plus ancien var existe également, mais il a des règles de portée différentes et est généralement évité dans le nouveau code.

• let : Déclare une variable à portée de bloc. La valeur d’une variable let peut être réaffectée.
• const : Déclare une constante à portée de bloc. Sa valeur ne peut pas être réaffectée après l’initialisation. Pour les objets et les tableaux, const signifie que la référence à l’objet/tableau ne peut pas changer, mais le contenu de l’objet/tableau peut toujours être modifié.
• var : Déclare une variable à portée de fonction ou à portée globale (syntaxe plus ancienne). Elle peut être réaffectée et redéclarée.

Créer (déclarer) une variable en JavaScript :

let carName; // Déclare une variable nommée carName (la valeur est undefined initialement)
carName = "Volvo"; // Affecte la chaîne "Volvo" à carName

const year = 2024; // Déclare une constante et l'initialise
// year = 2025; // Ceci provoquerait une erreur car 'year' est une constante

Il est de bonne pratique de déclarer les variables avant de les utiliser et d’initialiser les variables const au moment de leur déclaration.

Portée des variables

La portée détermine l’accessibilité (visibilité) des variables.

• Portée de bloc (let et const) : Les variables déclarées avec let et const ne sont accessibles qu’à l’intérieur du bloc de code (défini par {...}) où elles sont déclarées. Cela inclut les boucles, les instructions conditionnelles (if) et les blocs de fonction.
• Portée de fonction (var) : Les variables déclarées avec var sont accessibles dans toute la fonction dans laquelle elles sont déclarées, quelle que soit la structure des blocs.
• Portée globale : Les variables déclarées en dehors de toute fonction ou bloc sont globales et accessibles de n’importe où dans votre script.

Exemple de portée de bloc :

function testScope() {
  if (true) {
    let blockScopedVar = "I am block-scoped";
    const blockScopedConst = "Me too!";
    var functionScopedVar = "I am function-scoped";
    console.log(blockScopedVar); // Accessible
  }
  // console.log(blockScopedVar); // Erreur : blockScopedVar n'est pas définie ici
  // console.log(blockScopedConst); // Erreur : blockScopedConst n'est pas définie ici
  console.log(functionScopedVar); // Accessible
}
testScope();

L’utilisation de let et const aide à prévenir les bugs liés au hoisting de variables et aux variables globales involontaires qui étaient courantes avec var.

Identificateurs JavaScript (Noms de variables)

Toutes les variables JavaScript doivent être identifiées par des noms uniques, appelés identificateurs.

Règles pour la construction des noms de variables :

• Les noms peuvent contenir des lettres, des chiffres, des underscores (_) et des signes dollar ($).
• Les noms doivent commencer par une lettre, un signe dollar ($) ou un underscore (_). (Conventionnellement, commencer par une lettre).
• Les noms sont sensibles à la casse (myVariable et myvariable sont différents).
• Les mots-clés réservés (comme let, const, function, if) ne peuvent pas être utilisés comme noms de variables.

Utilisez des noms descriptifs et significatifs (par ex., userName, totalAmount) pour rendre votre code plus lisible. Le CamelCase (userName) est la convention standard.

L’opérateur d’affectation (=)

En JavaScript, le signe égal (=) est un opérateur d’affectation, et non un opérateur d‘“égalité” (pour l’égalité, utilisez == ou ===).

Il affecte la valeur de sa droite à la variable de sa gauche.

let x = 10; // Affecte 10 à x
x = x + 5;  // Affecte la valeur de (x + 5) à x. Maintenant x est 15.

Types de données JavaScript

Les variables JavaScript peuvent contenir différents types de données :

• Chaîne de caractères (String) : Données textuelles, par ex., "Hello", 'JavaScript'. (Enfermées entre guillemets ou apostrophes inversées).
• Nombre (Number) : Données numériques, par ex., 100, 3.14, 2.5e5 (notation scientifique). JavaScript n’a qu’un seul type numérique pour les entiers et les nombres à virgule flottante.
• Booléen (Boolean) : Valeurs logiques, true ou false.
• Objet (Object) : Une collection de paires clé-valeur, par ex., { name: "John", age: 30 }. Les tableaux et les fonctions sont aussi des types d’objets.
• Tableau (Array) : Une liste ordonnée de valeurs, par ex., [1, 2, "apple"].
• null : Représente l’absence intentionnelle de toute valeur d’objet.
• undefined : Indique qu’une variable a été déclarée mais n’a pas encore de valeur affectée.
• Symbole (Symbol) (ES6) : Une valeur primitive unique et immuable, souvent utilisée comme clé de propriété d’objet.
• BigInt (ES2020) : Pour les entiers de longueur arbitraire.

JavaScript est un langage à typage dynamique, ce qui signifie que vous n’avez pas à déclarer le type d’une variable. Le type est déterminé automatiquement à l’exécution.

let pi = 3.14;          // pi est un nombre
let person = "John Doe";  // person est une chaîne de caractères
let isHappy = true;       // isHappy est un booléen

Déclaration de plusieurs variables

Vous pouvez déclarer plusieurs variables dans une seule instruction, séparées par des virgules. Cependant, il est souvent plus clair de déclarer chaque variable sur sa propre ligne.

// Manière courante :
let name = "John Doe";
let age = 30;
let city = "New York";

// Également possible (moins courant pour `let` et `const` en raison des avantages de la portée de bloc sur des lignes séparées) :
let user = "Jane", role = "Admin", experience = 5;

Valeur de undefined

Une variable déclarée sans valeur assignée aura la valeur undefined.

let country;
console.log(country); // Sortie : undefined

Redéclaration de variables

let et const : Les variables déclarées avec let ou const ne peuvent pas être redéclarées dans la même portée. Cela entraînera une SyntaxError.

let myVar = "initial";
// let myVar = "new"; // Erreur : L'identifiant 'myVar' a déjà été déclaré

const myConst = 10;
// const myConst = 20; // Erreur : L'identifiant 'myConst' a déjà été déclaré

var (Ancienne Syntaxe) : Les variables déclarées avec var peuvent être redéclarées dans la même portée sans erreur. La redéclaration est effectivement ignorée si elle n’affecte pas également une nouvelle valeur ; si elle le fait, la variable prend la nouvelle valeur.

var oldVar = "Volvo";
var oldVar; // Aucune erreur, oldVar est toujours "Volvo"
console.log(oldVar); // Sortie : "Volvo"

var oldVar = "Saab"; // Réaffectation avec redéclaration
console.log(oldVar); // Sortie : "Saab"

Ce comportement de redéclaration de var peut entraîner des bugs, c’est l’une des raisons pour lesquelles let et const sont préférés.

Arithmétique JavaScript et coercition de type

Vous pouvez effectuer des opérations arithmétiques avec des variables JavaScript en utilisant des opérateurs comme +, -, *, /.

const x = 5 + 2 + 3; // x sera 10

JavaScript effectue une coercition de type lorsque des opérateurs sont utilisés avec des types mixtes. L’opérateur + est spécial : il effectue une addition pour les nombres et une concaténation pour les chaînes de caractères.

const strNum = "5" + 2 + 3; // Résultat : "523" (Concaténation de chaînes)
const numStr = 2 + 3 + "5"; // Résultat : "55" (Addition puis concaténation)

console.log("The year is " + 2024); // Résultat : "The year is 2024"

	Si vous utilisez l’opérateur + et que l’un des opérandes est une chaîne de caractères, JavaScript convertira l’autre (ou les autres) opérande(s) en chaînes de caractères et effectuera une concaténation. Soyez attentif à ce comportement.