Front-End Stuff You'll Never Use

Welcome to Front-End Stuff You'll Never Use, where we highlight features you might skip over but are nice to know. Today's topic: the ??=, ||=, and &&= operators.

The ??= Operator

It is a shorthand for assigning a value to a variable only if it is null or undefined. So instead of writing:

1if (data === null || data === undefined) {
2  data = defaultData;
3}

You can write:

1data ??= defaultData;

Useful for setting default values for variables.

The ||= Operator

Similarly, the ||= operator called the "logical OR assignment" operator assigns a value to a variable if it is falsy. Think of it as a more general version of the ??=.
Instead of:

1if (!data) {
2  data = defaultData;
3}

You can write:

1data ||= defaultData;

Also useful for setting default values for variables, but it works with all falsy values, not just null or undefined.

The &&= Operator

Last but not least, the &&= operator called the "logical AND assignment" operator assigns a value to a variable if it is truthy. So instead of writing:

1if (x) {
2  x = y;
3}

You can write:

1x &&= y;

Its use case is a bit more niche, but it can be useful in some scenarios. For example, refreshing a token only if it exists:

1const getToken = () => Date.now()
2const refreshToken = (token: number) => token + token
3
4let token1 = getToken(); // 1738374104416
5let token2 = 0;
6
7token1 &&= refreshToken(token1); // gets refreshed
8token2 &&= refreshToken(token2); // doesn't get refreshed because 0 is falsy
9
10console.log(token1) // 3476748208832
11console.log(token2) // 0

When to Use Them

Almost never. They are niche operators that not many developers use, and they can make your code harder to read. But it's good to know they exist. So if you ever see them in the wild, you'll know what they do.

And that's a wrap! Until next time, stay curious.