Variables & Types
En JavaScript, nous utilisons let et const pour déclarer des variables.
var - OBSOLÈTE
Ne jamais utiliser var !
Utilisez toujours let ou const.
Pourquoi var est obsolète ?
var était la seule façon de déclarer des variables avant ES6 (2015). Mais il a des problèmes majeurs :
Problème 1 : Portée (scope) bizarre
// var a une portée de fonction, pas de bloc
if (true) {
var x = 10;
}
console.log(x); // 10 - accessible en dehors du if ! 😱
// let/const ont une portée de bloc (plus logique)
if (true) {
let y = 10;
}
console.log(y); // ❌ ReferenceError: y is not defined
Problème 2 : Hoisting (remontée)
// var est "remonté" au début de la fonction
console.log(name); // undefined (pas d'erreur!)
var name = 'Alice';
// let/const donnent une erreur claire
console.log(age); // ❌ ReferenceError: Cannot access 'age' before initialization
let age = 25;
Problème 3 : Redéclaration possible
// var permet de redéclarer la même variable
var count = 1;
var count = 2; // Pas d'erreur 😱
console.log(count); // 2
// let/const empêchent la redéclaration
let score = 1;
let score = 2; // ❌ SyntaxError: Identifier 'score' has already been declared
Problème 4 : Pollution du scope global
// var dans le scope global devient une propriété de window
var globalVar = 'danger';
console.log(window.globalVar); // 'danger' 😱
// let/const restent dans leur scope
let globalLet = 'safe';
console.log(window.globalLet); // undefined ✅
La bonne approche
Toujours utiliser :
constpar défaut (valeur qui ne change pas)letseulement si vous devez réassigner
Ne jamais utiliser var - c'est du code ancien (pre-2015).
Types primitifs
JavaScript a plusieurs types de base (primitifs).
number
const age = 25;
const pi = 3.14;
const negatif = -7;
const infini = Infinity;
const pasUnNombre = NaN; // Not a Number
Astuce
JavaScript n'a qu'un seul type numérique (format IEEE 754 64 bits, aussi appelé "double precision"). Pas de distinction int/float/double comme en Java ou C++.
NaN - Not a Number
NaN représente une valeur qui devrait être un nombre mais ne l'est pas. C'est le résultat d'opérations mathématiques invalides.
// Quand obtient-on NaN ?
const resultat1 = 0 / 0; // NaN
const resultat2 = Math.sqrt(-1); // NaN (racine carrée d'un négatif)
const resultat3 = parseInt('hello'); // NaN (conversion impossible)
const resultat4 = 'text' * 5; // NaN (opération invalide)
// NaN a un comportement bizarre !
console.log(NaN === NaN); // false (!!)
console.log(NaN == NaN); // false
// Pour vérifier si une valeur est NaN :
console.log(isNaN(NaN)); // true
console.log(Number.isNaN(NaN)); // true (plus fiable)
// Différence entre les deux :
console.log(isNaN('hello')); // true (converti d'abord en Number)
console.log(Number.isNaN('hello')); // false (vérifie strictement)
NaN n'est pas égal à lui-même !
NaN est la seule valeur en JavaScript qui n'est pas égale à elle-même. C'est pour cette raison qu'on utilise Number.isNaN() pour le vérifier.
if (resultat === NaN) { // ❌ Ne fonctionne jamais !
console.log('NaN détecté');
}
if (Number.isNaN(resultat)) { // ✅ Bon
console.log('NaN détecté');
}
string
Les chaînes de caractères représentent du texte.
const simple = 'Hello';
const double = "World";
const template = `Hello ${simple}`;
Information
Les strings seront détaillés dans la page suivante avec les template literals !
boolean
const vrai = true;
const faux = false;
// Souvent utilisé pour des conditions
const isLoggedIn = true;
const hasPermission = false;
undefined et null
// undefined - variable déclarée mais non initialisée
let x;
console.log(x); // undefined
// null - absence volontaire de valeur (sera assignée plus tard)
let currentUser = null; // Pas encore d'utilisateur connecté
// ... plus tard, après login
currentUser = { name: 'Alice', id: 123 };
Quelle est la différence entre undefined et null ?
BigInt (ES2020)
Pour les très grands nombres entiers (au-delà de Number.MAX_SAFE_INTEGER).
const veryBig = 9007199254740991n; // Notez le 'n' à la fin
const alsoVeryBig = BigInt(9007199254740991);
console.log(veryBig + 1n); // 9007199254740992n
Information
Rarement utilisé dans les applications web classiques. Utile pour la cryptographie, les timestamps précis, ou les calculs financiers.
Symbol (ES2015)
Crée des identifiants uniques. Avancé, rarement utilisé directement.
const id1 = Symbol('id');
const id2 = Symbol('id');
console.log(id1 === id2); // false (toujours unique)
typeof
L'opérateur typeof permet de vérifier le type d'une valeur.
typeof 42; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (bug historique!)
typeof []; // "object" (les tableaux sont des objets!)
typeof {}; // "object"
Bug historique
typeof null retourne "object" au lieu de "null". C'est un bug qui date de la création de JavaScript et qui n'a jamais été corrigé pour des raisons de compatibilité.
Pour vérifier si une valeur est null, utilisez === null directement.
Que retourne typeof [] ?
Déclaration de variables
let - Variable
Peut être réassignée.
let count = 0;
count = 1; // OK
count = count + 1; // OK
Utilisez let quand :
- La valeur va changer (compteur, accumulation)
- Dans une boucle
- Pour des valeurs temporaires
// Exemple pratique : boucle
for (let i = 0; i < 5; i++) {
console.log(i); // i change à chaque itération
}
// Accumulation
let total = 0;
total += 10;
total += 20;
console.log(total); // 30
const - Constante
Ne peut pas être réassignée.
const PI = 3.14;
PI = 3; // ❌ Error!
Utilisez const quand :
- La référence ne doit pas changer
- Pour la plupart de vos variables (par défaut)
- Pour les fonctions, objets, tableaux
// Exemple pratique : valeurs qui ne changent pas
const API_URL = 'https://api.example.com';
const MAX_RETRIES = 3;
const user = { name: 'Alice', age: 25 };
Quand devriez-vous utiliser let plutôt que const ?
const avec objets/tableaux
Important : const empêche la réassignation, pas la mutation !
const user = { name: 'Alice' };
user.name = 'Bob'; // ✅ OK (mutation)
user = {}; // ❌ Error (réassignation)
const numbers = [1, 2, 3];
numbers.push(4); // ✅ OK (mutation)
numbers = []; // ❌ Error (réassignation)
const protège la référence, pas le contenu.
Conventions de nommage
Bien nommer vos variables rend votre code lisible et compréhensible.
camelCase (standard JavaScript)
La convention principale en JavaScript : première lettre minuscule, puis majuscule à chaque nouveau mot.
const firstName = 'Alice';
const numberOfUsers = 42;
const isLoggedIn = true;
const hasPermission = false;
SNAKE_CASE_MAJUSCULE pour les constantes globales
Pour les valeurs qui ne changeront jamais (configuration, constantes mathématiques).
const MAX_LOGIN_ATTEMPTS = 3;
const API_BASE_URL = 'https://api.example.com';
const DEFAULT_TIMEOUT = 5000;
const PI = 3.14159;
Préfixes pour les booléens
Utilisez des préfixes qui rendent le code auto-documenté.
// ✅ Bon - on comprend que c'est un boolean
const isActive = true;
const hasAccess = false;
const canEdit = true;
const shouldRefresh = false;
// ❌ Mauvais - pas clair
const active = true;
const access = false;
Noms descriptifs
// ✅ Bon - descriptif
const userAge = 25;
const productPrice = 99.99;
const isEmailVerified = true;
// ❌ Mauvais - trop court, pas clair
const a = 25;
const p = 99.99;
const v = true;
Pour aller plus loin
Pour en savoir plus sur les conventions de nommage (camelCase, PascalCase, snake_case, kebab-case), consultez l'Annexe Conventions de nommage.
Quelle est la bonne convention pour nommer une variable contenant le nombre d'utilisateurs actifs ?
Règle d'or
Bonne pratique
- Toujours utiliser
constpar défaut - Passer à
letseulement si vous devez réassigner - Ne jamais utiliser
var(code obsolète)
// ✅ Bon
const name = 'Alice';
let score = 0;
score = score + 10;
// ❌ Mauvais
var name = 'Alice'; // OBSOLÈTE
var score = 0;