🎭 Truthy & Falsy : En JavaScript, Rien n’est Toujours Ce Qu’il Semble Être

JavaScript te fait parfois un clin d’œil et te dit :
« Techniquement ce n’est pas false… mais laisse-moi réfléchir » 🤨

Cet article est écrit pour t’aider à comprendre la psychologie de JavaScript autour du vrai et du faux.

Dans ce contenu, nous allons :

• Explorer le concept de Truthy & Falsy, des bases jusqu’à la maîtrise
• Voir beaucoup d’exemples de code sous chaque titre
• Expliquer chaque exemple ligne par ligne, en langage humain
• Nettoyer un à un les pièges réels qui produisent des bugs 🧹

Si tu es prêt·e, on commence… prends ton café ☕🚀

🧠 Que sont Truthy & Falsy ? (Vraiment en langage humain)

En JavaScript, tout n’est pas strictement true ou false.
Mais JavaScript pose souvent cette question :

« Est-ce que ça donne l’impression d’être vrai ? »

C’est là que truthy et falsy entrent en jeu.

📌 Définition :

• Falsy → valeurs qui se comportent comme false
• Truthy → valeurs qui se comportent comme true

Point important 👇
Même si une valeur n’est pas un booléen, JavaScript la convertit en booléen dans les conditions.

if ("hello") {
  console.log("Ça a marché");
}

🧠 Explication :

• "hello" n’est pas un booléen
• Mais JavaScript l’interprète comme true

❌ Valeurs Falsy (La Liste d’Or – À MÉMORISER)

Il existe SEULEMENT 8 valeurs falsy en JavaScript. Point final.

false
0
-0
0n
""
null
undefined
NaN

🧠 Règle facile à retenir :

Tout ce qui n’est pas dans cette liste est truthy.

🔬 Mini Test

if ("") {
  console.log("Tu ne me verras pas");
} else {
  console.log("Parce que c’est une chaîne vide");
}

📌 Explication :

• "" → chaîne vide
• Chaîne vide → falsy
• C’est pourquoi le else s’exécute

✅ Valeurs Truthy (Faits Surprenants)

Tout ce qui n’est pas falsy est truthy.
Oui… tout 😎

🤯 Exemples Truthy les Plus Surprenants

if ([]) console.log("Tableau vide mais true");
if ({}) console.log("Objet vide mais true");
if (" ") console.log("Espace mais true");
if ("0") console.log("Zéro en string mais true");
if ("false") console.log("Mot false mais true");

🧠 Explication :

• Le tableau existe → truthy
• L’objet existe → truthy
• Il y a des caractères → truthy

JavaScript dit :

« C’est peut-être vide… mais ça existe. »

⚠️ Les Pièges les Plus Courants (Zone à Bugs)

🚨 Piège 1 : Vérifier un Tableau Vide

const items = [];

if (items) {
  console.log("La liste existe");
}

❌ Ceci s’exécute toujours.

🧠 Pourquoi ?

• Parce que [] → truthy

✅ Vérification correcte :

if (items.length > 0) {
  console.log("Vraiment pas vide");
}

🚨 Piège 2 : Le Problème du Nombre 0

let score = 0;

if (score) {
  console.log("Le score existe");
}

❌ Ceci ne s’exécute pas.

🧠 Parce que :

• 0 → falsy

✅ Vérification sûre :

if (score !== null && score !== undefined) {
  console.log("Le score est défini");
}

🚨 Piège 3 : Valeurs par Défaut avec ||

const username = inputName || "Guest";

🧠 Que se passe-t-il ?

• Si inputName est falsy → "Guest"

Mais :

const score = userScore || 10;

Si userScore = 0 ?
👉 Le résultat devient 10 😬

✅ Solution Moderne : Nullish Coalescing

const score = userScore ?? 10;

🧠 ?? vérifie uniquement :

• null
• undefined

Il ne se bat pas avec 0 ❤️

🧪 Forcer le Booléen (Reprendre le Contrôle)

🔹 La Fonction Boolean()

Boolean(0);         // false
Boolean("JS");     // true
Boolean([]);       // true
Boolean(null);     // false

🧠 Lisible, mais un peu verbeux.

🔹 L’Opérateur !! (Technique Ninja JS 🥷)

!!"hello"   // true
!!0         // false
!![]        // true

🧠 Explication :

• Premier ! → inverse
• Deuxième ! → inverse à nouveau
• Résultat → un booléen clair

🧠 Cas d’Utilisation Réels

✔️ Validation de Formulaire

if (email && password) {
  submitForm();
}

📌 Les deux valeurs doivent être truthy pour envoyer le formulaire.

✔️ Rendu Conditionnel

isLoggedIn && showDashboard();

🧠 Court, propre, lisible.

🚦 Erreurs les Plus Fréquentes

❌ Ignorer 0 comme valeur valide
❌ Penser que les tableaux vides sont falsy
❌ Utiliser || partout
❌ Mémoriser truthy/falsy sans comprendre

🏆 Règles d’Or (À Sauvegarder)

✨ Mémorise la liste falsy
✨ Sois explicite dans les contrôles critiques
✨ Préfère ?? à || quand c’est nécessaire
✨ Code lisible > code court

💬 Mot de la Fin

Truthy & Falsy est l’un des sujets les plus petits mais les plus dangereux de JavaScript.

Une fois compris :

• Les bugs diminuent
• Les conditions deviennent plus claires
• JavaScript te surprend beaucoup moins 😌

Et oui…
tu montes officiellement de niveau en JavaScript 😎💻