Cours JavaScript et TypeScript · Module 1: Bases de JavaScript
Opérateurs de comparaison et logiques
Dans cette leçon6
À Jurassic Park, le système de sécurité prend continuellement des décisions : la clôture électrique a-t-elle assez de puissance ? Le niveau de sécurité est-il adéquat pour cette espèce de dinosaure ? Les conditions météo permettent-elles d'ouvrir une attraction ?
JavaScript, tout comme le système de sécurité du parc, utilise des opérateurs de comparaison et logiques pour prendre des décisions dans le code.
Opérateurs de comparaison
Les opérateurs de comparaison te permettent de comparer des valeurs et renvoient une valeur booléenne (true ou false). En travaillant à Jurassic Park, le système de contrôle doit constamment effectuer des comparaisons similaires :
1// Opérateur d'égalité (==)
2let threatLevel = 3;
3let maxSafeLevel = 3;
4console.log(threatLevel == maxSafeLevel); // true - les niveaux sont égaux
5
6// Opérateur d'égalité stricte (===)
7let dinosaurCount = "5";
8let expectedCount = 5;
9console.log(dinosaurCount == expectedCount); // true - les valeurs sont égales, mais les types diffèrent
10console.log(dinosaurCount === expectedCount); // false - types différents (string vs number)
11
12// Opérateur d'inégalité (!=)
13let availableResources = 500;
14let requiredResources = 600;
15console.log(availableResources != requiredResources); // true - les valeurs sont différentes
16
17// Opérateur d'inégalité stricte (!==)
18let fenceStatus = "active";
19let requiredStatus = "active";
20console.log(fenceStatus !== requiredStatus); // false - elles sont identiques (mêmes chaînes)
21
22// Opérateur supérieur à (>)
23let troposphericTemperature = 38; // en degrés Celsius
24let safeTemperature = 35;
25console.log(troposphericTemperature > safeTemperature); // true - la température est plus élevée
26
27// Opérateur inférieur à (<)
28let waterLevel = 80; // pourcentage de la capacité
29let criticalLevel = 20;
30console.log(waterLevel < criticalLevel); // false - le niveau d'eau n'est pas sous le niveau critique
31
32// Opérateur supérieur ou égal (>=)
33let employeeCount = 45;
34let minimumStaff = 45;
35console.log(employeeCount >= minimumStaff); // true - exactement le nombre minimum requis
36
37// Opérateur inférieur ou égal (<=)
38let systemLoad = 75; // pourcentage
39let maxLoad = 80;
40console.log(systemLoad <= maxLoad); // true - la charge est sous le maximumDifférence entre == et ===
À Jurassic Park, la précision est essentielle. De même en JavaScript, il existe une différence importante entre les opérateurs d'égalité :
==(égalité) - compare uniquement les valeurs, en effectuant une conversion de type si nécessaire===(égalité stricte) - compare à la fois les valeurs et les types de données
1// Exemples de Jurassic Park :
2
3// Scénario 1 : Conversion d'une valeur de base de données (chaîne) en valeur numérique
4let reportedRaptorCount = "6"; // données du système sous forme de chaîne
5let actualRaptorCount = 6; // valeur numérique
6
7// Comparaison avec conversion de type
8if (reportedRaptorCount == actualRaptorCount) {
9 console.log("Les comptes de raptors correspondent"); // ceci s'exécutera
10}
11
12// Comparaison sans conversion de type
13if (reportedRaptorCount === actualRaptorCount) {
14 console.log("Ce message ne s'affichera pas");
15} else {
16 console.log("Divergence de type de données détectée !"); // ceci s'exécutera
17}
18
19// Scénario 2 : Comparaison de valeurs inconnues (null et undefined)
20let unknownStatus = null;
21let undefinedStatus; // sera automatiquement undefined
22
23console.log(unknownStatus == undefinedStatus); // true (== traite null et undefined comme égaux)
24console.log(unknownStatus === undefinedStatus); // false (=== distingue null de undefined)Comparer des objets
Tout comme deux Velociraptors peuvent se ressembler mais être des individus différents, les objets en JavaScript sont comparés par référence, et non par valeur :
1// Deux dinosaures avec les mêmes traits, mais ce sont des individus différents
2let raptor1 = { species: "Velociraptor", age: 3, aggression: "high" };
3let raptor2 = { species: "Velociraptor", age: 3, aggression: "high" };
4
5console.log(raptor1 == raptor2); // false - objets différents en mémoire
6console.log(raptor1 === raptor2); // false - objets différents en mémoire
7
8// Assigner la même référence
9let raptorReference = raptor1;
10console.log(raptor1 === raptorReference); // true - même référence en mémoireOpérateurs logiques
À Jurassic Park, les décisions sont rarement simples. Devons-nous ouvrir une attraction ? Cela dépend de la météo, de la disponibilité du personnel, de l'état de sécurité et d'autres facteurs. Les opérateurs logiques permettent de combiner des conditions :
1// Opérateur ET (&&) - renvoie true uniquement lorsque les deux conditions sont vraies
2let fenceWorking = true;
3let dinoTrackingSystem = true;
4let securityEnsured = fenceWorking && dinoTrackingSystem;
5console.log(securityEnsured); // true - les deux systèmes fonctionnent
6
7// Opérateur OU (||) - renvoie true lorsqu'au moins une condition est vraie
8let mainPower = false;
9let backupPower = true;
10let parkHasPower = mainPower || backupPower;
11console.log(parkHasPower); // true - au moins une source d'alimentation fonctionne
12
13// Opérateur NON (!) - inverse la valeur booléenne
14let parkClosed = false;
15let parkOpen = !parkClosed;
16console.log(parkOpen); // true - le contraire de fermé est ouvertConditions logiques complexes
En réalité, les systèmes de Jurassic Park doivent prendre en compte de nombreux facteurs simultanément :
1// Pouvons-nous ouvrir l'exposition du Tyrannosaurus ?
2let weatherSuitable = true;
3let staffPresent = true;
4let powerStable = true;
5let sufficientFoodSupply = false;
6let allDinosaursHealthy = true;
7
8// Condition d'ouverture : tous les facteurs doivent être positifs
9let canOpenExhibit = weatherSuitable && staffPresent && powerStable &&
10 sufficientFoodSupply && allDinosaursHealthy;
11console.log(canOpenExhibit); // false - réserve de nourriture insuffisante
12
13// Condition d'alarme : mauvais temps OU pas d'alimentation
14let alarmCondition = !weatherSuitable || !powerStable;
15console.log(alarmCondition); // false - aucune raison de déclencher l'alarme
16
17// Condition complexe : si personnel présent ET (alimentation OU générateurs de secours)
18let backupGeneratorsWorking = true;
19let operationalConditions = staffPresent && (powerStable || backupGeneratorsWorking);
20console.log(operationalConditions); // true - les conditions de base sont rempliesÉvaluation en court-circuit
Les opérateurs && et || utilisent la technique du « court-circuit », ce qui signifie que la seconde condition peut même ne pas être évaluée :
1// Exemple avec && (ET) :
2let securitySystem = false;
3
4function checkDinosaurStatus() {
5 console.log("Vérification des emplacements des dinosaures...");
6 return true;
7}
8
9// Lorsque la première condition est false, la seconde n'est pas vérifiée
10let parkSafe = securitySystem && checkDinosaurStatus();
11// Rien n'apparaîtra dans la console : la fonction n'est pas appelée
12
13// Exemple avec || (OU) :
14let mainPowerSupply = true;
15
16function startGenerators() {
17 console.log("Démarrage des générateurs...");
18 return true;
19}
20
21// Lorsque la première condition est true, la seconde n'est pas vérifiée
22let operationalPower = mainPowerSupply || startGenerators();
23// Rien n'apparaîtra dans la console : la fonction n'est pas appeléeValeurs truthy et falsy
En JavaScript, les conditions n'utilisent pas seulement les valeurs booléennes (true et false). Chaque valeur a sa propre « véracité » :
Valeurs falsy :
false0""(chaîne vide)nullundefinedNaN
Toutes les autres valeurs sont truthy.
1// Exemples de Jurassic Park :
2
3// Vérifier si un dinosaure a un nom assigné
4let dinosaurName = ""; // Pas de nom (chaîne vide)
5if (dinosaurName) {
6 console.log("Le dinosaure a un nom : " + dinosaurName);
7} else {
8 console.log("Le dinosaure n'a pas de nom assigné"); // ceci s'exécutera
9}
10
11// Vérifier si un identifiant de dinosaure existe
12let dinosaurId = 0; // ID 0 (valeur falsy)
13if (dinosaurId) {
14 console.log("Dinosaure trouvé avec l'ID : " + dinosaurId);
15} else {
16 console.log("Aucun ID de dinosaure valide trouvé"); // ceci s'exécutera
17}
18
19// Vérifier le statut de menace (null signifie inconnu)
20let threatStatus = null;
21if (threatStatus) {
22 console.log("Niveau de menace : " + threatStatus);
23} else {
24 console.log("Statut de menace inconnu"); // ceci s'exécutera
25}Opérateur conditionnel (ternaire)
L'opérateur conditionnel ? : fonctionne comme un if...else compact et est souvent utilisé pour les affectations conditionnelles :
1// Construction standard if...else
2let enclosureStatus;
3let raptorCount = 5;
4
5if (raptorCount > 0) {
6 enclosureStatus = "Occupied";
7} else {
8 enclosureStatus = "Empty";
9}
10
11// La même chose avec l'opérateur conditionnel
12let enclosureStatus2 = raptorCount > 0 ? "Occupied" : "Empty";
13
14console.log(enclosureStatus); // "Occupied"
15console.log(enclosureStatus2); // "Occupied"
16
17// Exemple plus complexe - assigner un niveau de sécurité
18let dinosaurSpecies = "Tyrannosaurus";
19let securityLevel = dinosaurSpecies === "Tyrannosaurus" || dinosaurSpecies === "Spinosaurus" ?
20 "Maximum" :
21 dinosaurSpecies === "Velociraptor" ?
22 "High" :
23 "Standard";
24
25console.log(`Pour l'espèce ${dinosaurSpecies}, niveau de sécurité requis : ${securityLevel}`);
26// "Pour l'espèce Tyrannosaurus, niveau de sécurité requis : Maximum"Opérateur de chaînage optionnel
Dans les versions récentes de JavaScript, l'opérateur de chaînage optionnel ?. est disponible, qui vérifie en toute sécurité si une propriété d'objet existe avant de tenter d'y accéder :
1// Structure de données d'un dinosaure
2let tyrannosaurus = {
3 name: "Rex",
4 stats: {
5 age: 8,
6 weight: 8000,
7 diet: "carnivore"
8 }
9};
10
11let triceratops = {
12 name: "Tricy",
13 // pas de stats
14};
15
16// Lecture sûre de propriétés imbriquées
17console.log(tyrannosaurus.stats?.weight); // 8000
18console.log(triceratops.stats?.weight); // undefined, pas d'erreur
19
20// Sans le chaînage optionnel, nous obtiendrions une erreur :
21// console.log(triceratops.stats.weight); // Erreur : Cannot read property 'weight' of undefinedOpérateur de coalescence des nuls
L'opérateur ?? renvoie l'opérande de droite lorsque celui de gauche est null ou undefined, sinon il renvoie l'opérande de gauche :
1// Définir des valeurs par défaut pour des données manquantes
2let securityReport = {
3 threat: 0,
4 // pas de statut d'alimentation
5};
6
7// Utiliser ?? pour fournir une valeur par défaut lorsque la propriété est null ou undefined
8let threatLevel = securityReport.threat ?? "Unknown";
9let powerStatus = securityReport.power ?? "Undefined";
10
11console.log(threatLevel); // 0 (la valeur 0 n'est ni null ni undefined, elle est donc renvoyée)
12console.log(powerStatus); // "Undefined" (la propriété n'existe pas, la valeur par défaut est utilisée)
13
14// Comparaison avec || (OU)
15let threatLevelOr = securityReport.threat || "Unknown";
16console.log(threatLevelOr); // "Unknown" (0 est falsy, la valeur par défaut est donc renvoyée)Résumé
Les opérateurs de comparaison et logiques en JavaScript, tout comme les systèmes de prise de décision de Jurassic Park, te permettent de :
- Comparer des valeurs et des types (==, ===, !=, !==, >, <, >=, <=)
- Combiner des conditions (&&, ||, !)
- Créer des expressions conditionnelles compactes (? :)
- Accéder en toute sécurité aux propriétés d'objet (?.)
- Fournir des valeurs par défaut pour null/undefined (??)
Avec ces opérateurs, nous pouvons créer des systèmes de prise de décision intelligents qui réagissent à diverses conditions - tout comme les systèmes de sécurité de Jurassic Park doivent réagir à des circonstances changeantes pour garder le contrôle d'un parc rempli de dinosaures dangereux.
Dans la prochaine leçon, nous examinerons la priorité des opérateurs, c'est-à-dire l'ordre dans lequel JavaScript évalue les opérations dans les expressions complexes.
Code de cette leçon : index.js
1// Opérateurs de comparaison et logiques
2// Système de sécurité de Jurassic Park
3
4// === Opérateurs de comparaison ===
5console.log("=== Opérateurs de comparaison ===");
6
7let voltage = 10000;
8let minimum = 8000;
9
10console.log("voltage > minimum:", voltage > minimum); // true
11console.log("voltage < minimum:", voltage < minimum); // false
12console.log("voltage >= 10000:", voltage >= 10000); // true
13console.log("voltage <= 5000:", voltage <= 5000); // false
14
15// == vs === (égalité vs égalité stricte)
16console.log("\n=== == vs === ===");
17console.log("5 == '5':", 5 == '5'); // true (compare les valeurs)
18console.log("5 === '5':", 5 === '5'); // false (compare valeurs et types)
19console.log("null == undefined:", null == undefined); // true
20console.log("null === undefined:", null === undefined); // false
21
22// != vs !==
23console.log("5 != '5':", 5 != '5'); // false
24console.log("5 !== '5':", 5 !== '5'); // true
25
26// === Opérateurs logiques ===
27console.log("\n=== Opérateurs logiques ===");
28
29let fenceActive = true;
30let personnelSafe = true;
31let stormComing = false;
32
33// ET (&&) - les deux conditions doivent être vraies
34console.log("Peut ouvrir le parc:", fenceActive && personnelSafe);
35
36// OU (||) - une seule condition suffit
37console.log("Nécessite attention:", !fenceActive || stormComing);
38
39// NON (!) - négation
40console.log("Clôture inactive:", !fenceActive);
41
42// Combinaison d'opérateurs
43let canOpen = fenceActive && personnelSafe && !stormComing;
44console.log("\nDécision d'ouverture:", canOpen);
45
46// Ta mission :
47// 1. Vérifie la différence entre == et ===
48// 2. Combine plusieurs conditions avec les opérateurs && et ||
49Tu 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. Que renvoie la comparaison 5 === '5' en JavaScript ?
2. Quand l'opérateur logique && (ET) renvoie-t-il true ?
Tâches pratiques dans le jeu
- Clique dans l'ordre
Classe les éléments d'une expression qui vérifie si dinoCount est strictement égal à expectedCount (variables dans cet ordre) :