L'opérateur OU logique JavaScript : comment ça marche ?

L'opérateur logique OR (ou || ) en JavaScript est un opérateur qui renvoie le côté gauche si le côté gauche est truey , mais sinon par défaut et renvoie le côté droit.

Cela signifie qu'il peut être utilisé pour tester les deux instructions logiques, et également pour renvoyer l'opérande de droite si celui de gauche est falsy .

Voyons comment cela fonctionne.

Qu'est-ce que la vérité et la fausseté signifient réellement en JavaScript

Avant de continuer, commençons par comprendre ce falsy . Cela peut sembler une déclaration vague, mais il a en fait une définition très précise. Les valeurs suivantes sont falsy en JavaScript :

• false
• 0 ou -0 ou 0n
• any chaîne vide, c'est-à-dire ""
• null
• undefined
• NaN

De même, truthy signifie simplement tout ce qui n'est pas falsy .

Étant donné que falsy peut signifier 0 et "" , cela peut parfois être un mauvais choix pour définir des valeurs par défaut.

Par exemple, dans certains scénarios, si votre valeur est vraiment 0 et que vous voulez l'afficher, vous ne pourrez pas le faire avec le || opérateur. Pour ces cas, il est préférable de considérer l'opérateur de coalescence nul.

Comment fonctionne l'opérateur OU logique en JavaScript ?

Comme mentionné, le || L'opérateur a deux fonctions principales en JavaScript. Le plus souvent, il se trouve dans les instructions logiques if..else , où il renvoie true si un ou plusieurs de ses opérandes est truthy , mais il est également utilisé pour renvoyer la première valeur si elle est truthy , ou par défaut sur le côté droit opérande sinon.

Le || fonctionne de ces deux manières car il renvoie en fait une valeur.

Utiliser le OU logique avec la logique

Vous aurez probablement vu || le plus couramment utilisé dans les instructions logiques comme if et else . Dans ces cas, nous testons généralement une instruction logique, donc || renverra true si un ou plusieurs de ses opérandes sont truthy .

Ce qui se passe ci-dessous est le || L'opérateur renvoie une valeur, que l'instruction if convertit ensuite en true ou false

 let x = 100; // This returns true, since both of these statements are correct. if(x > 5 || x > 10) { // ... } // Since both "1" and "2" can be converted to true, this also returns true in this context. if("1" || "2") { // ... } // Since both "" and null are falsy, they are converted to false, and as such this returns false. if("" || null) { // ... }

C'est l'une des principales façons d'utiliser || dans votre code, mais il est également fréquemment utilisé pour renvoyer des valeurs en fonction de leur degré de truthy ou falsy .

Valeurs renvoyées

Regardons maintenant un autre exemple, en dehors des déclarations logiques. Comme mentionné, || renvoie son côté gauche s'il est truthy , mais sinon renvoie son côté droit.

Cela semble un peu déroutant, alors regardons quelques exemples.

 // Is set to 1, since the first operand is falsy let x = false || 1; // Is set to hello, since "hello" is truthy let y = "hello" || true;

Dans l'exemple ci-dessus, puisque x a son côté gauche défini sur false , x devient 1. De même, dans y puisque "hello" n'est pas falsy , la valeur de y est "hello" . Cette fonctionnalité est différente de son application dans les instructions logiques et les instructions if..else , mais peut être utile dans de nombreuses situations.

Fait intéressant, même si le dernier élément donné est falsy , JavaScript le renverra toujours.

Par exemple:

 // Is set to null since false is falsy let x = false || null; // Is set to false since 0 is falsy let y = 0 || false;

Chaînage de l'opérateur OR

Il est possible de chaîner les || opérateur en JavaScript. Lors du chaînage d'instructions logiques (dans les clauses if..else ), l'instruction renverra true si un élément chaîné est truthy :

 // This works since both "1" and true are truthy if("1" || true || false) { // ... console.log('this works') } // This doesn't work since all values are falsy if(false || null || undefined) { console.log('this does not work'); }

Lorsque nous utilisons || enchaîné en dehors des instructions logiques, il utilisera la première valeur truthy trouvée, ou par défaut la valeur finale. Par exemple, ci-dessous, x est égal à 3 , y est true et z est {} . Si vous vous demandez pourquoi z est {} , c'est parce que tout ce qui n'est pas falsy est truthy , ce qui signifie qu'un objet est truthy !

 // x is set to 3 let x = false || 0 || 3; // y is set to true let y = false || true || 3; // z is set to {} let z = {} || [] || x;

Conclusion

Le || L'opérateur est fréquemment utilisé dans les instructions logiques, ainsi que par défaut sur des valeurs non falsy si une est trouvée. C'est un opérateur flexible qui est essentiel pour comprendre JavaScript. Si vous êtes intéressé par un autre opérateur similaire, vous pouvez également lire sur l' opérateur de coalescence nullish .