Opérateurs JavaScript

Introduction

Un opérateur prend une ou plusieurs valeurs (ses opérandes) et produit une nouvelle valeur. En JavaScript, vous utilisez des opérateurs pour effectuer des calculs arithmétiques, comparer des valeurs, affecter des valeurs à des variables, et construire des conditions logiques. Ce chapitre couvre les opérateurs que vous utilisez quotidiennement — affectation, arithmétique, comparaison et concaténation de string — explique la coercition de type qui rend certains résultats surprenants, et se termine par une référence de précédence des opérateurs pour savoir ce qui s'évalue en premier.

Quelques termes utilisés tout au long du chapitre :

• Opérande — la valeur sur laquelle un opérateur agit. Dans 5 + 3, 5 et 3 sont des opérandes.
• Opérateur unaire — prend un opérande (ex. -x).
• Opérateur binaire — prend deux opérandes (ex. x + y).
• Opérateur ternaire — prend trois opérandes ; JavaScript n'en possède qu'un seul (?:).

Opérateurs d'affectation

L'opérateur d'affectation de base = stocke une valeur dans une variable. Les opérateurs d'affectation composés combinent une opération arithmétique avec l'affectation, ainsi x += 5 est un raccourci pour x = x + 5.

Notez que = est une affectation, pas une comparaison. Pour comparer des valeurs, utilisez === ou == (voir ci-dessous).

Opérateurs arithmétiques en JavaScript

Opérateurs de base : Addition (+), Soustraction (-), Multiplication (*) et Division (/)

Ces opérateurs effectuent les quatre opérations arithmétiques de base.

Modulo (%) et Exponentiation (**)

Le modulo (%) renvoie le reste d'une division — utile pour des tests comme « ce nombre est-il pair ? » (n % 2 === 0). L'exponentiation (**) élève un nombre à une puissance.

Plus et moins unaires

- inverse le signe d'une valeur, et le + unaire convertit son opérande en nombre — un moyen rapide de transformer une string numérique en nombre.

Incrémentation (++) et Décrémentation (--)

++ ajoute 1 à une variable et -- en soustrait 1. Leur position est importante : la forme préfixe (++x) modifie la valeur et renvoie la nouvelle, tandis que la forme postfixe (x++) renvoie d'abord l'ancienne valeur, puis la modifie.

Opérateurs de comparaison JavaScript

Les opérateurs de comparaison renvoient toujours un boolean (true ou false). Consultez le chapitre dédié Opérateurs de comparaison pour plus de détails.

Égalité stricte (===) et lâche (==)

L'égalité stricte (===) renvoie true uniquement lorsque les deux opérandes ont le même type et la même valeur — elle ne convertit jamais les types. L'égalité lâche (==) convertit d'abord les opérandes en un type commun, puis compare, ce qui peut donner des résultats surprenants.

Leurs formes négatives sont !== (inégalité stricte) et != (inégalité lâche).

Supérieur à (>), Inférieur à (<), et leurs formes « ou égal »

Ces opérateurs comparent l'ordre. Ils ont également les variantes >= (supérieur ou égal) et <= (inférieur ou égal).

Comparaison de valeurs non numériques

Avec les opérateurs relationnels (<, >, <=, >=), JavaScript effectue une coercition de type. La règle : si les deux opérandes sont des string, ils sont comparés caractère par caractère (alphabétiquement) ; sinon, les deux opérandes sont convertis en nombres avant la comparaison.

Cela explique un résultat qui semble erroné au premier abord :

Comparaisons avec NaN

NaN (Not-A-Number) est la seule valeur qui n'est égale à rien, pas même à elle-même. Ainsi, === NaN ne peut jamais être utilisé pour le détecter. Utilisez Number.isNaN() à la place.

Concaténation de string et l'opérateur binaire +

Concaténer des string

En JavaScript, l'opérateur + est utilisé à la fois pour l'addition numérique et la concaténation de string.

L'opérateur binaire + et la coercition de type

Lorsqu'un opérande est une string, JavaScript convertit également l'autre en string.

Bonnes pratiques pour la concaténation

Opérateurs logiques, conditionnels et de type

JavaScript possède plusieurs autres familles d'opérateurs qui ont chacune leur propre chapitre. Voici un aperçu rapide de ce qu'ils font et où en savoir plus.

Opérateurs logiques (&&, ||, !)

&& (ET), || (OU) et ! (NON) combinent des conditions booléennes. && et || sont aussi à court-circuit et renvoient l'un de leurs opérandes (pas toujours un boolean), ce qui les rend pratiques pour les valeurs par défaut et les gardes. Voir Opérateurs logiques.

Opérateur conditionnel (ternaire) (?:)

L'opérateur ternaire est un if/else compact qui renvoie une valeur : condition ? valeurSiVrai : valeurSiFaux. Voir Opérateurs conditionnels.

typeof et instanceof

typeof renvoie une string nommant le type d'une valeur. instanceof teste si un object a été créé par un constructeur particulier — traité dans Vérification de classe : instanceof.

Précédence des opérateurs

Lorsqu'une expression mélange des opérateurs, la précédence détermine lequel s'exécute en premier, et l'associativité détermine l'ordre entre les opérateurs de précédence égale. Par exemple, * a une précédence plus élevée que +, donc 2 + 3 * 4 vaut 14, et non 20.

Voici les opérateurs courants de la précédence la plus haute à la plus basse :

Récapitulatif et pièges courants

• Utilisez === / !==, pas == / != sauf si vous voulez spécifiquement la coercition de type.
• '2' < true vaut false car les opérateurs relationnels convertissent les opérandes non-string en nombres (2 < 1).
• La comparaison de string est alphabétique, donc '10' < '9' est true alors que 10 < 9 est false.
• Testez NaN avec Number.isNaN(x) — x === NaN est toujours false.
• + est surchargé : avec un opérande de type string il concatène ('3' + 2 donne '32') ; préférez les littéraux de gabarit pour plus de clarté.
• x++ renvoie l'ancienne valeur, ++x la nouvelle.
• ** et = sont associatifs à droite ; la plupart des autres opérateurs binaires sont associatifs à gauche.
• Recourez aux parenthèses plutôt que de mémoriser toute la table de précédence.

Pratique