Déclaration de variables en JavaScript [Variables en JS]

Déclaration de variables en JavaScript

Utilisation de 'var'

L'utilisation de 'var' en JavaScript concerne la déclaration de variables qui peuvent être réaffectées et dont la portée est définie par la fonction englobante. Bien que 'var' ait été le mot-clé standard pour déclarer des variables dans les versions antérieures de JavaScript, l'introduction de 'let' et 'const' dans ECMAScript 2015 (ES6) a rendu son utilisation moins courante en raison de certaines limitations.

// Déclaration et initialisation d'une variable avec 'var'
var age = 25;
// Réaffectation d'une nouvelle valeur à la variable
age = 26;
console.log(age); // Affiche "26"

// Déclaration et initialisation d'une variable avec 'var'
var age = 25;

// Réaffectation d'une nouvelle valeur à la variable
age = 26;
console.log(age); // Affiche "26"

Lien Replit

Dans cet exemple, nous déclarons une variable appelée age avec la valeur 25. Ensuite, nous réaffectons la valeur 26 à la variable et affichons la nouvelle valeur.

Cependant, il est important de noter que l'utilisation de 'var' présente certaines limitations. Par exemple, les variables déclarées avec 'var' sont accessibles en dehors du bloc dans lequel elles sont définies, tant qu'elles restent dans la fonction englobante. Cela peut entraîner des problèmes de lisibilité et des erreurs involontaires.

Voici d’ailleurs une erreur type de l’utilisation de “var” :

function testFunction() {
   if (false) {
      var testVariable = "Hello world";
   }
   console.log(testVariable);
}
testFunction(); // Résultat : "undefined"

function testFunction() {
   if (false) {
      var testVariable = "Hello world";
   }
   console.log(testVariable);
}

testFunction(); // Résultat : "undefined"

Lien Replit

Dans cet exemple, la variable testVariable est déclarée dans une condition qui ne sera jamais satisfaite, car la condition if (false) ne sera jamais vraie. Cependant, la variable est toujours accessible en dehors de cette condition, car elle est déclarée avec le mot-clé "var".

Lorsque la fonction testFunction() est appelée, elle affiche la valeur de la variable test avec console.log(). Comme la variable est déclarée avec "var" dans la fonction, elle est accessible tout au long de la fonction, même si elle n'a jamais été définie.

Cela peut conduire à des erreurs involontaires, car si la variable n'est pas définie dans toutes les conditions dans lesquelles elle est utilisée, elle peut causer des problèmes dans d'autres parties du code. C'est pourquoi les variables sont déclarées dans des blocs de code avec "let" ou "const" afin de limiter leur portée et d'éviter les erreurs involontaires.

if (true) {
    var prenom = "Alice";
}
console.log(prenom); // Affiche "Alice" même si la variable est déclarée dans le bloc if

if (true) {
    var prenom = "Alice";
}
console.log(prenom); // Affiche "Alice" même si la variable est déclarée dans le bloc if

Lien Replit

De plus, les variables déclarées avec 'var' ont une particularité concernant leur portée : elles sont traitées comme si elles étaient déclarées au début de la fonction englobante, même si elles sont définies plus loin dans le code. Ce phénomène peut provoquer des comportements inattendus.

console.log(monNom); // Affiche "undefined" au lieu de générer une erreur
var monNom = "Alice"; 

console.log(monNom); // Affiche "undefined" au lieu de générer une erreur
var monNom = "Alice";

Lien Replit

Malgré ces limitations, 'var' est toujours pris en charge pour des raisons de compatibilité avec les anciens codes. Cependant, pour les débutants, il est recommandé d'apprendre et d'utiliser 'let' et 'const' pour déclarer des variables, car ils offrent une meilleure gestion de la portée et préviennent les erreurs liées au hoisting.

Définition :

Le hoisting est un comportement en JavaScript où les déclarations de variables et de fonctions sont déplacées au début de leur portée respective, c'est-à-dire que la variable ou la fonction peut être utilisée avant d'être déclarée. Cela signifie que même si une variable est déclarée plus tard dans le code, elle peut être utilisée avant sa déclaration en raison du hoisting.

Utilisation de 'let'

L'utilisation de 'let' en JavaScript concerne la déclaration de variables qui peuvent être réaffectées et dont la portée est définie par le bloc englobant. 'let' a été introduit dans ECMAScript 2015 (ES6) et est devenu un choix préféré pour déclarer des variables, en particulier pour les débutants, en raison de sa gestion améliorée de la portée et de l'absence de hoisting.

Exemple :

// Déclaration et initialisation d'une variable avec 'let'
let age = 25;
// Réaffectation d'une nouvelle valeur à la variable
age = 26;
console.log(age); // Affiche "26"

// Déclaration et initialisation d'une variable avec 'let'
let age = 25;

// Réaffectation d'une nouvelle valeur à la variable
age = 26;
console.log(age); // Affiche "26"

Lien Replit

Dans cet exemple, nous déclarons une variable appelée age avec la valeur 25. Ensuite, nous réaffectons la valeur 26 à la variable et affichons la nouvelle valeur.

Contrairement à 'var', les variables déclarées avec 'let' ont une portée de bloc, ce qui signifie qu'elles ne sont accessibles qu'à l'intérieur du bloc dans lequel elles sont définies.

if (true) {
    let prenom = "Alice";
}
console.log(prenom); // Erreur : prenom n'est pas défini à l'extérieur du bloc if
Lien Replit :

if (true) {
    let prenom = "Alice";
}
console.log(prenom); // Erreur : prenom n'est pas défini à l'extérieur du bloc if
Lien Replit :

Lien Replit

console.log(monNom); // Erreur : monNom n'est pas défini
let monNom = "Alice";

console.log(monNom); // Erreur : monNom n'est pas défini
let monNom = "Alice";

Lien Replit

Utilisation de 'const'

L'utilisation de 'const' en JavaScript concerne la déclaration de variables dont la valeur ne peut pas être modifiée une fois qu'elles ont été initialisées. 'const' a été introduit dans ECMAScript 2015 (ES6) et est devenu un choix préféré pour déclarer des variables immuables, en raison de sa gestion améliorée de la portée et de l'absence de hoisting.

Exemple : Exemple simple de l'utilisation de 'const'

// Déclaration et initialisation d'une variable avec 'const'
const age = 25;
// Tentative de réaffectation d'une nouvelle valeur à la variable
age = 26; // Erreur : tentative de réaffecter une valeur à une constante
Lien Replit : 

// Déclaration et initialisation d'une variable avec 'const'
const age = 25;

// Tentative de réaffectation d'une nouvelle valeur à la variable
age = 26; // Erreur : tentative de réaffecter une valeur à une constante
Lien Replit :

Lien Replit

Dans cet exemple, nous déclarons une variable appelée age avec la valeur 25 en utilisant 'const'. Si nous essayons de réaffecter la valeur 26 à la variable, cela générera une erreur, car la valeur d'une constante ne peut pas être modifiée une fois qu'elle a été initialisée.

Comme pour 'let', les variables déclarées avec 'const' ont une portée de bloc, ce qui signifie qu'elles ne sont accessibles qu'à l'intérieur du bloc dans lequel elles sont définies.

if (true) {
    const prenom = "Alice";
}
console.log(prenom); // Erreur : prenom n'est pas défini à l'extérieur du bloc if

if (true) {
    const prenom = "Alice";
}
console.log(prenom); // Erreur : prenom n'est pas défini à l'extérieur du bloc if

Lien Replit

De plus, les variables déclarées avec 'const' ne sont pas hoistées, ce qui empêche les comportements inattendus et améliore la lisibilité du code.

console.log(monNom); // Erreur : monNom n'est pas défini
const monNom = "Alice";

console.log(monNom); // Erreur : monNom n'est pas défini
const monNom = "Alice";

Lien Replit

Il est recommandé d'utiliser 'const' pour déclarer des variables immuables et de se familiariser avec 'let' pour les variables dont la valeur doit être modifiée.