3.8 Les Opérateurs Logiques avec les non-booléens

Dans la leçon précédente, nous avons toujours utilisé les opérateurs logiques avec des booléens. Mais en JavaScript, contrairement à de nombreux langages, on peut aussi les utiliser avec des valeurs non booléennes — et c'est un mécanisme extrêmement puissant. Regardons quelques exemples concrets : false || true donne true, false || 'Toto' donne 'Toto', et false || 1 donne 1.

Le résultat d'une expression logique n'est donc pas forcément true ou false : c'est la valeur de l'un des opérandes qui est retournée. Pour comprendre ce comportement, JavaScript classifie chaque valeur en deux catégories : truthy (interprétée comme vraie) ou falsy (interprétée comme fausse).

Les valeurs falsy

La liste des valeurs falsy en JavaScript est courte et il est essentiel de la connaître :

  • undefined
  • null
  • 0
  • false
  • '' (chaîne vide)
  • NaN (Not a Number, valeur spéciale retournée quand un calcul est invalide)

Tout ce qui n'est pas falsy est truthy. Quand l'opérateur || évalue ses opérandes, il les parcourt de gauche à droite et retourne la première valeur truthy rencontrée ; si aucune n'est truthy, il retourne la dernière. C'est ce qu'on appelle l'évaluation en court-circuit : dès qu'on trouve une valeur truthy, l'évaluation s'arrête, peu importe ce qu'il y a à droite.

Le cas d'usage le plus courant est de fournir une valeur par défaut. Imaginons une couleur de t-shirt sélectionnée par l'utilisateur : si elle est définie, on l'utilise ; sinon, on retombe sur une couleur par défaut.

let userColor = 'rouge';
let defaultColor = 'bleu';
let currentColor = userColor || defaultColor;
console.log(currentColor); // 'rouge'

userColor = undefined;
currentColor = userColor || defaultColor;
console.log(currentColor); // 'bleu'

Si userColor contient une valeur truthy, c'est elle qui est utilisée. Sinon, defaultColor prend le relais. Ce pattern est omniprésent en JavaScript. On se retrouve dans la prochaine vidéo pour aborder les opérateurs bitwise.

En résumé

En JavaScript, les opérateurs logiques peuvent être utilisés avec n'importe quelle valeur, pas seulement des booléens. Le langage évalue chaque opérande comme "truthy" (vrai) ou "falsy" (faux) : les valeurs falsy incluent undefined, null, 0, la chaîne vide, false et NaN. Lorsqu'une expression logique est évaluée, le résultat retourné est la valeur réelle de l'opérande, pas un booléen. Le mécanisme de "court-circuit" s'arrête dès qu'une valeur truthy est trouvée avec l'opérateur OR, permettant d'implémenter élégamment des valeurs par défaut.

Points clés

  • Les opérateurs logiques fonctionnent avec des valeurs non-booléennes en JavaScript
  • Les valeurs falsy sont : undefined, null, 0, chaîne vide, false, et NaN
  • Le résultat d'une expression logique retourne la valeur réelle de l'opérande, pas un booléen
  • Le court-circuit interrompt l'évaluation dès qu'une valeur truthy est trouvée avec l'opérateur OR
  • La technique userValue || defaultValue permet de fournir facilement des valeurs par défaut
  • Cette approche est puissante pour gérer des cas où l'utilisateur n'a pas fourni de valeur

Questions fréquentes

Quelles sont toutes les valeurs falsy en JavaScript ?

Les valeurs falsy sont : undefined, null, le nombre 0, la chaîne vide (""), le booléen false, et NaN (« n'est pas un nombre »). Toutes les autres valeurs sont considérées comme truthy.

Qu'est-ce que le court-circuit (short-circuit) avec l'opérateur OR ?

Le court-circuit est le mécanisme par lequel JavaScript arrête l'évaluation d'une expression dès qu'il trouve une valeur truthy. Avec l'opérateur OR, si un opérande est truthy, cette valeur est retournée immédiatement et les opérandes suivants sont ignorés.

Comment utiliser l'opérateur OR pour définir une valeur par défaut ?

On utilise la syntaxe « valeurUtilisateur || valeurParDéfaut ». Si valeurUtilisateur est truthy (définie et non-nulle), elle sera utilisée ; sinon, valeurParDéfaut sera utilisée. Exemple : « couleurUtilisateur || couleurParDéfaut ».