Affectation après OU logique (||=)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 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

js
expr1 ||= expr2;

Description

Évaluation en court-circuit

L'opérateur OU logique fonctionne ainsi :

js
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 à :

js
x || (x = y);

En revanche, il n'est pas équivalent à l'expression suivante qui effectue, quoi qu'il arrive, une affectation :

js
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 :

js
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® 2025 Language Specification
# sec-assignment-operators

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Logical OR assignment (x ||= y)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi