Cours JavaScript et TypeScript · Module 1: Bases de JavaScript
Types de données de base (string, number, boolean, null, undefined)
Dans cette leçon8
Tout comme à Jurassic Park nous avons différentes espèces de dinosaures, chacune avec des caractéristiques et des comportements uniques, en JavaScript nous avons différents types de données, chacun servant des objectifs précis. Comprendre ces types est crucial pour programmer efficacement - c'est comme connaître les différences entre un Velociraptor et un Triceratops pour un employé du parc.
Les types primitifs
JavaScript possède cinq types primitifs principaux : string, number, boolean, null et undefined. Ce sont les « espèces » fondamentales de notre parc numérique.
1. String - Texte
Le type string représente du texte - une séquence de caractères encadrée par des guillemets simples ('), doubles ("), ou des accents graves (`). C'est comme les panneaux d'information de Jurassic Park qui transmettent des messages importants aux visiteurs.
1// Différentes façons de déclarer des chaînes
2const dinoName = "Tyrannosaurus Rex";
3const warningSign = 'Attention ! Ne pas approcher de la clôture !';
4const locationInfo = `Tu es dans le secteur B4`;
5
6// Les chaînes peuvent contenir des caractères spéciaux
7const multilineWarning = "Attention !\nNe nourrissez pas les dinosaures !"; // \n signifie nouvelle ligne
8
9// Longueur d'une chaîne (nombre de caractères)
10const nameLength = dinoName.length; // 17
11
12// Joindre des chaînes (concaténation)
13const fullWarning = warningSign + " " + dinoName + " est dangereux !";
14
15// Littéraux de gabarit (template literals) - uniquement avec des accents graves (``)
16const modernWarning = `${warningSign} ${dinoName} est dangereux !`;Les chaînes sont comme le langage universel de communication du parc - elles servent à afficher des informations, envoyer des messages et étiqueter des ressources.
Méthodes des chaînes
Les chaînes en JavaScript disposent de méthodes intégrées qui permettent la manipulation, de la même manière que les employés du parc disposent d'outils pour gérer les expositions :
1const species = "Velociraptor";
2
3// Changer la casse
4const upperCase = species.toUpperCase(); // "VELOCIRAPTOR"
5const lowerCase = species.toLowerCase(); // "velociraptor"
6
7// Rechercher dans une chaîne
8const hasRaptor = species.includes("raptor"); // true
9const position = species.indexOf("raptor"); // 6 (les indices commencent à 0)
10const startsWith = species.startsWith("Velo"); // true
11const endsWith = species.endsWith("tor"); // true
12
13// Extraire des fragments
14const firstFour = species.substring(0, 4); // "Velo"
15const lastSix = species.slice(-6); // "raptor"
16
17// Remplacer des fragments
18const newSpecies = species.replace("Veloci", "Micro"); // "Microraptor"
19
20// Diviser une chaîne en tableau
21const announcement = "Attention ! Tous les visiteurs sont priés d'évacuer !";
22const words = announcement.split(" "); // ["Attention", "!", "Tous", ...]2. Number - Nombres
Le type number représente à la fois les nombres entiers et les nombres à virgule flottante (décimaux). Contrairement à beaucoup d'autres langages de programmation, JavaScript ne distingue pas ces deux types - ce sont tous simplement des number.
C'est comme le système numérique du parc utilisé pour tout - du comptage des dinosaures à la mesure de leur poids ou de leur taille.
1// Nombres entiers
2const dinoCount = 37;
3const parkSectors = 12;
4
5// Nombres à virgule flottante (décimaux)
6const trexHeight = 5.6; // mètres
7const raptorSpeed = 38.5; // km/h
8
9// Notation scientifique
10const atomSize = 1.5e-10; // 0,00000000015
11const dinosaurCellCount = 3.2e12; // 3 200 000 000 000
12
13// Infinity et NaN (Not a Number)
14const infinity = Infinity; // Valeur infinie
15const negInfinity = -Infinity; // Valeur infinie négative
16const notANumber = NaN; // Résultat d'une opération mathématique invalide, p. ex. 0/0Opérations sur les nombres
Les nombres en JavaScript prennent en charge toutes les opérations mathématiques standard, de la même manière que les scientifiques du parc effectuent divers calculs :
1// Opérations arithmétiques de base
2const sum = 10 + 5; // 15 (addition)
3const diff = 10 - 5; // 5 (soustraction)
4const product = 10 * 5; // 50 (multiplication)
5const quotient = 10 / 5; // 2 (division)
6const remainder = 10 % 3; // 1 (modulo - reste de la division)
7const power = 10 ** 2; // 100 (exponentiation - 10 puissance 2)
8
9// L'objet Math pour les opérations avancées
10const roundedHeight = Math.round(trexHeight); // 6 (arrondi)
11const ceilingHeight = Math.ceil(trexHeight); // 6 (arrondi au supérieur)
12const floorHeight = Math.floor(trexHeight); // 5 (arrondi à l'inférieur)
13const randomNumber = Math.random(); // Nombre aléatoire entre 0 et 1
14const maxSpeed = Math.max(42, 35, 38, 40); // 42 (valeur la plus élevée)
15const sqrtValue = Math.sqrt(25); // 5 (racine carrée)Attention à la précision des nombres à virgule flottante
En JavaScript (et dans beaucoup d'autres langages), les nombres à virgule flottante peuvent mener à des résultats inattendus, semblables aux comportements imprévisibles des dinosaures :
1const precisionIssue = 0.1 + 0.2; // Nous attendons 0,3, mais obtenons 0,30000000000000004
2
3// Solution - utiliser un arrondi ou des constantes mises à l'échelle :
4const fixedResult = Number((0.1 + 0.2).toFixed(1)); // 0,3
5const scaledResult = (0.1 * 10 + 0.2 * 10) / 10; // 0,33. Boolean - Valeurs logiques
Le type boolean n'a que deux valeurs possibles : true ou false. C'est comme un système d'alarme dans le parc qui peut être activé ou désactivé.
1// Valeurs booléennes de base
2const fenceActive = true;
3const parkClosed = false;
4
5// Les expressions logiques renvoient un booléen
6const isTRexDangerous = true;
7const isParkOpen = !parkClosed; // true (négation)
8const isSafeToEnter = fenceActive && isParkOpen; // true (ET)
9const needsAttention = !fenceActive || parkClosed; // false (OU)Les valeurs booléennes sont cruciales pour la prise de décision dans les programmes - semblables aux systèmes de sécurité du parc qui décident d'ouvrir une grille, de déclencher une alarme ou d'évacuer un secteur.
1// Utiliser un booléen dans les instructions conditionnelles
2if (fenceActive) {
3 console.log("Enclos sécurisé");
4} else {
5 console.log("ATTENTION ! Enclos non sécurisé !");
6 activateEmergencyProtocol();
7}
8
9// Les opérateurs de comparaison renvoient un booléen
10const isDangerousSpecies = dinosaurType === "Velociraptor" || dinosaurType === "T-Rex";
11const isHerbivore = dinosaurDiet !== "carnivore";
12const isTooBig = dinosaurHeight > 3;
13const isInRange = visitorDistance >= 50;4. null - Absence intentionnelle de valeur
La valeur null représente une absence intentionnelle de valeur - c'est une indication explicite qu'une variable ne contient aucune valeur. C'est comme un enclos vide dans le parc, spécialement préparé, mais actuellement sans dinosaure.
1// Variable avec la valeur null
2let selectedDinosaur = null; // Actuellement aucun dinosaure n'est sélectionné
3
4// Null est souvent utilisé comme valeur initiale
5let scannedChip = null; // Avant le scan, la puce ne contient aucune donnée
6
7// Vérifier si une valeur est null
8if (selectedDinosaur === null) {
9 console.log("Aucun dinosaure n'a été sélectionné");
10}
11
12// Null est une valeur falsy
13if (!selectedDinosaur) {
14 console.log("Ceci s'affichera aussi pour null");
15}5. undefined - Valeur non définie
La valeur undefined signifie qu'une variable a été déclarée mais qu'aucune valeur ne lui a été assignée. C'est comme une parcelle non aménagée dans le parc - elle existe, mais sa destination n'a pas encore été déterminée.
1// Variable déclarée mais non initialisée
2let newDinosaur; // a automatiquement la valeur undefined
3
4// Une fonction sans return explicite renvoie undefined
5function checkEnclosure() {
6 // Aucune instruction return
7}
8const result = checkEnclosure(); // result a la valeur undefined
9
10// Vérifier si une valeur est undefined
11if (newDinosaur === undefined) {
12 console.log("Le dinosaure n'a pas encore été spécifié");
13}
14
15// undefined est une valeur falsy
16if (!newDinosaur) {
17 console.log("Ceci s'affichera aussi pour undefined");
18}Différences entre null et undefined
Bien que les deux types représentent une « absence de valeur », il existe des différences importantes entre eux :
nullest une absence intentionnelle de valeur (comme un enclos vide)undefinedest une absence non intentionnelle de valeur (comme un emplacement non assigné)
1// typeof montre la différence
2typeof null; // "object" (c'est un bug historique de JavaScript)
3typeof undefined; // "undefined"
4
5// En termes d'égalité
6null == undefined; // true (égalité faible)
7null === undefined; // false (égalité stricte)Symbol et BigInt - Types primitifs plus récents
Des versions plus récentes ont ajouté deux autres types primitifs : Symbol (ES2015) et BigInt (ES2020). Avec les cinq types ci-dessus, JavaScript compte sept types primitifs.
Symbol - Identifiant unique
1// Créer des identifiants uniques
2const dinoId = Symbol('dino-id');
3const enclosureId = Symbol('enclosure-id');
4
5// Chaque Symbol est unique
6const id1 = Symbol('id');
7const id2 = Symbol('id');
8console.log(id1 === id2); // false, même s'ils ont la même descriptionBigInt - Grands nombres entiers
1// Créer un BigInt en ajoutant 'n' à la fin d'un nombre ou avec la fonction BigInt()
2const dinoGenomeSize = 9007199254740991n;
3const sameBigInt = BigInt(9007199254740991);
4
5// BigInt peut représenter des nombres plus grands que Number.MAX_SAFE_INTEGER
6console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991Vérification de type
Pour identifier le type d'une valeur donnée (semblable à l'identification d'une espèce de dinosaure), nous pouvons utiliser l'opérateur typeof :
1typeof "Triceratops"; // "string"
2typeof 42; // "number"
3typeof true; // "boolean"
4typeof null; // "object" (note : c'est un bug historique de JavaScript)
5typeof undefined; // "undefined"
6typeof Symbol(); // "symbol"
7typeof 42n; // "bigint"
8
9// Pour les fonctions et les objets
10typeof function() {}; // "function"
11typeof {}; // "object"
12typeof []; // "object" (les tableaux sont des objets en JavaScript)Coercition de type
JavaScript convertit automatiquement les types lors des opérations, ce qui peut parfois mener à des résultats inattendus - semblables au comportement inattendu des dinosaures hybrides du parc.
1// Conversion automatique en chaîne
2"Dinosaur " + 5; // "Dinosaur 5" (le nombre 5 a été converti en chaîne)
3
4// Conversion automatique en nombre
5"5" - 2; // 3 (la chaîne "5" a été convertie en nombre)
6"5" * 2; // 10 (la chaîne "5" a été convertie en nombre)
7
8// Conversion automatique en booléen
9if ("Dinosaur") {
10 // Ce code s'exécutera, car une chaîne non vide est traitée comme true
11}
12
13if (0) {
14 // Ce code ne s'exécutera PAS, car 0 est traité comme false
15}Valeurs falsy et truthy
En JavaScript, chaque valeur peut être convertie en booléen. Les valeurs automatiquement converties en false sont appelées « falsy », et celles converties en true sont appelées « truthy ».
Valeurs falsy :
false0""(chaîne vide)nullundefinedNaN
Toutes les autres valeurs sont truthy, y compris :
true- Tout nombre autre que 0 (y compris les négatifs et les fractions)
- Toute chaîne non vide
- Tout objet, tableau et fonction
1// Exemples de conversion booléenne
2Boolean(0); // false
3Boolean(""); // false
4Boolean(null); // false
5Boolean(undefined);// false
6Boolean(NaN); // false
7
8Boolean(1); // true
9Boolean("text"); // true
10Boolean([]); // true (un tableau vide est truthy)
11Boolean({}); // true (un objet vide est truthy)Conversion de type explicite
Pour éviter les résultats inattendus, il est recommandé de convertir explicitement les types - de la même manière qu'à Jurassic Park il vaut toujours mieux avoir le plein contrôle des dinosaures :
1// Convertir en chaîne
2String(42); // "42"
3(42).toString(); // "42"
442 + ""; // "42" (utilise une conversion implicite)
5
6// Convertir en nombre
7Number("42"); // 42
8parseInt("42", 10); // 42 (le second nombre est la base, p. ex. 10 pour le décimal)
9parseFloat("42.5"); // 42.5
10+"42"; // 42 (utilise une conversion implicite)
11
12// Convertir en booléen
13Boolean(1); // true
14Boolean(0); // false
15!!"value"; // true (double négation)Vérification de type sûre
Dans des applications réelles, tout comme dans les protocoles de sécurité du parc, il vaut la peine d'appliquer une vérification de type rigoureuse :
1// Vérifier si une variable est une chaîne
2function isString(value) {
3 return typeof value === 'string' || value instanceof String;
4}
5
6// Vérifier si une variable est un nombre (avec une vérification supplémentaire de NaN)
7function isNumber(value) {
8 return typeof value === 'number' && !isNaN(value);
9}
10
11// Vérifier si une variable est un booléen
12function isBoolean(value) {
13 return typeof value === 'boolean';
14}
15
16// Vérifier si une variable a la valeur null
17function isNull(value) {
18 return value === null;
19}
20
21// Vérifier si une variable a la valeur undefined
22function isUndefined(value) {
23 return typeof value === 'undefined';
24}Exemple pratique : système d'inventaire des dinosaures
L'exemple suivant illustre l'utilisation de différents types de données dans un système complexe :
1// Constantes de configuration
2const PARK_NAME = "Jurassic Park";
3const MAX_CAPACITY = 50;
4const SECURITY_LEVELS = {
5 LOW: 1,
6 MEDIUM: 2,
7 HIGH: 3,
8 CRITICAL: 4
9};
10
11// Système d'inventaire des dinosaures
12function processDinosaurData(dinoId, name, species, height, isDangerous) {
13 // Vérification du type des données
14 if (typeof dinoId !== 'number' || !Number.isInteger(dinoId) || dinoId <= 0) {
15 return "Erreur : ID de dinosaure invalide";
16 }
17
18 if (typeof name !== 'string' || name.trim() === '') {
19 return "Erreur : nom de dinosaure invalide";
20 }
21
22 if (typeof height !== 'number' || height <= 0) {
23 return "Erreur : taille de dinosaure invalide";
24 }
25
26 if (typeof isDangerous !== 'boolean') {
27 return "Erreur : le paramètre de danger doit être de type boolean";
28 }
29
30 // Traitement des données
31 let securityLevel = null;
32
33 if (isDangerous) {
34 securityLevel = height > 3 ? SECURITY_LEVELS.CRITICAL : SECURITY_LEVELS.HIGH;
35 } else {
36 securityLevel = height > 5 ? SECURITY_LEVELS.MEDIUM : SECURITY_LEVELS.LOW;
37 }
38
39 // Préparer le rapport sur le dinosaure
40 const dinoRecord = {
41 id: dinoId,
42 name: name,
43 species: species || "Unknown", // Protection contre undefined
44 height: height,
45 dangerous: isDangerous,
46 securityLevel: securityLevel,
47 enclosureType: getEnclosureType(securityLevel),
48 lastUpdated: new Date().toISOString()
49 };
50
51 // Renvoyer le rapport
52 return dinoRecord;
53}
54
55// Fonction auxiliaire
56function getEnclosureType(securityLevel) {
57 switch(securityLevel) {
58 case SECURITY_LEVELS.LOW:
59 return "Espace ouvert";
60 case SECURITY_LEVELS.MEDIUM:
61 return "Clôture standard";
62 case SECURITY_LEVELS.HIGH:
63 return "Clôture renforcée avec surveillance";
64 case SECURITY_LEVELS.CRITICAL:
65 return "Enclos isolé de haute sécurité";
66 default:
67 return "Non spécifié";
68 }
69}
70
71// Exemple d'utilisation
72const trexData = processDinosaurData(
73 1,
74 "Rexy",
75 "Tyrannosaurus Rex",
76 5.6,
77 true
78);
79
80console.log(trexData);Résumé
String - représente du texte
- Comme les panneaux d'information du parc
- Encadré par
',", ou` - Possède de nombreuses méthodes intégrées (p. ex.
toUpperCase(),indexOf())
Number - représente les nombres entiers et à virgule flottante
- Comme le système numérique du parc
- Prend en charge toutes les opérations mathématiques standard
- Sois prudent avec la précision des nombres à virgule flottante
Boolean - valeurs logiques
trueoufalse- Comme un système d'alarme (activé/désactivé)
- Fondation de la prise de décision (instructions conditionnelles)
- Également créé comme résultat d'opérations de comparaison
null - absence intentionnelle de valeur
- Comme un enclos vide et préparé
- Défini explicitement par le programmeur
- Représente « rien » ou « inconnu »
undefined - valeur non définie
- Comme un emplacement encore non assigné dans le parc
- Apparaît automatiquement pour les variables non initialisées
- Également le résultat par défaut d'une fonction sans
return
Comprendre les types de données en JavaScript est le fondement d'une programmation efficace - tout comme connaître les différentes espèces de dinosaures est crucial pour les employés de Jurassic Park. Chaque type a ses applications, ses limitations et ses comportements que tu dois connaître pour éviter des « incidents » inattendus dans ton code !
Dans la prochaine leçon, nous aborderons la conversion de type et les opérations sur les types de données - comme apprendre à travailler de manière sûre et efficace avec différentes espèces de dinosaures dans le parc.
Code de cette leçon : index.js
1// Système de diagnostic - Fonctions
2// Exercice : Créer et appeler des fonctions
3
4// Déclaration de fonction
5function checkDinosaur(name, health) {
6 console.log("Examen : " + name);
7 if (health > 80) {
8 return name + " - statut : EXCELLENT";
9 } else if (health > 50) {
10 return name + " - statut : BON";
11 } else {
12 return name + " - statut : NÉCESSITE DES SOINS";
13 }
14}
15
16// Appel de fonction
17console.log(checkDinosaur("T-Rex", 95));
18console.log(checkDinosaur("Raptor", 72));
19console.log(checkDinosaur("Brachio", 45));
20
21// Fonction avec valeur par défaut
22function feedDinosaur(name, amount = 50) {
23 console.log(name + " nourri : " + amount + " kg");
24}
25
26feedDinosaur("T-Rex", 200);
27feedDinosaur("Compy"); // utilisera la valeur par défaut 50
28
29// Ta mission :
30// 1. Crée une fonction calculateAge(birthYear) qui calcule l'âge
31// 2. Crée une fonction avec un paramètre par défaut
32// 3. Appelle-les avec différents arguments
33
34// Ton code ici :
35Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Quelles valeurs le type booléen peut-il contenir en JavaScript ?
2. Que renvoie typeof 42 en JavaScript ?
Tâches pratiques dans le jeu
- Éditeur de code
Déclare trois variables qui décrivent un échantillon d'ADN : le nom de l'espèce (string), le poids en kilogrammes (number) et si le dinosaure est carnivore (boolean). Affiche chaque variable dans la console avec son type, en utilisant typeof.