Opérateurs logiques
La comparaison vous a donné une seule réponse oui/non. En pratique, il faut souvent plusieurs réponses à la fois : assez âgé et score assez haut ? membre ou invité autorisé ? Les outils qui joignent ou inversent ces réponses sont les opérateurs logiques : &&, || et !. Vous connaissez déjà truthy et falsy ; ici vous apprenez à lire les trois symboles du quotidien et à faire confiance au booléen qu’ils produisent.
Qu’est-ce qu’un opérateur logique ?
Un opérateur logique travaille avec des valeurs de type booléen. Il ne stocke pas dans un nom (=) et ne demande pas « même valeur ? » (===). Il combine ou inverse des résultats oui/non. Après true && false, le résultat est false. Après true || false, c’est true. Après !false, c’est true. 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 logiques du quotidien
| Opérateur | Lecture quotidienne | Résultat typique |
|---|---|---|
&& |
les deux côtés passent ? | true && true → true |
! |
inverser oui/non | !false → true |
Gardez cette fiche à portée. Pour débuter, nourrissez ces opérateurs avec des booléens clairs issus de comparaisons (age >= 18) ou des littéraux true / false. D’autres valeurs comptent aussi comme truthy ou falsy, mais un oui/non honnête limite les bugs.
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);
let ok = true;
console.log(ok && true);
&& exige les deux côtés
Deux esperluettes signifient « et ». Les deux côtés doivent être truthy pour que toute l’expression le soit. Si la gauche échoue, la réponse combinée est déjà non — il n’y a pas de « demi-oui ».
La console affiche true, false, false, false, true. Seules la première et la dernière ligne passent des deux côtés. Pensez à une porte à deux serrures : les deux clés doivent tourner.
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);
let guest = false;
console.log(guest || true);
|| suffit d’un côté
Deux barres verticales signifient « ou ». Si un côté est truthy, toute l’expression l’est. Vous n’obtenez false que lorsque les deux côtés échouent.
Vous voyez true, true, true, false, true. Seule la quatrième ligne est un échec total. Un chemin ouvert suffit — comme une porte avec deux clés distinctes dont chacune ouvre seule.
console.log(!true);
console.log(!false);
let ready = false;
console.log(!ready);
let open = true;
console.log(!open);
! inverse la réponse
Un seul ! devant signifie « non ». Truthy devient falsy et l’inverse. !ready sert quand vous voulez « pas encore prêt ? » sans réécrire une comparaison plus longue.
La console imprime false, true, true, false. ready valait false, donc !ready vaut true. open valait true, donc !open vaut false.
let age = 20;
let score = 75;
console.log(age >= 18 && score >= 60);
console.log(age >= 18 && score >= 90);
let member = false;
let pass = true;
console.log(member || pass);
Joignez des comparaisons en un seul contrôle
La logique du quotidien enveloppe presque toujours des résultats de comparaison. age >= 18 && score >= 60 pose deux questions de rang puis les joint avec « et ». member || pass demande si un chemin est ouvert. Laissez === / >= poser les questions ; && / || combinent les réponses.
let age = 20;
let score = 75;
let allowed = age >= 18 && score >= 60;
console.log(allowed);
let member = false;
let guestOk = true;
let enter = member || guestOk;
console.log(enter);
allowed vaut true (les deux contrôles passent). enter vaut true car le chemin invité est ouvert même si member vaut false. L’expression logique a déjà produit le booléen — vous lui avez seulement donné un nom.
Afficher une porte sur la page
Calculez un booléen combiné, puis écrivez une courte étiquette sur la page.
<!DOCTYPE html>
<html>
<head>
<title>Logical — page gate</title>
</head>
<body>
<p id="out">…</p>
<script>
let age = 20;
let score = 75;
let allowed = age >= 18 && score >= 60;
let box = document.getElementById("out");
box.textContent = "allowed=" + allowed;
</script>
</body>
</html>
age vaut 20 et score vaut 75, les deux côtés de && passent et la page montre allowed=true. Baissez score à 50, rechargez : vous devriez voir allowed=false. Plus tard vous brancherez avec if ; cette démo n’imprime que le oui/non combiné.
À vous de jouer
- Journalisez
true && falseettrue || false. - Journalisez
!falseet!true. - Posez
let age = 16et journalisezage >= 18 && age < 65. - Posez
let age = 30et journalisez le même contrôle d’intervalle. - Comparez
false || trueà côté defalse && true. - Dans la démo HTML, changez seulement
score, rechargez et lisez le nouveau texteallowed=.
Erreurs fréquentes
- Écrire un seul
&ou|— les débutants veulent&&et|| - Utiliser
&&alors que vous vouliez===(combiner vs « égal ? ») - Attendre que
&&compare deux nombres tout seul — enveloppez d’abord chaque côté dans une comparaison - Oublier que
!inverse tout le booléen devant lui - Nourrir des valeurs floues avant de lire calmement truthy/falsy — commencez par des résultats de comparaison clairs
Résumé
- Les opérateurs logiques combinent ou inversent des résultats oui/non
&&exige les deux côtés ;||au moins un ;!inverse- Joignez des résultats de comparaison (
age >= 18 && score >= 60) pour les contrôles du quotidien - Stockez le booléen pour un nom ; affichez-le sur la page pour une étiquette
- Symboles de comparaison et symboles logiques ont des rôles distincts
- Suite : if-else — utiliser ces booléens pour choisir quel code s’exécute
🧠 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