Opérateurs Javascript : la Liste Complète et Exemples

Vous voulez écrire du code JavaScript plus propre et plus efficace ? Vous confondez parfois les opérateurs == et === ? Vous avez juste besoin d’une liste claire pour ne plus avoir à chercher partout ?

Cet article vous donne la liste complète des opérateurs JavaScript, rangée par catégorie et expliquée avec des exemples simples. Vous trouverez des tableaux récapitulatifs pour un accès rapide et des explications détaillées pour maîtriser chaque opération.

Tableau Récapitulatif des Opérateurs JavaScript

Pour aller droit au but, voici les principaux opérateurs regroupés par famille. Chaque tableau vous donne l’essentiel en un coup d’œil.

Opérateurs d’affectation

Opérateurs de comparaison

Opérateurs arithmétiques

Opérateurs logiques

Explications Détaillées des Principaux Opérateurs

Maintenant que vous avez une vue d’ensemble, regardons comment fonctionnent les opérateurs les plus courants et les plus importants, avec des exemples concrets.

Les opérateurs d’affectation (`=`, `+=`, `-=`, …)

L’opérateur d’affectation le plus simple est le signe égal (=). Il sert à assigner une valeur à une variable. L’opérande de gauche est la variable qui reçoit la valeur, et l’opérande de droite est la valeur à assigner.

let age = 30; // La variable 'age' reçoit la valeur 30
let nom = "Alice"; // La variable 'nom' reçoit la chaîne de caractères "Alice"

Les autres opérateurs d’affectation sont des raccourcis pratiques. Ils combinent une opération arithmétique avec une affectation. C’est une syntaxe plus courte et plus lisible.

• x += y est un raccourci pour x = x + y.
• x *= 5 est un raccourci pour x = x * 5.

let score = 100;
// Version longue
score = score + 50; // score vaut 150

// Version courte avec l'opérateur d'affectation
score += 50; // score vaut maintenant 200

Les opérateurs de comparaison (`==` vs `===`, `!=` vs `!==`, …)

Les opérateurs de comparaison comparent deux opérandes et renvoient une valeur booléenne : true (vrai) ou false (faux). Ils sont essentiels pour les conditions (if, while, etc.).

Le point le plus important à comprendre ici est la différence entre == et ===. C’est une source d’erreurs fréquente pour les débutants.

• == (Égalité simple) : Compare les valeurs après avoir tenté de convertir les deux opérandes au même type.
• === (Égalité stricte) : Compare les valeurs sans aucune conversion de type. Si les types sont différents, le résultat est toujours false.

'1' == 1;   // renvoie true, car la chaîne '1' est convertie en nombre
'1' === 1;  // renvoie false, car les types (string et number) sont différents

0 == false;   // renvoie true
0 === false;  // renvoie false

Les opérateurs arithmétiques (`+`, `-`, `%`, `++`, `–`)

Ces opérateurs permettent de réaliser des opérations mathématiques de base. La plupart sont évidents, mais quelques-uns méritent une attention particulière.

L’opérateur modulo (%) renvoie le reste d’une division. C’est très utile pour vérifier si un nombre est pair ou impair, par exemple.

10 % 2; // renvoie 0 (10 est divisible par 2, donc pas de reste)
11 % 2; // renvoie 1 (11 divisé par 2 donne 5 avec un reste de 1)

Les opérateurs d’incrémentation (++) et de décrémentation (--) ajoutent ou retirent 1 à une variable. Leur comportement change selon qu’ils sont placés avant (préfixe) ou après (postfixe) la variable.

• Postfixe (x++) : La valeur de x est utilisée dans l’expression, PUIS elle est incrémentée.
• Préfixe (++x) : La valeur de x est d’abord incrémentée, PUIS elle est utilisée dans l’expression.

let a = 5;
let b = a++; // b reçoit la valeur de a (5), PUIS a est incrémenté à 6. Résultat : b=5, a=6.

let c = 5;
let d = ++c; // c est d'abord incrémenté à 6, PUIS d reçoit cette nouvelle valeur. Résultat : d=6, c=6.

Les opérateurs logiques (`&&`, `||`, `!`, `??`)

Les opérateurs logiques sont utilisés pour combiner plusieurs expressions booléennes. Ils sont au cœur de la logique conditionnelle en programmation.

En JavaScript, les opérateurs && (ET) et || (OU) ont un comportement appelé « short-circuit evaluation » (évaluation en circuit court). Cela signifie que l’évaluation s’arrête dès que le résultat final est connu.

• Pour expression1 && expression2, si expression1 est fausse, expression2 n’est jamais évaluée car le résultat sera forcément faux.
• Pour expression1 || expression2, si expression1 est vraie, expression2 n’est jamais évaluée car le résultat sera forcément vrai.

Ce comportement permet d’écrire des affectations conditionnelles très concises.

L’opérateur de coalescence des nuls (`??`)

Introduit avec ES2020, l’opérateur de coalescence des nuls (??) est un opérateur logique très pratique. Il renvoie la valeur de l’opérande de droite seulement si l’opérande de gauche est null ou undefined. Sinon, il renvoie l’opérande de gauche.

C’est une excellente alternative à l’opérateur || quand on veut spécifiquement tester null et undefined sans inclure les autres valeurs « falsy » comme 0, '' (chaîne vide) ou false.

let volume = 0;

// Avec ||, le résultat est incorrect car 0 est "falsy"
const reglageSon1 = volume || 50; // renvoie 50 (incorrect, on voulait 0)

// Avec ??, le résultat est correct car 0 n'est ni null ni undefined
const reglageSon2 = volume ?? 50; // renvoie 0 (correct)

let nomUtilisateur = null;
const nomAffiche = nomUtilisateur ?? "Invité"; // renvoie "Invité"

L’opérateur conditionnel (ternaire) (`? :`)

L’opérateur ternaire est le seul opérateur JavaScript qui prend trois opérandes. C’est un raccourci pour une instruction if...else. Sa syntaxe est :

condition ? valeurSiVrai : valeurSiFaux

S’il est très pratique pour rendre le code plus concis, il faut l’utiliser avec modération. Pour des conditions complexes, une structure if...else classique est souvent plus lisible.

let age = 20;

// Version if...else
let peutVoter;
if (age >= 18) {
  peutVoter = "Oui";
} else {
  peutVoter = "Non";
}

// Version avec opérateur ternaire
let peutVoterTernaire = (age >= 18) ? "Oui" : "Non"; 

// les deux variables contiennent "Oui"

La Précédence des Opérateurs : Éviter les Erreurs de Calcul

Tout comme en mathématiques, les opérateurs en JavaScript ont un ordre de priorité, appelé précédence. Par exemple, la multiplication (*) est effectuée avant l’addition (+). Sans connaître cet ordre, on peut obtenir des résultats inattendus.

let calcul = 10 + 5 * 2; // renvoie 20 (et non 30)

Dans cet exemple, 5 * 2 est calculé en premier (résultat 10), puis l’addition 10 + 10 est effectuée.

Tableau de précédence simplifié

Voici un aperçu de l’ordre de priorité des opérateurs les plus courants, du plus prioritaire au moins prioritaire :

let calculClair = (10 + 5) * 2; // renvoie 30. L'intention est évidente.

FAQ – Questions fréquentes sur les opérateurs JavaScript

Voici des réponses directes aux questions les plus courantes sur les opérateurs en JavaScript.

• Quelle est la différence fondamentale entre == et === ?

  == compare les valeurs après conversion de type, ce qui peut donner des résultats surprenants. === (égalité stricte) compare les valeurs ET les types, sans conversion. Utilisez toujours === pour un code plus fiable.

• Quand devrais-je utiliser l’opérateur ternaire ?

  Utilisez l’opérateur ternaire (? :) pour des affectations conditionnelles simples, où une structure if...else serait trop lourde. Par exemple : let message = stock > 0 ? "En stock" : "Épuisé";. Évitez-le pour des logiques complexes.

• C’est quoi un opérateur « short-circuit » en JavaScript ?

  Cela concerne les opérateurs logiques && et ||. L’évaluation de l’expression s’arrête dès que le résultat est connu. Pour A && B, si A est faux, B n’est jamais évalué. Pour A || B, si A est vrai, B n’est jamais évalué. C’est utile pour éviter des erreurs ou exécuter une fonction de manière conditionnelle.

• Comment fonctionne l’opérateur de coalescence des nuls (??) ?

  Il renvoie son opérande de droite si celui de gauche est uniquement null ou undefined. C’est la meilleure façon de fournir une valeur par défaut, car il ne réagit pas aux autres valeurs « falsy » comme 0, une chaîne vide '' ou false, contrairement à l’opérateur ||.