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

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 does nothing if x is not truthy and changes x's value to y if x is truthy. It is the same as:

   if (x) {
     x = y 
   }
   

2. x ||= y does nothing if x is truthy and changes x's value to y if x is not truthy. It is the same as:

   if (!x) {
     x = y 
   }
   

3. x ??= y does nothing if x is not nullish and changes x's value to y if 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'

Answer 2

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 3

a = a || b is equivalent to a ||= b => if a is true, a return but if a is false b return.

a = a && b is equivalent to a &&= b => if a is true, b return but if a is false a return.

a = a ?? b is equivalent to a ??= b => if a just is null or undefined, b return but if a is true a return.

note: null, undefined, "", 0, NaN are false

examples:

let a = -22
const b = false

a &&= b
console.log(a)   // false

let a = 0
const b = 'hello'

a ||= b
console.log(a)   // hello

let a = false
let b = true

a ??= b
console.log(a)   // false

let a = null
let b = true

a ??= b
console.log(a)   // true

If you do not understand, read it again!