Michele Nasti

Thoughts on what I learn

Logical assignments in Javascript

I just recently found out that a new syntax - well, 3 new syntaxes have been added to Javascript. Also, they are already supported by all relevant browsers. So, let's dive in!

Operator &&=

Suppose you have this snippet:

if (data.template) {
data.template = data.template.id;
}

which actually means: "if a property is set, assign to that property something else".

Well, this 3-lines code can be re-written in:

data.template &&= data.template.id;

Operator ||=

Before we used to all write:

if (!data.callbacks) {
data.callbacks = [];
}

Now we can write:

data.callbacks ||= [];

This means: assign to left what is on the right, if the property on the left is "falsy".

Caveat: what does it mean "falsy" in Javascript? Here's the list: null, undefined, false, NaN (this is a veeery special value), 0 and -0, "" (empty string) and document.all ( this i just found out now).

the problematic values here are 0 and "". Sometimes, these values are totally legit and we want to consider them as "truthy", not "falsy". That's why we have operator number 3:

Operator ??=

This ??= operator is like ||=, but it sets the variable only if the left side is null or undefined.

let obj = { value: "" };
obj.value ??= "default";
console.log(obj.value) // prints ""

Hope you liked these 3 new operators! These are the syntactic enhancements that makes us feel muuuch more productive. Nothing you could not do before, with good old ES3. But writing less, and more elegant code seems a win for many programmers. Bugs will still be there, but now they'll look fancier.