Comparaison
L’affectation a rempli la boîte nommée. Ici, vous interrogez le contenu : est-ce le même ? plus grand ? déjà suffisant ? La réponse est toujours oui ou non — true ou false. Ces questions sont des opérateurs de comparaison. Vous les placerez plus tard dans des conditions ; ici, apprenez les symboles et faites confiance au booléen renvoyé.
Qu’est-ce qu’une comparaison ?
Elle prend deux opérandes et renvoie un boolean. Elle ne stocke pas un nouveau nombre dans le nom de gauche (c’était =). Après 5 === 5, le résultat est true. Après 5 === "5", c’est false car les types diffèrent. Vous pouvez journaliser ce booléen, le garder dans une variable ou l’écrire sur la page.
Les opérateurs en un coup d’œil
📊 Opérateurs de comparaison du quotidien
| Opérateur | Demande | Résultat typique |
|---|---|---|
=== |
même valeur et même type ? | 5 === 5 → true |
!== |
valeur ou type différent ? | 5 !== "5" → true |
< |
strictement plus petit ? | 3 < 10 → true |
> |
strictement plus grand ? | 3 > 10 → false |
<= |
plus petit ou égal ? | 10 <= 10 → true |
>= |
plus grand ou égal ? | 9 >= 10 → false |
Gardez cette feuille sous la main. == et != existent aussi, mais ce cours les traite comme un piège de débutant — ils peuvent convertir les types avant de comparer. Restez sur === / !== jusqu’à une leçon ultérieure sur la coercition.
console.log(7 === 7);
console.log(7 === "7");
console.log(7 !== 7);
console.log(7 !== "7");
let n = 7;
console.log(n === 7);
=== vérifie la valeur et le type
Trois signes égal, c’est le défaut du débutant. Les deux côtés doivent correspondre en valeur et type. Le nombre 7 n’est pas le texte "7".
La console affiche true, false, false, true, true. La dernière ligne montre qu’un nombre stocké se compare encore strictement au littéral 7. !== pose la question inverse : « ne sont-ils pas les mêmes ? » — ici 7 !== "7" vaut true car les types diffèrent.
Pourquoi le débutant laisse == de côté
Deux signes égal peuvent transformer un texte en nombre (ou l’inverse) puis décider. Ça a l’air pratique jusqu’à ce que ça masque un bug.
console.log(7 == "7");
console.log(7 === "7");
console.log(0 == false);
console.log(0 === false);
console.log("" == 0);
console.log("" === 0);
7 == "7" vaut true alors qu’un côté est du texte. 7 === "7" reste false. 0 == false et "" == 0 donnent aussi true — des surprises bruyantes. Le test strict reste honnête : nombre, boolean et chaîne vide sont distincts. Préférez === dans ce cours.
Classer les nombres
< > <= >= ordonnent les nombres. L’égalité compte comme un oui pour <= et >=.
console.log(3 < 10);
console.log(3 > 10);
console.log(10 <= 10);
console.log(9 >= 10);
let score = 80;
console.log(score >= 60);
Vous obtenez true, false, true, false, true. La dernière ligne, c’est la question du quotidien : « le score suffit-il ? ». Pour nommer la réponse, stockez le booléen.
let score = 80;
let pass = score >= 60;
console.log(pass);
let age = 17;
let adult = age >= 18;
console.log(adult);
pass vaut true (80 dépasse 60). adult vaut false (17 n’atteint pas 18). La comparaison a déjà produit le booléen — vous lui avez seulement donné un nom.
console.log("A" < "B");
console.log("B" < "A");
console.log("apple" === "apple");
console.log("Apple" === "apple");
console.log("10" < "9");
Le texte suit l’ordre du dictionnaire
Les chaînes se comparent caractère par caractère, comme un dictionnaire — pas comme une « taille » humaine. "A" < "B" vaut true. Majuscule n’est pas minuscule ("Apple" === "apple" vaut false). Les chiffres entre guillemets suivent aussi les règles du texte : "10" < "9" peut valoir true car "1" vient avant "9". Convertissez avec Number() si vous visiez un classement numérique.
Afficher un contrôle sur la page
Calculez un boolean, puis écrivez une courte étiquette dans la page.
<!DOCTYPE html>
<html>
<head>
<title>Comparison — page check</title>
</head>
<body>
<p id="out">…</p>
<script>
let age = 18;
let adult = age >= 18;
let box = document.getElementById("out");
box.textContent = "adult=" + adult;
</script>
</body>
</html>
age vaut 18, donc adult est true et la page affiche adult=true. Passez age à 17, actualisez : vous devriez voir adult=false. Les leçons suivantes brancheront avec if ; cette démo n’imprime que le oui/non.
À essayer vous-même
- Journalisez
8 === 8et8 === "8". - Journalisez
8 !== "8"et8 !== 8. - Placez
4 == "4"à côté de4 === "4"et voyez la différence. - Stockez
let pts = 50et journalisezpts >= 60. - Journalisez
"cat" === "cat"et"Cat" === "cat". - Dans la démo HTML, changez seulement
age, actualisez, lisez le nouveau texteadult=.
Erreurs fréquentes
- Écrire
=alors que vous vouliez===(cela stocke, ça ne pose pas de question) - Utiliser
==parce que « ça marche parfois » — ça convertit aussi les types - Classer des chaînes de chiffres comme des nombres (
"10" < "9") - Oublier que la comparaison renvoie déjà un boolean — pas besoin d’envelopper à la main avec
true/false - Mélanger cette famille avec les opérateurs logiques (
&&||) — ceux-là combinent des oui/non ; leçon suivante
En résumé
- La comparaison pose une question et renvoie
trueoufalse - Préférez
===et!==(valeur et type) - Classez avec
<><=>=; l’égalité entre dans<=et>= - Les chaînes suivent l’ordre du dictionnaire, y compris des résultats étranges avec des chiffres
- Évitez
==/!=comme défaut de débutant - Ensuite : opérateurs logiques — combiner plusieurs oui/non avec
&&,||et!
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut