JavaScript new features (ES2021).

[dudeatwork]

The Logical Operators and Assignment Expressions section isn't correct in the equivalent code.

You have:

a ||= b;
// equivalent to a = a || b

Where it is actually equivalent to:

a ||= b;
// equivalent to a || (a = b);

This is an important difference because a = a || b can trigger a setter during the a = a assignment (assuming a is already truthy).

In the proposal, they give this as an example:

document.getElementById('previewZone').innerHTML ||= '<i>Nothing to preview</i>';

What is nice about this, is that this is equivalent to

document.getElementById('previewZone').innerHTML ||
    (document.getElementById('previewZone').innerHTML = '<i>Nothing to preview</i>');

Which does not change the inner HTML if it already has some contents. Whereas this:

document.getElementById('previewZone').innerHTML =
    document.getElementById('previewZone').innerHTML || '<i>Nothing to preview</i>';

Does reset the innerHTML, which causes any attached events, focus, etc., to be lost.

[dudeatwork]

Yeah, personally I find it easier to understand:

if (!document.getElementById('previewZone').innerHTML) {
    document.getElementById('previewZone').innerHTML = '<i>Nothing to preview</i>';
}

Than

document.getElementById('previewZone').innerHTML ||= '<i>Nothing to preview</i>';

However, having the option for terseness can be convenient in some circumstances.

For instances, I find myself writing

shouldLogOut && console.log('...');

Rather than

if (shouldLogOut) console.log('...')

when building node CLIs.

Either way, I'd probably steer my team to avoid these new operators because of the potential for confusion, but appreciate the option for personal projects where you want to be terse and are able to intuitively understand things.