Logical assignment operators in JavaScript

Logical assignment operators in JavaScript combine Logical Operators and Assignment Expressions.

//"Or Or Equals"
x ||= y;
x || (x = y);

// "And And Equals"
x &&= y;
x && (x = y);

// "QQ Equals"
x ??= y;
x ?? (x = y);

So, say you have a function updateID it can vary in the below ways:

const updateID = user => {

  // We can do this
  if (!user.id) user.id = 1

  // Or this
  user.id = user.id || 1

  // Or use logical assignment operator.
  user.id ||= 1
}

You could also use it with ??

function setOpts(opts) {
  opts.cat ??= 'meow'
  opts.dog ??= 'bow';
}

setOpts({ cat: 'meow' })

This is on stage-4 and you should be able to use it today!

I am happy that I was able to co-champion this proposal.

7 Years ago it was just a thought!

Comments

[Edoardo Gargano]

Nice work, thank you for sharing.

I understand better the ??= example with a console.log and changing assignment here: repl

So opts.dog ??= 'bow'; means: if opts.dog is not set, assign bow

[Federico Kereki]

Hi! I'm not sure -- isn't x ||= y the same as x = x || y ? This is aligned to how other operators (+=, *=, etc.) do work.

[hemanth.hm]

x ||= 1 would mean x || (x = 1)

[cascandaliato]

Aren't the two expressions x = x || y and x || (x = y) equivalent?

[Matt Swensen]

Nice work, @hemanth ! These will be super handy

[Jerome Covington]

Nice work on a very useful addition to the language. Great to see you stuck with it.

[Håkon Krogh]

Very useful new features! Looks like you got the variables mixed up in the examples:

x || (y = z);

Should be

x || (x = y);

... unless I got this all wrong?

[hemanth.hm]

True, fixed it. I was trying to bring in another variable.

[Andreas Loukakis]

Imho, it would be important to emphasise on ??= checking for null and undefined, while ||= checking for falsy values. Could save some bugs :D

Same as:
0 || 42 // 42
0 && 42 // 0
0 ?? 42 // 0

[hemanth.hm]

Yup, so dev.to/hemanth/vs-2ke7