ESNext: Logical Assignment Operators (||=, ??=, &&=)

A new ECMAScript Proposal that I’m looking forward to is Logical Assignment Operators. In short it combines Logical Operators (||, &&, and ??) with Assignment Expressions (=).

// "Or Or Equals" (or, the Mallet operator)
a ||= b;

// "And And Equals"
a &&= b;

// "QQ Equals"
a ??= b;

Basically these operators translate to these actions being performed:

• ||= will only assign the value of b into a if a is falsy (false, 0, null, etc.).
• &&= will only assign the value of b into a if a is truthy (true, 1, {}, etc.).
• ??= will only assign the value of b into a if a is null or undefined.

~

These operators will change the way you code, see this before/after example:

// Without Logical Assignment
name = name ?? 'stranger';

// With Logical Assignment
name ??= 'stranger'

Using Logical Assignment Operators will save you to writing an if statement. Additionally it can save a setter execution.

let name = 'bramus';

// Without Logical Assignment: the value of name will *always* be set to (here: to its own value), even though name is not nullish
name = name ?? 'stranger';

// With Logical Assignment: name won't be reassigned as name is not nullish
name ??= 'stranger'

~

The Logical Assignment Operators proposal is currently Stage-3.

💁‍♂️ Stage-3?

The Technical Committee which is concerned with the standardization of ECMAScript (i.e. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.

Stage-3 is the Candidate Stage where the feature is considered complete and only critical changes will happen based on implementation experience. If all goes well the proposal will advance to Stage 4 without any changes, after which it will to become part of the ECMAScript Specification.

Since it’s Stage-3, we can expect things to look good implementation-wise, which it totally is:

• Babel: The “Mallet Operator Transformer” got added a long time ago (back when it was still called “6to5”). Nowadays you should use the @babel/plugin-proposal-logical-assignment-operators plugin.
• Chrome/V8: The feature got added two days ago and will get shipped with V8 v8.4 behind the flag --harmony-logical-assignment
• Firefox/SpiderMonkey: Version 77 should support it, but I couldn’t get it to work in Firefox Developer Edition (77.0b2). Firefox Nightly (78.0a1) works fine.
• Safari/JavaScriptCore: Logical Assignment Operators shipped with Safari Technology Preview 105

I don’t expect this proposal to change at all anymore and can see it advancing to Stage-4 at the one of the next TC39 meetings. That way this proposal will most likely become part of ES2021.

~