JavaScript : Opérateurs modernes

JavaScript moderne (ES6 et suivants) a apporté quelques opérateurs qui rendent le code plus court et plus sûr. Tu les croiseras à chaque ligne de React, autant les maîtriser tout de suite.

# Truthy et falsy

Avant les opérateurs, une base : dans un contexte booléen (une condition), toute valeur JavaScript est soit truthy, soit falsy.

Il n'y a que six valeurs falsy à retenir :

Tout le reste est truthy. Attention au piège classique : un tableau vide [] et un objet vide {} sont truthy.

if ("")  { /* n'entre pas, chaîne vide = falsy */ }
if ([])  { /* entre !  un tableau vide est truthy */ }

if ("")  { /* n'entre pas, chaîne vide = falsy */ }

if ([])  { /* entre !  un tableau vide est truthy */ }

# Les opérateurs logiques && et ||

En JavaScript, && et || ne renvoient pas forcément true ou false : ils renvoient l'une des valeurs, et s'arrêtent dès qu'ils peuvent (le court-circuit).

• && renvoie la première valeur falsy, sinon la dernière valeur.
• || renvoie la première valeur truthy, sinon la dernière valeur.

true && "coucou";        // "coucou"
false && "coucou";       // false     (s'arrête à false)
"" || "défaut";          // "défaut"
"Baptiste" || "défaut";  // "Baptiste"

true && "coucou";        // "coucou"

false && "coucou";       // false     (s'arrête à false)

"" || "défaut";          // "défaut"

"Baptiste" || "défaut";  // "Baptiste"

En React, && sert à l'affichage conditionnel dans le JSX :

{user && <Profil user={user} />}   // affiche Profil seulement si user existe

{user && <Profil user={user} />}   // affiche Profil seulement si user existe

# Le nullish coalescing (??)

?? renvoie la valeur de droite uniquement si celle de gauche est null ou undefined. Contrairement à ||, il ne se déclenche pas sur les autres valeurs falsy (0, "", false).

const compteur = 0;

compteur || 10;   // 10   (0 est falsy, || le remplace : souvent un bug !)
compteur ?? 10;   // 0    (0 n'est ni null ni undefined : on le garde)

const compteur = 0;

compteur || 10;   // 10   (0 est falsy, || le remplace : souvent un bug !)

compteur ?? 10;   // 0    (0 n'est ni null ni undefined : on le garde)

C'est le bon choix pour une valeur par défaut quand 0 ou "" sont des valeurs valides.

# L'optional chaining (?.)

?. permet d'accéder à une propriété imbriquée sans planter si un maillon de la chaîne est null ou undefined. Au lieu de lever une erreur, l'expression renvoie undefined.

const user = { profil: { nom: "Baptiste" } };

user.profil.nom;       // "Baptiste"
user.adresse.ville;    // ERREUR : Cannot read properties of undefined
user.adresse?.ville;   // undefined  (aucune erreur)

const user = { profil: { nom: "Baptiste" } };

user.profil.nom;       // "Baptiste"

user.adresse.ville;    // ERREUR : Cannot read properties of undefined

user.adresse?.ville;   // undefined  (aucune erreur)

Il se combine naturellement avec ?? pour un accès sûr avec valeur de repli :

const ville = user.adresse?.ville ?? "Inconnue";

const ville = user.adresse?.ville ?? "Inconnue";

# Pourquoi c'est clé en React

Ces trois opérateurs sont omniprésents dans le JSX, car les données arrivent souvent en retard (absentes au premier rendu) :

• {isConnecte && <Menu />} : affichage conditionnel
• {user?.nom} : accès sûr à une donnée parfois absente
• const nom = props.nom ?? "Anonyme" : valeur par défaut propre

# À retenir

• Les six valeurs falsy : false, 0, "", null, undefined, NaN. Tout le reste est truthy (dont [] et {} !).
• && et || court-circuitent et renvoient une valeur, pas forcément un booléen.
• ?? = valeur par défaut seulement si null/undefined : préfère-le à || quand 0 ou "" sont valides.
• ?. = accès sûr, sans crash, quand une propriété peut manquer.