The latest version of ECMAScript introduced three new logical assignment operators: nullish, AND, and OR operators. These are supported from Firefox 79 onwards, Chrome 85 onwards, and naturally there is no IE support but since Edge is now chromium based, it is available there too. They are not available in Node.js quite yet either.
Let us take a look at the three new logical assignment operators:
Logical Nullish Assignment (??=)
expr1 ??= expr2
The logical nullish operator only assigns the value to expr1 only if it is nullish (null or undefined).
x ??= y
might look to be equivalent to:
x = x ?? y;
But it is not! There is a subtle difference.
The nullish coalescing operator (??) operates from left to right and short circuits if x is not nullish. So the expression “y” will never be evaluated if x were not null nor undefined. Thus, if y was a function, it would not be invoked at all.
Therefore, this logical assignment operator is equivalent to:
x ?? (x = y);
Thus, this behavior is different than mathematical and bitwise assignment operators and is an important distinction to note. This applies to the next two operators as well.
Logical OR Assignment (||=)
This logical assignment operator only assigns the value if the left-hand expression is falsy. Falsy is different than nullish since falsy can be any of the valeus: false, 0, “”, null, undefined, and NaN and a few more.
x ||= y
is again equivalent to :
x || (x = y)
document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'
Logical AND Assignment (&&=)
As you might have already guessed, this logical assignment operator only assigns the value if the left-hand side is truthy. Thus:
x &&= y
whose equivalent again would be:
x && (x = y)
And that is all you need to know about these operators!