Affectation après OU logique (||=)
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2020.
L'opérateur d'affectation après OU logique (x ||= y) n'affecte la valeur de l'opérande droit uniquement si l'opérande gauche est équivalent à faux (falsy).
Exemple interactif
const a = { duration: 50, title: "" };
a.duration ||= 10;
console.log(a.duration);
// Expected output: 50
a.title ||= "title is empty.";
console.log(a.title);
// Expected output: "title is empty."
Syntaxe
expr1 ||= expr2;
Description
Évaluation en court-circuit
L'opérateur OU logique fonctionne ainsi :
x || y;
// renvoie x lorsque x est équivalent à vrai
// renvoie y lorsque x n'est pas équivalent à vrai
L'opérateur OU logique peut utiliser un court-circuit : le second opérande est uniquement évalué si le premier opérande n'est pas équivalent à vrai.
L'opérateur d'affectation après OU logique observe les mêmes règles : l'affectation a uniquement lieu si l'opération logique a besoin d'évaluer l'opérande droit. Autrement dit, x ||= y est équivalent à :
x || (x = y);
En revanche, il n'est pas équivalent à l'expression suivante qui effectue, quoi qu'il arrive, une affectation :
x = x || y;
On notera que ce comportement est différent entre les opérateurs binaires et les opérateurs logiques.
Exemples
Affecter une valeur par défaut
Dans l'exemple qui suit, si paroles est vide, on y place une valeur par défaut :
document.getElementById("paroles").textContent ||= "Aucune parole.";
Ici, la notion de court-circuit est utile, car l'élément ne sera pas mis à jour si ce n'est pas nécessaire. Il n'y aura pas d'effet de bord indésiré comme une autre étape de rendu ou la perte du focus, etc.
Attention toutefois à la valeur qu'on teste. Si on souhaite affecter une valeur lorsqu'on rencontre une chaîne de caractère vide (équivalente à faux), on pourra utiliser ||=. Sinon, si on souhaite uniquement distinguer null ou undefined, on utilisera l'opérateur ??=.
Spécifications
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-assignment-operators |
Compatibilité des navigateurs
Chargement…