Opérateurs JavaScript : arithmétiques, logiques, ternaire

Les opérateurs, c'est ce qui fait travailler les expressions

En JavaScript, la moindre ligne un peu utile repose sur des opérateurs : des symboles qui prennent une ou deux valeurs pour en produire une nouvelle. + additionne, === compare, && combine des booléens, ? : choisit entre deux valeurs. La plupart sont familiers si tu viens d'un autre langage, mais certains opérateurs JavaScript ont des particularités qu'il vaut mieux connaître dès le départ.

On va les parcourir par catégorie, en finissant par ceux qu'on utilise le moins souvent — mais qui dépannent bien quand l'occasion se présente.

Les opérateurs arithmétiques

Les bases se comportent comme tu l'imagines :

Quelques points à garder en tête :

• / fait toujours une division en virgule flottante. 7 / 2 donne 3.5, et non 3. Utilise Math.floor(7 / 2) ou Math.trunc(7 / 2) si tu veux un entier.
• % renvoie le reste, pas le vrai modulo mathématique. Il conserve le signe de l'opérande de gauche : -7 % 3 donne -1, et non 2.
• + est surchargé. Dès que l'un des deux côtés est une chaîne, il concatène au lieu d'additionner : "3" + 1 donne "31". On y revient juste après.

Incrémentation et décrémentation

La différence entre count++ et ++count n'a d'importance que si tu utilises la valeur de l'expression dans la même ligne. En tant qu'instruction isolée, les deux font exactement la même chose. La plupart des guides de style recommandent d'ailleurs count += 1, qui est bien plus clair.

L'opérateur + a une double personnalité

Celui-là, tout le monde s'y fait piéger au moins une fois :

Dès que l'un des deux opérandes est une chaîne, + bascule en concaténation et convertit l'autre côté en chaîne. Tous les autres opérateurs arithmétiques font l'inverse : ils convertissent les chaînes en nombres :

À retenir : pour construire des chaînes, privilégie les template literals (`prix : ${5}`). Pour faire des calculs, assure-toi que tes entrées sont bien des nombres — Number(x) ou parseInt(x, 10) font la conversion de façon explicite.

Les opérateurs de comparaison en JavaScript

Une comparaison renvoie toujours un booléen. Il existe deux variantes : stricte et souple.

=== et !== sont des comparaisons strictes : même valeur et même type. == et != convertissent les types avant de comparer, ce qui mène à des surprises du genre null == undefined qui vaut true, ou encore [] == false qui vaut aussi true. Par défaut, utilise toujours === et !==. La seule exception courante, c'est x == null, un raccourci bien pratique pour demander « est-ce que x vaut null ou undefined ? »

Les opérateurs de comparaison se comportent comme tu l'imagines sur les nombres, et par ordre alphabétique sur les chaînes :

La comparaison de chaînes se base sur le code des caractères, donc elle est sensible à la casse. Pour un tri plus « humain », passe plutôt par String.prototype.localeCompare.

Les opérateurs logiques en JavaScript

&& (ET), || (OU) et ! (NON) permettent de combiner des booléens — mais en pratique, ils font bien plus que ce qu'une simple algèbre booléenne laisserait penser.

Subtilité à connaître : && et || ne renvoient pas true ou false. Ils renvoient en réalité l'une de leurs opérandes. && renvoie la première valeur falsy rencontrée, ou la dernière si toutes sont truthy. || renvoie la première valeur truthy, ou la dernière si toutes sont falsy.

C'est pour cette raison qu'on rencontre souvent des patterns du genre const displayName = user.name || "Guest" — on récupère la première valeur qui n'est pas vide. C'est concis, mais attention : || considère 0, "" et false comme des valeurs qui déclenchent le fallback. Si ce sont des valeurs légitimes dans ton cas, utilise plutôt ?? (voir plus bas).

Les deux opérateurs font aussi du court-circuit : si la partie gauche suffit à déterminer le résultat, la partie droite n'est jamais évaluée.

L'opérateur de coalescence des nuls ??

?? ressemble à ||, sauf qu'il ne se déclenche que sur null ou undefined — jamais sur 0, "" ou false.

Utilisez ?? quand une valeur légitime peut être falsy — un compteur, une chaîne vide, un false explicite. Utilisez || lorsque n'importe quelle valeur falsy doit être considérée comme « absente ». Dans le code moderne, ?? est le choix par défaut le plus sûr pour gérer des valeurs optionnelles avec une valeur de repli non nulle.

Les opérateurs d'affectation

= affecte une valeur. Les formes composées combinent l'affectation avec un autre opérateur :

Il existe aussi des opérateurs d'affectation logique — ||=, &&= et ??= — qui n'effectuent l'affectation que si la valeur actuelle remplit une certaine condition :

Bien pratiques pour définir des valeurs par défaut sans se taper un if à rallonge.

L'opérateur ternaire en JavaScript

condition ? a : b est la version « expression » du if/else. Il renvoie a si la condition est truthy, sinon b :

Le ternaire, c'est parfait pour choisir rapidement une valeur. Par contre, dès qu'on commence à les imbriquer, ça devient vite illisible — si vous vous retrouvez à écrire a ? b : c ? d : e, passez plutôt à un if/else ou à un objet de correspondance.

Les opérateurs typeof et instanceof

L'opérateur typeof en JavaScript renvoie une chaîne qui décrit le type de son opérande :

Deux pièges à garder en tête : typeof null renvoie "object" (un bug qui traîne depuis 1995 et qu'on ne peut plus corriger), et les tableaux retournent aussi "object". Pour les tableaux, utilisez Array.isArray(x), et pour null, faites x === null.

instanceof, lui, vérifie si un objet a été créé à partir d'un constructeur précis :

Spread et rest partagent le même ...

On croise ... dans deux contextes bien distincts. En tant que spread, il sert à étaler un itérable en éléments individuels :

En tant que rest, il regroupe plusieurs valeurs dans un seul tableau — typiquement dans les paramètres de fonction ou en déstructuration :

Même syntaxe, rôles opposés. Le spread décompose, le rest regroupe. C'est le contexte qui tranche : dans un appel ou un littéral, ça décompose ; dans une liste de paramètres ou un motif de déstructuration, ça collecte.

Priorité des opérateurs en JavaScript (dans le doute, mets des parenthèses)

Chaque opérateur a une priorité qui détermine l'ordre d'exécution quand tu les combines. La multiplication passe avant l'addition, la comparaison avant les opérateurs logiques, et ainsi de suite :

Le tableau complet est long, et personne ne le retient par cœur. Une bonne habitude couvre 99 % des cas : dès que vous mélangez plusieurs opérateurs et que vous n'êtes pas sûr de l'ordre, mettez des parenthèses. Le code se lit mieux et ne dépend plus de la mémoire de celui qui le relit.

Opérateurs bit à bit (rarement ce qu'il vous faut)

Pour être complet : &, |, ^, ~, <<, >> et >>> agissent sur la représentation binaire des entiers. On les croise dans du code graphique, des protocoles bas niveau, ou de temps en temps dans une API à base de masques de bits.

Une astuce courante mais discutable : n | 0 tronque un nombre vers un entier 32 bits, ce que certains détournaient comme un Math.trunc plus rapide. À éviter — Math.trunc est plus lisible et fonctionne aussi pour les nombres qui dépassent la plage des 32 bits.

La suite : if/else

Les opérateurs produisent des valeurs ; if/else s'appuie sur ces valeurs pour choisir quelle branche de code exécuter. L'essentiel de ce que tu feras avec les opérateurs de comparaison et les opérateurs logiques vus plus haut, c'est justement d'injecter leur résultat dans des conditions — et c'est précisément le sujet de la page suivante.