Variables JavaScript expliquées : var vs let vs const, portée et bonnes pratiques

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript est l’un des langages de programmation les plus largement utilisés dans le développement web. En particulier, dans le développement front‑end, il est essentiel pour créer des pages web interactives. Dans ce contexte, les variables jouent un rôle crucial dans la gestion des données de vos programmes.

Dans cet article, nous expliquerons en détail les variables JavaScript — des fondamentaux aux sujets plus avancés. Vous apprendrez notamment comment déclarer des variables, comprendre les concepts de portée, suivre les conventions de nommage et éviter les erreurs courantes, le tout avec des exemples de code pratiques.

1.1 Ce que vous apprendrez dans cet article

En lisant cet article, vous acquerrez les connaissances et compétences suivantes.

1. Comprendre le concept de base et le rôle des variables en JavaScript
2. Connaître les différences entre var, let et const et savoir les utiliser correctement
3. Gérer efficacement la portée et la durée de vie des variables
4. Appliquer les variables avec des techniques pratiques grâce à des exemples de code réels
5. Identifier les causes courantes d’erreurs et apprendre à les corriger

1.2 À qui s’adresse cet article

• Débutants qui souhaitent apprendre les bases de JavaScript
• Apprenants intermédiaires qui ont de l’expérience en codage mais veulent approfondir les différences entre les variables et la portée
• Toute personne qui veut réduire les erreurs de codage et concevoir des programmes plus efficacement

Ce guide explique les concepts avec des exemples de code afin que les débutants ne restent pas bloqués. Il inclut également des conseils de prévention d’erreurs et une section FAQ pour que les apprenants intermédiaires puissent acquérir des connaissances pratiques et appliquées.

Dans la section suivante, examinons de plus près ce qu’est une « variable » en premier lieu.

2. Qu’est‑ce que les variables en JavaScript ?

En JavaScript, une variable est un conteneur nommé utilisé pour stocker temporairement des données et les réutiliser lorsque nécessaire. L’utilisation de variables rend la gestion des données au sein d’un programme plus efficace.

2.1 Quel est le rôle d’une variable ?

En programmation, une variable est comme une « boîte » qui stocke des informations. En plaçant des données dans la boîte et en les retirant, vous pouvez gérer l’état du programme et effectuer des calculs.

Par exemple, le code suivant utilise une variable pour afficher un message.

let greeting = "Hello!";
console.log(greeting);

Dans ce code :

• La variable greeting stocke la chaîne "Hello!".
• console.log() affiche le contenu de cette variable.

C’est ainsi que les variables vous permettent de manipuler les données de façon dynamique dans votre programme.

2.2 Principales caractéristiques des variables en JavaScript

Les variables JavaScript possèdent les caractéristiques suivantes.

1. Typage dynamique

• En JavaScript, le type de la variable (nombre, chaîne, tableau, etc.) est déterminé automatiquement. Vous n’avez pas besoin de spécifier un type lors de la déclaration d’une variable.
• Exemple :

  let number = 10;         // number
  let text = "Hello!";     // string
  let isTrue = true;       // boolean
  

2. Flexibilité

• Vous pouvez assigner des valeurs de types différents à la même variable (bien que cela ne soit pas recommandé pour la lisibilité).
• Exemple :

  let data = 10;     // number
  data = "string";   // changed to string
  

3. Portée (visibilité)

• La plage d’utilisation d’une variable dépend de l’endroit où elle est déclarée (détails plus loin).

3. Réaffectation et redéclaration

• La possibilité de réaffecter ou de redéclarer dépend du mot‑clé utilisé.
• Exemple :

  var x = 5;
  var x = 10; // redeclaration allowed (not recommended)
  
  let y = 5;
  // let y = 10; // Error (cannot redeclare)
  
  const z = 5;
  // z = 10; // Error (cannot reassign)
  

2.3 Avantages de l’utilisation des variables

1. Réutilisabilité

• Si vous devez utiliser la même valeur à plusieurs reprises, la stocker dans une variable facilite la gestion.

1. Mises à jour simplifiées

• En modifiant la valeur d’une variable, les changements se reflètent partout dans le programme.

1. Lisibilité et maintenabilité améliorées

• L’utilisation de variables nommées clarifie l’intention et aide les autres développeurs à comprendre votre code.

2.4 Exemple simple d’utilisation de variables

Voici un programme de calcul basique utilisant des variables.

let price = 500;              // item price
let quantity = 3;             // quantity
let total = price * quantity; // calculate total
console.log(`Total is ${total} yen.`);

Dans cet exemple, le prix et la quantité sont stockés dans des variables, et le montant total est calculé dynamiquement et affiché. C’est ainsi que les variables augmentent la flexibilité et l’efficacité de vos programmes.

3. Comment déclarer des variables et différences entre les mots-clés

En JavaScript, vous utilisez trois mots-clés pour déclarer des variables : var, let et const. Comprendre leurs caractéristiques et comment choisir parmi eux aide à prévenir les erreurs et améliore la lisibilité.

3.1 Différences de base entre var, let et const

1. var – La déclaration legacy

var est utilisé depuis les premières versions de JavaScript.

Caractéristiques :

• Permet la redéclaration et la réassignation.
• A un scope de fonction (le scope de bloc est ignoré).
• Le hoisting déplace la déclaration en haut de son scope.

Exemple :

var x = 10;
console.log(x); // 10

var x = 20; // redeclaration allowed
console.log(x); // 20

if (true) {
  var y = 30; // ignores block scope
}
console.log(y); // 30

Notes :

• Parce qu’il ignore le scope de bloc, il peut causer un comportement non intentionnel.
• Il est considéré comme obsolète en JavaScript moderne ; évitez-le dans le nouveau code.

2. let – Le choix recommandé pour la réassignation

let a été introduit dans ES6 (2015) et est maintenant largement utilisé.

Caractéristiques :

• Ne peut pas être redéclaré, mais peut être réassigné.
• A un scope de bloc.
• Le hoisting se produit, mais l’utiliser avant l’initialisation cause une erreur ( Zone Morte Temporelle ).

Exemple :

let a = 10;
console.log(a); // 10

a = 20; // reassignment allowed
console.log(a); // 20

if (true) {
  let b = 30; // valid only inside this block
  console.log(b); // 30
}
// console.log(b); // Error: b is out of scope

Notes :

• Utilisez let quand la réassignation est nécessaire, mais préférez const quand vous n’en avez pas besoin.

3. const – Pour les constantes

const a également été introduit dans ES6 et est utilisé pour déclarer des constantes (valeurs qui ne doivent pas être réassignées).

Caractéristiques :

• Ne peut pas être redéclaré ou réassigné.
• A un scope de bloc.
• Doit être initialisé au moment de la déclaration.

Exemple :

const pi = 3.14;
console.log(pi); // 3.14

// pi = 3.1415; // Error: cannot reassign

if (true) {
  const gravity = 9.8;
  console.log(gravity); // 9.8
}
// console.log(gravity); // Error: out of scope

Notes :

• Vous ne pouvez pas réassigner la variable elle-même, mais si c’est un objet ou un tableau, vous pouvez toujours modifier ses propriétés/éléments.

Exemple :

const user = { name: "Alice" };
user.name = "Bob"; // property mutation is allowed
console.log(user.name); // Bob

3.2 Tableau de comparaison : var vs let vs const

3.3 Comment choisir correctement

1. Utilisez const par défaut

• Si vous n’avez pas besoin de réassignation, utilisez const pour augmenter la sécurité.

1. Utilisez let seulement quand la réassignation est requise

• Utilisez-le pour les compteurs de boucle ou les variables d’état qui doivent changer au fil du temps.

1. Évitez var

• Vous pouvez le voir dans le code legacy, mais il n’est pas recommandé pour les bases de code modernes.

3.4 Résumé rapide d’utilisation

const PI = 3.14;           // constant
let count = 0;             // value that changes
for (let i = 0; i < 5; i++) {
  count += i;
}
console.log(count);        // display total

let userName = "Alice";
console.log(userName); // "Alice"
userName = "Bob";
console.log(userName); // "Bob"

4. Scope et durée de vie des variables

En JavaScript, comprendre le scope d’une variable (où elle peut être accédée) et sa durée de vie (combien de temps elle existe en mémoire) est extrêmement important. En maîtrisant ces concepts, vous pouvez éviter les bugs inattendus et écrire un code plus efficace.

4.1 Qu’est-ce que le scope ?

Le scope fait référence à la plage dans laquelle une variable peut être accédée. En JavaScript, le scope diffère en fonction de la manière dont la variable est déclarée.

1. Scope Global

Le scope global signifie un scope qui peut être accédé de n’importe où dans le programme.

Exemple :

var globalVar = "Global variable";

function showGlobalVar() {
  console.log(globalVar); // Accessible
}

showGlobalVar();
console.log(globalVar); // Accessible

Notes :
Parce que les variables globales peuvent être accédées de n’importe où, elles sont sujettes aux collisions de noms et aux écrasements non intentionnels. Vous devriez les limiter au minimum.

2. Scope Local

Le scope local fait référence à un scope qui n’est valide que dans une fonction ou un bloc spécifique.

Exemple :

function localExample() {
  let localVar = "Local variable";
  console.log(localVar); // Accessible
}

// console.log(localVar); // Error: out of scope

Dans cet exemple, la variable localVar ne peut être accédée que dans la fonction et ne peut pas être référencée en dehors d’elle.

3. Scope de Bloc

Les variables déclarées avec let et const ne sont valides que dans un bloc (la section entourée de {}).

Exemple :

{
  let blockVar = "Block scope";
  console.log(blockVar); // Accessible
}
// console.log(blockVar); // Error: out of scope

Important :
Si vous déclarez une variable en utilisant var, le scope de bloc est ignoré, alors soyez prudent.

{
  var blockVar = "Block scope ignored";
}
console.log(blockVar); // Accessible (not recommended)

4.2 Qu’est-ce que la Durée de Vie ?

La durée de vie fait référence à la durée pendant laquelle une variable continue d’exister en mémoire.

1. Durée de vie des variables globales

• Elles existent du début du programme jusqu’à sa fin.

1. Durée de vie des variables locales

• Elles n’existent que du moment où une fonction est appelée jusqu’à ce que la fonction se termine.

Exemple :

function showMessage() {
  let message = "Temporary message";
  console.log(message);
}

showMessage();
// console.log(message); // Error: message is not accessible after the function ends

Dans cet exemple, une fois que la fonction se termine, la variable message est détruite et ne peut plus être référencée.

4.3 Qu’est-ce que la Chaîne de Scope ?

Quand des scopes imbriqués sont formés (comme des fonctions imbriquées), JavaScript recherche les variables en utilisant un mécanisme appelé la chaîne de scope.

Exemple :

let outerVar = "Outside";

function outerFunction() {
  let innerVar = "Inside";

  function innerFunction() {
    console.log(outerVar); // Accesses outer scope
    console.log(innerVar); // Accesses inner scope
  }

  innerFunction();
}

outerFunction();

Dans cet exemple, innerFunction recherche les variables d’abord dans son propre scope, puis dans le scope parent, et finalement dans le scope global si nécessaire. Ce processus de recherche est la chaîne de scope.

4.4 Comprendre les Closures

Une closure est une fonctionnalité où une fonction interne continue de conserver l’accès aux variables d’une fonction externe.

Exemple :

function createCounter() {
  let count = 0; // Outer variable

  return function () {
    count++; // Accesses outer variable
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

Dans cet exemple, la fonction interne continue d’accéder à la variable externe count, lui permettant de préserver l’état. Les closures sont utiles pour les compteurs, la gestion de configuration, et plus encore.

4.5 Points Clés pour Utiliser le Scope et la Durée de Vie Efficacement

1. Limitez les variables globales au minimum

• Pour prévenir les collisions de noms et les écrasements accidentels, évitez d’utiliser des variables globales inutilement.

1. Tirez Parti du Scope Local

• Gérer les variables dans les fonctions ou les blocs aide à prévenir les bugs inattendus.

1. Préférez const

• Si vous n’avez pas besoin de réassignation, utilisez const pour améliorer la sécurité.

1. Comprenez Quand les Closures Sont Utiles

• Utilisez les closures de manière proactive lorsque vous avez besoin de gestion d’état ou d’encapsulation de fonction.

5. Initialisation des Variables et Gestion de l’Indéfini

En JavaScript, initialiser correctement les variables est important. Les variables non initialisées et les valeurs indéfinies peuvent entraîner des erreurs inattendues, il faut donc comprendre leur comportement.

5.1 Qu’est‑ce que l’initialisation de variable ?

L’initialisation consiste à attribuer la première valeur à une variable après l’avoir déclarée.

Exemple :

let count = 0;  // initialized
let message;    // uninitialized

Dans cet exemple, count est correctement initialisé à 0. En revanche, message n’a aucune valeur assignée, ce qui peut provoquer un comportement inattendu plus tard.

5.2 Travailler avec undefined

1. Qu’est‑ce que undefined ?

undefined est une valeur spéciale attribuée automatiquement dans les cas suivants :

• Variables non initialisées
• Propriétés d’objet ou éléments de tableau inexistants
• Fonctions qui ne renvoient pas de valeur

Exemple :

let value; // uninitialized variable
console.log(value); // undefined

let obj = {};
console.log(obj.property); // undefined (property does not exist)

function noReturn() {}
console.log(noReturn()); // undefined (no return value)

Remarques :

• Parce que undefined apparaît souvent de manière involontaire, vous devez le gérer correctement dans votre code.

2. Comment vérifier undefined

Voici des méthodes sûres pour vérifier si une variable ou une propriété est undefined.

Exemple :

let data;

// Method 1: typeof operator
if (typeof data === "undefined") {
  console.log("The variable is undefined");
}

// Method 2: strict comparison
if (data === undefined) {
  console.log("The variable is undefined");
}

Utiliser typeof est plus sûr car cela ne génère pas d’erreur même si la variable n’a jamais été déclarée.

5.3 Travailler avec null

1. Qu’est‑ce que null ?

null représente une valeur « intentionnellement vide ». Contrairement à undefined, elle est définie manuellement par le développeur.

Exemple :

let value = null;
console.log(value); // null

2. Différences entre undefined et null

Exemple :

console.log(undefined == null);  // true
console.log(undefined === null); // false

Remarques :

• Utilisez null pour indiquer explicitement une « valeur vide ».
• La distinguer de undefined clarifie votre intention dans le code.

5.4 Bonnes pratiques pour l’initialisation

1. Toujours initialiser

Attribuez une valeur au moment de la déclaration pour éviter les états undefined.

Exemple :

let count = 0;     // initialized
let message = "";  // initialized with an empty string

2. Utiliser null pour rendre l’intention explicite

Si les données ne sont pas encore déterminées, initialisez avec null pour indiquer que vous prévoyez de les définir plus tard.

Exemple :

let result = null; // will be assigned later

3. Vérifier si les valeurs sont initialisées

Vérifiez si les arguments de fonction ou les valeurs de retour sont undefined.

Exemple :

function greet(name) {
  if (name === undefined || name === null) {
    console.log("No name provided");
  } else {
    console.log(`Hello, ${name}!`);
  }
}

greet();        // No name provided
greet("Taro");  // Hello, Taro!

5.5 Erreurs courantes et comment les corriger

1. ReferenceError

Cause : Accéder à une variable qui n’a jamais été déclarée.
Exemple :

console.log(name); // Error: name is not defined

Correction :
Déclarez et initialisez la variable avant de l’utiliser.

2. TypeError

Cause : Tenter d’accéder à une propriété sur null ou undefined.
Exemple :

let obj = null;
console.log(obj.property); // Error: cannot read properties

Correction :
Vérifiez la valeur au préalable.

if (obj !== null && obj !== undefined) {
  console.log(obj.property);
}

5.6 Résumé

L’initialisation des variables et la gestion des valeurs undefined sont des compétences fondamentales en JavaScript. En initialisant correctement et en effectuant des vérifications sûres, vous pouvez éviter les erreurs inattendues.

6. Règles de nommage des variables et bonnes pratiques

En JavaScript, la façon dont vous nommez les variables a un impact considérable sur la lisibilité et la maintenabilité du code. En suivant des conventions de nommage appropriées, l’intention de votre code devient plus claire et les erreurs sont plus faciles à éviter. Cette section explique en détail les règles de nommage des variables et les meilleures pratiques.

6.1 Règles de base pour les noms de variables

En JavaScript, les noms de variables doivent respecter les règles suivantes.

1. Caractères autorisés

• Lettres de l’alphabet (a–z, A–Z)
• Chiffres (0–9)
• Underscore (_)
• Dollar ($)

2. Modèles interdits

• Les noms de variables ne peuvent pas commencer par un chiffre. Exemple :

  let 1name = "Error"; // Error
  let name1 = "Correct";
  

• Les mots réservés de JavaScript ne peuvent pas être utilisés (par ex., let, const, class). Exemple :

  let const = "Error"; // Error
  let value = "Correct";
  

• Les espaces et les caractères spéciaux ne sont pas autorisés. Exemple :

  let user name = "Error"; // Error
  let userName = "Correct";
  

6.2 Styles de nommage courants

Il existe plusieurs styles de nommage couramment utilisés en JavaScript.

1. camelCase (recommandé)

Le premier mot commence par une minuscule, et les mots suivants commencent par une majuscule.

Exemple :

let userName = "Taro";      // Recommended
let totalAmount = 500;     // Recommended

2. snake_case (usage limité)

Les mots sont séparés par des underscores (_). Ce style est souvent utilisé pour les constantes ou dans le code lié aux bases de données.

Exemple :

let user_name = "Taro"; // Allowed but not common in JavaScript

3. PascalCase (pour les classes et les constructeurs)

Chaque mot commence par une majuscule. Couramment utilisé pour les noms de classes et les fonctions constructrices.

Exemple :

class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

4. UPPER_SNAKE_CASE pour les constantes

Les constantes sont généralement écrites en majuscules avec des underscores.

Exemple :

const MAX_VALUE = 100;
const DEFAULT_TIMEOUT = 5000;

6.3 Bonnes pratiques

1. Utiliser des noms significatifs

Les noms de variables doivent décrire clairement leur objectif.

Mauvais exemple :

let x = 10; // Meaning unclear

Bon exemple :

let itemCount = 10; // Clearly represents the number of items

2. Éviter les abréviations excessives

Une trop grande abréviation réduit la lisibilité.

Mauvais exemple :

let nm = "Taro"; // Unclear

Bon exemple :

let userName = "Taro"; // Clear intent

3. Maintenir la cohérence

Utilisez la même convention de nommage dans tout votre code.

Mauvais exemple :

let user_name = "Taro"; // snake_case
let userAge = 25;       // camelCase (inconsistent)

Bon exemple :

let userName = "Taro";
let userAge = 25; // Consistent camelCase

4. Utiliser des noms logiques pour les drapeaux booléens

Les variables booléennes doivent décrire une condition ou un état.

Mauvais exemple :

let flag = true; // Ambiguous

Bon exemple :

let isLoggedIn = true; // Clearly represents state

5. Clarifier les nombres et les unités

Lorsque les variables représentent des valeurs numériques ou des unités, indiquez-le explicitement.

Mauvais exemple :

let size = 10; // Unit unclear

Bon exemple :

let fontSizePx = 10; // Font size in pixels

6.4 Directives de nommage et notes

1. Utiliser l’anglais La programmation utilise l’anglais comme langue standard. Évitez d’utiliser des noms de variables en japonais ou en romaji.

Mauvais exemple :

let namae = "Taro"; // Avoid romanized Japanese

Bon exemple :

let userName = "Taro"; // Use English

2. Utiliser des préfixes et suffixes lorsque cela aide Ajouter des préfixes ou suffixes peut clarifier le rôle d’une variable.

Exemple :

let btnSubmit = document.getElementById("submit"); // Button element
let arrUsers = ["Taro", "Hanako"];                 // Array

7. Erreurs courantes et comment les corriger

En JavaScript, les erreurs liées à la déclaration et à l’utilisation des variables surviennent fréquemment. Ces erreurs peuvent interrompre l’exécution du code ou provoquer un comportement inattendu. Cette section explique les erreurs courantes et comment les gérer.

7.1 ReferenceError

Cause

Une ReferenceError se produit lorsque vous essayez d’accéder à une variable qui n’existe pas ou qui est hors de sa portée.

Exemple : Accéder à une variable non déclarée

console.log(value); // Error: value is not defined

Comment corriger

1. Déclarez les variables avant de les utiliser.

   let value = 10;
   console.log(value); // 10
   

2. Vérifiez la portée de la variable.

   function test() {
     let localVar = "Local variable";
   }
   // console.log(localVar); // Error: out of scope
   

7.2 TypeError

Cause

Un TypeError se produit lorsqu’une valeur n’est pas du type attendu.

Exemple : Accéder à une propriété d’un undefined

let obj;
console.log(obj.property); // Error: Cannot read properties of undefined

Comment corriger

1. Vérifiez l’initialisation et les types de données à l’avance.

   let obj = {};
   console.log(obj.property); // undefined (no error)
   

2. Utilisez l’opérateur de chaînage optionnel ( ?. ).

   let obj;
   console.log(obj?.property); // undefined (no error)
   

7.3 SyntaxError

Cause

Un SyntaxError se produit lorsqu’il y a une faute de syntaxe dans le code.

Exemple : Point‑virgule manquant

let x = 10
let y = 20;

Comment corriger

1. Utilisez un éditeur de code ou des outils de linting (par ex., ESLint) pour détecter les problèmes de syntaxe.
2. Exécutez votre code et consultez les messages d’erreur dans les outils de développement du navigateur ou dans Node.js.

7.4 Uncaught Error

Cause

Une Uncaught Error apparaît lorsqu’une exception est levée sans être gérée par try...catch.

Exemple :

throw new Error("Something went wrong!");

Comment corriger

1. Ajoutez une gestion des exceptions.

   try {
     throw new Error("Error occurred!");
   } catch (error) {
     console.log(error.message); // Error occurred!
   }
   

2. Enregistrez correctement les messages d’erreur afin de faciliter le débogage.

7.5 RangeError

Cause

Un RangeError se produit lorsqu’une valeur est hors de l’intervalle autorisé.

Exemple 1 : Index de tableau hors limites

let arr = [1, 2, 3];
console.log(arr[5]); // undefined (not an error, but unintended)

Exemple 2 : Longueur de tableau invalide

new Array(-1); // Error: Invalid array length

Comment corriger

1. Vérifiez les indices avant d’accéder aux tableaux.

   let arr = [1, 2, 3];
   if (arr[5] !== undefined) {
     console.log(arr[5]);
   } else {
     console.log("Out of range");
   }
   

2. Contrôlez correctement les conditions de boucle et les longueurs de tableau.

7.6 Autres erreurs courantes

1. NaN

Cause : Se produit lorsqu’une opération numérique aboutit à une valeur qui n’est pas un nombre.
Exemple :

let result = parseInt("abc"); // NaN

Comment corriger

• Utilisez isNaN() pour vérifier.

  if (isNaN(result)) {
    console.log("Invalid number");
  }
  

2. Infinity

Cause : Se produit lorsqu’on divise par zéro ou que l’on effectue des calculs extrêmement grands.
Exemple :

let value = 1 / 0; // Infinity

Comment corriger

• Validez les valeurs avant d’effectuer les calculs.

  let value = 10;
  if (value !== 0) {
    console.log(100 / value);
  } else {
    console.log("Cannot divide by zero");
  }
  

7.7 Résumé

Les erreurs sont inévitables dans le développement JavaScript, mais en comprenant leurs causes et en appliquant les bonnes techniques de gestion, vous pouvez maintenir la stabilité de vos programmes. Anticiper les zones à risque d’erreur et mettre en œuvre une gestion appropriée des exceptions est essentiel pour un code fiable.

8. Exemples pratiques : programmes utilisant les variables JavaScript

Dans cette section, nous appliquons ce que nous avons appris sur les variables JavaScript en construisant des exemples concrets de programmes. Nous les parcourrons pas à pas, des cas simples aux cas légèrement plus avancés.

8.1 Exemple 1 : une application de calcul

Problème:

Créez un programme qui stocke le prix et la quantité d’un produit dans des variables, puis calcule et affiche le coût total.

Exemple de code :

const pricePerItem = 500;        // price per item (constant)
let quantity = 3;               // quantity (variable)
let totalPrice = pricePerItem * quantity; // calculate total

console.log(`The total price is ${totalPrice} yen.`);

Explication :

1. La constante pricePerItem représente le prix de l’article, qui ne change pas.
2. La variable quantity stocke le nombre d’articles et peut être mise à jour.
3. Le résultat du calcul est stocké dans totalPrice et affiché à l’aide d’un modèle littéral.

8.2 Exemple 2 : Calcul de remise avec logique conditionnelle

Problème :

Créez un programme qui applique une remise en fonction du montant total de l’achat.

Exemple de code :

let totalAmount = 1200; // total purchase amount
let discount = 0;       // discount rate (initialized)

if (totalAmount >= 1000) {
  discount = 0.1; // 10% discount
} else if (totalAmount >= 500) {
  discount = 0.05; // 5% discount
}

let discountedAmount = totalAmount - totalAmount * discount;
console.log(`The discounted price is ${discountedAmount} yen.`);

Explication :

1. L’initialisation de discount évite les erreurs même si aucune condition ne correspond.
2. Le taux de remise est déterminé à l’aide d’instructions conditionnelles.
3. L’utilisation de variables facilite la modification des conditions ou des valeurs.

8.3 Exemple 3 : Gestion de données avec tableaux et boucles

Problème :

Gérez une liste de produits et leurs prix à l’aide de tableaux, puis calculez le coût total.

Exemple de code :

const items = ["Apple", "Banana", "Orange"]; // item names
const prices = [100, 200, 150];              // prices
let totalCost = 0;                           // total cost

for (let i = 0; i < items.length; i++) {
  console.log(`${items[i]}: ${prices[i]} yen`);
  totalCost += prices[i];
}

console.log(`Total cost: ${totalCost} yen`);

Explication :

1. Les tableaux permettent de gérer efficacement plusieurs points de données liés.
2. Une boucle traite chaque élément sans dupliquer le code.
3. La variable totalCost accumule la somme.

8.4 Exemple 4 : Calculs réutilisables avec fonctions

Problème :

Créez une fonction réutilisable pour calculer la taxe.

Exemple de code :

function calculateTax(price, taxRate = 0.1) {
  return price + price * taxRate;
}

let itemPrice = 1000;                 // item price
let finalPrice = calculateTax(itemPrice); // price including tax
console.log(`Price with tax: ${finalPrice} yen`);

Explication :

1. La fonction calculateTax retourne un prix incluant la taxe.
2. Un paramètre par défaut permet à la fonction de fonctionner sans spécifier un taux de taxe.
3. Les fonctions réutilisables améliorent la maintenabilité et l’efficacité.

8.5 Exemple 5 : Gestion de l’entrée utilisateur

Problème :

Créez un programme qui demande à l’utilisateur son nom et son âge, puis détermine s’il est adulte.

Exemple de code :

let userName = prompt("Please enter your name:");
let age = parseInt(prompt("Please enter your age:"), 10);

if (age >= 18) {
  console.log(`${userName} is an adult.`);
} else {
  console.log(`${userName} is a minor.`);
}

Explication :

1. prompt est utilisé pour collecter l’entrée utilisateur.
2. parseInt convertit l’entrée de chaîne en nombre.
3. Des noms de variables clairs rendent le code plus facile à comprendre.

8.6 Résumé

Dans cette section, nous avons exploré des exemples pratiques utilisant les variables JavaScript.

Points clés :

1. Applications de calcul : Implémentez l’arithmétique de base et la gestion de variables.
2. Remises conditionnelles : Modifiez dynamiquement les valeurs en fonction des conditions.
3. Tableaux et boucles : Gérez et traitez efficacement plusieurs points de données.
4. Fonctions : Améliorez la réutilisabilité et la maintenabilité.
5. Entrée utilisateur : Créez des programmes interactifs à l’aide de variables.

9. FAQ (Questions fréquemment posées)

Cette section répond aux questions fréquentes sur les variables JavaScript, en couvrant les pièges pour débutants ainsi que les préoccupations plus avancées.

Q1 : Lequel devrais‑je utiliser : var, let ou const ?

R :

Dans la plupart des cas, utilisez const par défaut.

• Elle empêche la réaffectation et la redéclaration, rendant le code plus sûr.
• Elle exprime clairement l’intention que la valeur ne doit pas changer.

Utilisez let uniquement lorsque la réaffectation est nécessaire.

Évitez var en JavaScript moderne car il ignore la portée de bloc et peut provoquer des bugs inattendus.

Q2 : Dois‑je déclarer les types de variables en JavaScript ?

R :

Non. JavaScript est un langage à typage dynamique, donc les types de variables sont déterminés automatiquement à partir des valeurs assignées.

Exemple :

let value = 10;     // number
value = "string";  // string (no error)

Cependant, le typage dynamique peut engendrer des bugs non intentionnels, alors soyez prudent. L’utilisation de TypeScript peut améliorer la sécurité des types.

Q3 : Puis‑je modifier les propriétés d’un objet déclaré avec const ?

R :

Oui. const empêche la réaffectation de la variable elle‑même, mais les propriétés de l’objet peuvent toujours être modifiées.

Exemple :

const user = { name: "Alice" };
user.name = "Bob"; // property update allowed
console.log(user);

// user = {}; // Error: reassignment not allowed

Q4 : Quelle est la différence entre undefined et null ?

R :

• undefined : Une variable a été déclarée mais aucune valeur ne lui a été assignée.
• null : Une valeur « vide » assignée explicitement.

Exemple :

let a;        // undefined
let b = null; // explicitly empty

Q5 : Pourquoi faut‑il éviter les variables globales ?

R :

Les variables globales peuvent entraîner plusieurs problèmes :

1. Collisions de noms : Risque accru de noms conflictuels.
2. Moindre maintenabilité : Plus difficile de suivre où les valeurs changent.
3. Difficulté de débogage : Les valeurs peuvent être écrasées de façon inattendue.

Solution :
Si nécessaire, regroupez les globals dans un objet de namespace.

Exemple :

const App = {
  userName: "Alice",
  userAge: 25
};

console.log(App.userName);

Q6 : Quelles conventions de nommage devrais‑je utiliser ?

R :

Les conventions recommandées incluent :

1. camelCase : Pour les variables et les fonctions.

   let userName = "Alice";
   

2. PascalCase : Pour les classes et les constructeurs.

   class UserProfile {}
   

3. UPPER_SNAKE_CASE : Pour les constantes.

   const MAX_COUNT = 100;
   

Q7 : Qu’est‑ce qu’une fermeture (closure) ?

R :

Une fermeture est une fonctionnalité où une fonction conserve l’accès aux variables de son scope externe.

Exemple :

function counter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

Les fermetures sont utiles pour la gestion d’état et l’encapsulation.

10. Conclusion

Dans cet article, nous avons couvert les variables JavaScript de manière exhaustive, des concepts de base aux usages avancés. Les variables sont fondamentales pour gérer les données et écrire des programmes flexibles et efficaces.

10.1 Récapitulatif des points clés

1. Notions de base sur les variables

• Les variables stockent temporairement des données pour les réutiliser.
• Le typage dynamique offre de la flexibilité mais nécessite une gestion attentive.

2. Méthodes de déclaration

• var : Portée fonction, redéclarable, mais non recommandé.
• let : Portée de bloc, réassignable.
• const : Portée de bloc, le choix le plus sûr dans la plupart des cas.

3. Portée et durée de vie

• La portée définit où les variables sont accessibles.
• Minimisez les variables globales et privilégiez la portée locale/de bloc.

4. Initialisation et gestion d’undefined

• undefined : Assigné automatiquement lorsqu’aucune valeur n’est définie.
• null : Représente explicitement une valeur vide.

5. Nommage et bonnes pratiques

• Utilisez des noms significatifs et cohérents (préférez camelCase).
• Utilisez UPPER_SNAKE_CASE pour les constantes.

6. Erreurs courantes

• Comprendre les erreurs fréquentes (ReferenceError, TypeError, etc.) améliore l’efficacité du débogage.
• Une gestion appropriée des erreurs augmente la stabilité du programme.

7. Exemples de code pratiques

• Des exemples pratiques ont démontré les calculs, les conditions, les tableaux, les fonctions et la saisie utilisateur.

10.2 Prochaines étapes

1. Passer aux sujets avancés

• Fonctions et méthodes : Améliorer la modularité et la réutilisation.
• Objets et classes : Travailler avec des structures de données complexes.
• Fonctionnalités modernes ES6+ : Littéraux de gabarits, fonctions fléchées, déstructuration, et plus encore.

2. S’exercer avec des projets réels

Appliquer les variables dans des projets réels approfondira votre compréhension.

Exemples :

• Créez une application ToDo simple.
• Créez un calculateur ou un outil de calendrier.
• Implémentez la validation de formulaires.

10.3 Conclusions

Les variables JavaScript sont un élément de base essentiel de la programmation. En les déclarant et en les gérant correctement, vous pouvez écrire du code sûr, efficace et maintenable.

Avec les connaissances structurées acquises dans cet article—des bases à l’utilisation avancée—vous êtes bien préparé·e à continuer de pratiquer et de consolider vos compétences JavaScript grâce à la programmation pratique.