Matt Perry
is writing
code.

What are logical assignment operators?

Considering the design-by-committee and implement-by-fiat nature of the JavaScript language, its evolution is surprisingly rapid. It's understandable to lose track of new language features throughout the epochs of proposal, release, and viable adoption.

Today, we're going to learn about a new syntax called logical assignment operators. They look like this:

a ||= 1;
a &&= 1;
a ??= 1;

Logical assignment operators will work in any modern browser, and they're now supported in TypeScript 4.

But what are they, and why would we use one?

Operators

If you're reading this, it's likely you're familiar with operators. If not in name, then in practice:

10 + 5; // + is an operator

They're essentially special characters that do something with the two things sat either side of it (called operands).

Arithmetic operators like +, -, * and / are common, but there are others.

Of these "others", and of particular interest to us in this post, are logical operators:

Logical operators return different operands based on their respective values. For instance, the OR operand returns the left operand if it's truthy, otherwise it returns the right one:

const a = 0 || 1; // 1

Assignment operators

Now we know what logical operators are, how about assignment operators?

A common pattern in JavaScript is to take an existing variable and perform an operation on it while assigning the result back to the same variable:

let value = 10;
value = value + 5;

Assignment operators allow us to perform this with a single shorthand operation:

let value = 10;
value += 5; // 15

Again, most of us are familiar with the arithmetic assignment operators like +=, -=, *= and /=.

Just as there's logical operators, there are now logical assignment operators. But I suppose you already knew that, because the premise, title and introduction of this entire article already spoiled it. So what are they?

Logical assignment operators

Take this variable:

let a = 0;

We can conditionally reassign it a new value using the OR operator (||):

a = a || 1; // a is falsy, becomes 1

With the logical assignment operators, we can condense this expression to just:

a ||= 1;

These two snippets are identical. || behaves as usual, returning the left operand if it's truthy, or the right operand if the left one is falsy.

let a = 0;
a ||= 2; // a is falsy, becomes 2
let b = 1;
b ||= 2; // b is truthy, remains 1
let c = "";
c ||= "Hello"; // c is falsy, becomes "Hello"

We also have the inverse with &&:

let a = 0;
a &&= 2; // a is falsy, remains 0

Finally, there's the nullish coalescing operator. If you're not so familiar with this syntax it's worth understanding. Instead of checking for falsy values, it strictly checks for null or undefined:

let a = undefined;
a = a ?? 1; // a is undefined, becomes 1
let b = 0;
b = b ?? 1; // b is falsy, remains 0
let c = "";
c = c ?? "Hello"; // c is falsy, remains ""

Again, this syntax can be condensed into its logical assignment operator shorthand:

a ??= 1; // 1;
b ??= 1; // 0;
c ??= "Hello"; // ""

As well as shortening self-assignment, the pattern can also be used to replace if statements like this:

if (!a) {
a = 1;
}
// Is the same as
a ||= 1;

Conclusion

Unlike many additions assignment operators aren't groundbreaking or even enabling of new patterns. But they are nice bit of syntactic sugar that being consistency between logical and arithmethic operators.

Photo of Matt Perry
Matt Perry is a developer and photographer currently living in Amsterdam.

Twitter | Instagram