Module JS.3 – Types
Objectif
Maîtriser tous les types JavaScript : types primitifs, objets, et comprendre la coercion de types pour éviter les bugs courants.
Théorie
Types primitifs
JavaScript a 7 types primitifs (types de base).
1. Number
Représente les nombres (entiers et décimaux).
let entier = 42;
let decimal = 3.14;
let negatif = -10;
let scientifique = 1.5e3; // 1500
let infini = Infinity;
let pasUnNombre = NaN; // Not a Number
Caractéristiques :
- Pas de distinction int/float (tous sont des nombres)
- Précision limitée pour les très grands nombres
- NaN pour les opérations invalides
Vérification :
typeof 42; // "number"
typeof 3.14; // "number"
typeof NaN; // "number" (attention !)
Number.isNaN(NaN); // true (méthode fiable)
Number.isInteger(42); // true
2. String
Chaînes de caractères.
let simple = 'Simple guillemets';
let double = "Double guillemets";
let template = `Template literals`;
Méthodes courantes :
let texte = "Bonjour le monde";
texte.length; // 17
texte.toUpperCase(); // "BONJOUR LE MONDE"
texte.toLowerCase(); // "bonjour le monde"
texte.charAt(0); // "B"
texte.substring(0, 7); // "Bonjour"
texte.replace("monde", "JavaScript"); // "Bonjour le JavaScript"
texte.split(" "); // ["Bonjour", "le", "monde"]
texte.includes("Bonjour"); // true
texte.startsWith("Bon"); // true
texte.endsWith("monde"); // true
3. Boolean
Valeurs vraies ou fausses.
let vrai = true;
let faux = false;
Valeurs truthy (considérées comme vraies) :
- Tous les nombres sauf 0 et NaN
- Toutes les chaînes sauf ""
- Les objets (même vides)
- true
Valeurs falsy (considérées comme fausses) :
- false
- 0
- -0
- 0n (BigInt zero)
- "" (chaîne vide)
- null
- undefined
- NaN
if ("texte") { // true (chaîne non vide)
console.log("Vrai");
}
if (0) { // false
console.log("Ne s'affiche pas");
}
if ([]) { // true (tableau vide est truthy !)
console.log("S'affiche");
}
4. Undefined
Variable déclarée mais non initialisée.
let variable;
console.log(variable); // undefined
function test() {
// Pas de return
}
console.log(test()); // undefined
5. Null
Valeur intentionnellement vide.
let rien = null;
Différence null vs undefined :
undefined: Variable non initialiséenull: Valeur intentionnellement absente
let a; // undefined (automatique)
let b = null; // null (intentionnel)
6. Symbol (ES6)
Valeur unique et immuable, utilisée comme identifiant.
const sym1 = Symbol();
const sym2 = Symbol('description');
const sym3 = Symbol('description');
sym2 === sym3; // false (chaque Symbol est unique)
Utilisation :
const ID = Symbol('id');
const personne = {
[ID]: 123,
nom: "Jean"
};
7. BigInt (ES2020)
Pour les très grands entiers.
const grand = 9007199254740991n; // n à la fin
const autre = BigInt("9007199254740991");
grand + 1n; // OK
// grand + 1; // Erreur : ne peut pas mélanger avec Number
Objets
Tout ce qui n'est pas primitif est un objet.
Objets littéraux
let personne = {
nom: "Jean",
age: 30,
ville: "Paris",
saluer: function() {
return `Bonjour, je suis ${this.nom}`;
}
};
// Accès
personne.nom; // "Jean"
personne["age"]; // 30 (notation bracket)
personne.saluer(); // "Bonjour, je suis Jean"
Tableaux
Les tableaux sont aussi des objets.
let nombres = [1, 2, 3, 4, 5];
let mixte = [1, "texte", true, {nom: "Jean"}];
nombres.length; // 5
nombres[0]; // 1
nombres.push(6); // Ajoute à la fin
nombres.pop(); // Retire le dernier
Fonctions
Les fonctions sont aussi des objets.
function maFonction() {
return "test";
}
maFonction.nom; // "maFonction"
maFonction.length; // 0 (nombre de paramètres)
Type coercion
La coercion est la conversion automatique de types.
Coercion implicite
JavaScript convertit automatiquement les types selon le contexte.
Avec l'opérateur + :
"5" + 3; // "53" (concaténation, 3 devient "3")
5 + "3"; // "53" (concaténation)
5 + 3; // 8 (addition)
Avec les opérateurs - * / :
"5" - 3; // 2 (soustraction force conversion en nombre)
"5" * "2"; // 10 (multiplication force conversion)
"10" / "2"; // 5 (division force conversion)
Avec == (égalité faible) :
5 == "5"; // true (coercion)
true == 1; // true (true devient 1)
false == 0; // true (false devient 0)
null == undefined; // true
Avec === (égalité stricte) :
5 === "5"; // false (pas de coercion, types différents)
true === 1; // false
null === undefined; // false
Recommandation : Toujours utiliser === et !== pour éviter les surprises.
Coercion explicite
Conversion manuelle de types.
Vers Number :
Number("42"); // 42
Number("abc"); // NaN
parseInt("42px"); // 42
parseFloat("3.14"); // 3.14
+"42"; // 42 (unary plus)
Vers String :
String(42); // "42"
(42).toString(); // "42"
42 + ""; // "42" (coercion)
Vers Boolean :
Boolean(1); // true
Boolean(0); // false
Boolean(""); // false
Boolean("texte"); // true
!!1; // true (double négation)
!!0; // false
typeof et vérification de types
typeof :
typeof 42; // "number"
typeof "texte"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (bug historique !)
typeof {}; // "object"
typeof []; // "object" (tableaux sont des objets)
typeof function(){}; // "function"
typeof Symbol(); // "symbol"
Vérifications fiables :
// Vérifier si c'est un tableau
Array.isArray([]); // true
Array.isArray({}); // false
// Vérifier si c'est NaN
Number.isNaN(NaN); // true
Number.isNaN("texte"); // false
// Vérifier si c'est un entier
Number.isInteger(42); // true
Number.isInteger(3.14); // false
// Vérifier null
variable === null; // true si null
// Vérifier undefined
variable === undefined; // true si undefined
typeof variable === "undefined"; // Alternative
Exercice
-
Types primitifs
- Testez tous les types primitifs
- Utilisez typeof pour vérifier
- Testez les valeurs truthy/falsy
-
Objets
- Créez un objet avec propriétés et méthodes
- Créez un tableau
- Accédez et modifiez les valeurs
-
Coercion
- Testez la coercion implicite avec +, -, ==
- Comparez == et ===
- Comprenez les résultats
-
Conversions explicites
- Convertissez entre types
- Testez Number(), String(), Boolean()
- Gèrez les cas d'erreur (NaN)
-
Vérifications
- Utilisez typeof
- Utilisez Array.isArray()
- Vérifiez null et undefined correctement
Quiz
-
Que retourne typeof null ?
- "null"
- "object" (bug historique)
- "undefined"
-
Que retourne "5" + 3 ?
- 8
- "53" (concaténation)
- 5
-
Quelle est la différence entre == et === ?
- Aucune différence
- === ne fait pas de coercion
- == est plus rapide
-
Que retourne Boolean([]) ?
- true (tableau vide est truthy)
- false
- undefined
-
Comment vérifier si c'est un tableau ?
- typeof arr === "array"
- Array.isArray(arr)
- arr.isArray()
Mini défi
Mission : Créer un système de validation de types
Créez des fonctions qui valident et convertissent les types :
Fonctions à créer :
-
Validation
estNombre(valeur): Vérifie si c'est un nombre valideestChaine(valeur): Vérifie si c'est une chaîneestTableau(valeur): Vérifie si c'est un tableauestObjet(valeur): Vérifie si c'est un objet (pas tableau, pas null)
-
Conversion sécurisée
versNombre(valeur, defaut): Convertit en nombre, retourne defaut si échecversChaine(valeur, defaut): Convertit en chaîneversBooleen(valeur): Convertit en booléen
-
Tests
- Testez avec différentes valeurs
- Testez les cas limites (null, undefined, NaN, "")
- Affichez les résultats clairement
Exemple d'utilisation :
versNombre("42", 0); // 42
versNombre("abc", 0); // 0 (defaut)
estTableau([1, 2, 3]); // true
estTableau({a: 1}); // false
Critères :
- ✅ Toutes les fonctions créées
- ✅ Gestion des cas limites
- ✅ Code bien documenté
- ✅ Tests complets
- ✅ Utilisation de vérifications fiables (Array.isArray, etc.)
Objectif : Maîtriser tous les types JavaScript et savoir les valider et convertir correctement.
Validation : Vous pouvez passer au module suivant quand vous maîtrisez tous les types et comprenez la coercion.