Variables et types en JavaScript 🧱

Les variables JavaScript en detail

En JavaScript, il existe trois mots-cles pour declarer des variables : var, let et const. Comprendre leurs differences est fondamental.

---

1. var — l'ancien mode 🚫

var est la facon ancienne de declarer des variables. Elle a un probleme de portee :

function exemple() {
    if (true) {
        var x = 10;
    }
    console.log(x);  // 10 — x est visible EN DEHORS du bloc if !
}

⚠️ Avec var, la variable est fonction-scoped (portee de fonction), pas block-scoped (portee de bloc). C'est source de bugs.

for (var i = 0; i < 3; i++) {
    // vide
}
console.log(i);  // 3 — i "fuit" hors de la boucle !

---

2. let — la variable modifiable ✅

let declare une variable a portee de bloc :

function exemple() {
    if (true) {
        let x = 10;
    }
    // console.log(x);  // ❌ ReferenceError : x n'existe pas ici
}

for (let i = 0; i < 3; i++) {
    // i n'existe que dans la boucle
}
// console.log(i);  // ❌ ReferenceError

let score = 0;
score = 10;      // ✅ Reassignation OK
// let score = 20;  // ❌ SyntaxError : already declared

---

3. const — la constante 🛡️

const declare une constante non reassignable :

const PI = 3.14159;
// PI = 3;  // ❌ TypeError: Assignment to constant variable

💡 Attention au piege des objets et tableaux : const empeche la reassignation, PAS la mutation !

const personne = { nom: "Alice" };
personne.nom = "Bob";         // ✅ OK — on modifie une propriete
// personne = { nom: "Bob" }; // ❌ TypeError — on ne peut pas reassigner

const liste = [1, 2, 3];
liste.push(4);                // ✅ OK — on modifie le tableau
// liste = [4, 5, 6];        // ❌ TypeError

---

4. Les types en JavaScript 🏷️

JavaScript possede 8 types de donnees (7 primitifs + 1 non-primitif) :

---

5. Les types primitifs en detail 📝

String (chaine de caracteres)

// Trois facons d'ecrire une chaine
const guillemets = "Bonjour";
const apostrophes = 'Bonjour';
const backticks = `Bonjour ${prenom}`;  // Template literal avec interpolation

// Proprietes et methodes utiles
console.log(guillemets.length);       // 7
console.log(guillemets.toUpperCase()); // "BONJOUR"
console.log(guillemets.toLowerCase()); // "bonjour"
console.log(guillemets.includes("Bon")); // true
console.log(guillemets.slice(0, 4));  // "Bono"

// Template literals (backticks) — tres utiles !
const prenom = "Alice";
const age = 25;
console.log(`Bonjour, je m'appelle ${prenom} et j'ai ${age} ans.`);
// "Bonjour, je m'appelle Alice et j'ai 25 ans."
console.log(`2 + 2 = ${2 + 2}`);  // "2 + 2 = 4"

Number (nombre)

const entier = 42;
const decimal = 3.14;
const negatif = -10;
const scientifique = 1e6;  // 1000000

// Operations
console.log(0.1 + 0.2);      // 0.30000000000000004 (erreur flottante !)
console.log(Math.round(0.1 + 0.2)); // 0 (solution)

// Methodes utiles
console.log(Number.isInteger(42));     // true
console.log(Number.isInteger(3.14));   // false
console.log(isNaN("hello"));          // true (Not a Number)
console.log(Number("42"));           // 42 (conversion string → number)
console.log(Number("hello"));        // NaN

// Specials
console.log(Infinity);       // Infinity
console.log(-Infinity);      // -Infinity
console.log(NaN);            // NaN
console.log(typeof NaN);     // "number" (piège !)

⚠️ Piège : typeof NaN renvoie "number" — c'est un bug historique de JavaScript.

Boolean (booleen)

const aFaim = true;
const estFull = false;

// Valeurs falsy (evaluent a false dans un if)
if (0) console.log("non");      // pas execute
if ("") console.log("non");     // pas execute
if (null) console.log("non");   // pas execute
if (undefined) console.log("non"); // pas execute
if (NaN) console.log("non");    // pas execute

// Valeurs truthy (evaluent a true)
if (1) console.log("oui");          // execute
if ("hello") console.log("oui");    // execute
if ([]) console.log("oui");         // execute — attention !
if ({}) console.log("oui");         // execute

💡 Falsy vs Truthy : En JavaScript, tout peut etre interprete comme true ou false. Les valeurs "falsy" sont : false, 0, "", null, undefined, NaN. Tout le reste est "truthy".

---

6. Typeof — verifier le type 🔍

console.log(typeof "Alice");    // "string"
console.log(typeof 42);         // "number"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object"  ← BUG HISTORIQUE
console.log(typeof []);         // "object"  ← on utilise Array.isArray() a la place
console.log(typeof {});         // "object"
console.log(typeof function(){}); // "function" (special)

---

7. La coercion de type en profondeur 🔄

Coercion vers number

console.log(Number("42"));      // 42
console.log(Number("hello"));   // NaN
console.log(Number(true));      // 1
console.log(Number(false));     // 0
console.log(Number(null));      // 0
console.log(Number(undefined)); // NaN
console.log(Number(""));        // 0

Coercion vers string

console.log(String(42));         // "42"
console.log(String(true));       // "true"
console.log(String(null));       // "null"
console.log(42 + "");            // "42" (concatenation avec string)

Coercion vers boolean

console.log(Boolean(0));         // false
console.log(Boolean(""));        // false
console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));       // false
console.log(Boolean(1));         // true
console.log(Boolean("hello"));   // true

---

8. Bonnes pratiques 📏

---

9. Exercices pour toi 🎯

Exercice 1 : Variables Declare un prenom, un age et un estEtudiant. Utilise const ou let selon qu'elles changent ou non.

Exercice 2 : Typeof Determine le type de chaque valeur sans executer le code, puis verifie avec typeof :

typeof "hello"
typeof 42
typeof true
typeof null
typeof undefined
typeof []
typeof {}

Exercice 3 : Coercion Devine le resultat, puis verifie :

"10" - 5     // ?
"10" + 5     // ?
true + true  // ?
"" - 1       // ?
"3" * "4"    // ?