What purpose do &&=, ||= and ??= serve?

Question

I have seen this syntax in node.jsv15.0.1: &&=, ||= and ??=. But I don't know what it does. Does anyone know?

Answer 1

These are the new logical assignment operators. They're similar to the more familiar operators like *=, +=, etc.

someVar &&= someExpression is roughly equivalent to someVar = someVar && someExpression.

someVar ||= someExpression is roughly equivalent to someVar = someVar || someExpression.

someVar ??= someExpression is roughly equivalent to someVar = someVar ?? someExpression.

I say "roughly" because there's one difference - if the expression on the right-hand side isn't used, possible setters are not invoked. So it's a bit closer to:

someVar &&= someExpression is like

if (!someVar) {
  someVar = someExpression;
}

and so on. (The fact that a setter isn't invoked is unlikely to have an effect on the script, but it's not impossible.) This is unlike the other traditional shorthand assignment operators which do unconditionally assign to the variable or property (and thus invoke setters). Here's a snippet to demonstrate:

const obj = {
  _prop: 1,
  set prop(newVal) {
    this._prop = newVal;
  },
  get prop() {
    return this._prop;
  }
};

// Setter does not get invoked:
obj.prop ||= 5;

??, if you aren't familiar with it, is the nullish coalescing operator. It will evaluate to the right-hand side if the left-hand side is either null or undefined.

Answer 2

Those are called Logical Assignment Operators and there are three in total:

1. Logical AND assignment (&&=)
2. Logical OR assignment (||=)
3. Logical nullish assignment (??=)

Fundamentally they all do the same: The logical operators &&, ?? and || in front of the = as in x logical-operator= y can be rewritten as x logical-operator (x = y). Their only purpose is to replace more verbose code:

1. x &&= y returns x when x is not truthy and returns y when x is truthy. It is the same as:

   if (x) {
     x = y 
   }
   

2. x ||= y returns x when x is truthy and returns y when x is not truthy. It is the same as:

   if (!x) {
     x = y 
   }
   

3. x ??= y returns x when x is not nullish and returns y when x is nullish. It is the same as:

   if (x === null || x === undefined) {
     x = y 
   }
   

Here are some examples to further your understanding of these:

const y = 'other value'

let def   = 'initial'    // truthy value
let zero  = 0            // not truth value
let undef = undefined    // nullish value

def   &&= y    // def = 'other value'
zero  &&= y    // zero = 0
undef &&= y    // undef = 'undefined'

def   ||= y    // def = 'initial'
zero  ||= y    // zero = 'other value'
undef ||= y    // undef = 'other value'

def   ??= y    // def = 'initial'
zero  ??= y    // zero = 0
undef ??= y    // undef = 'other value'