Reorder example outputs

[DanKaplanSES]

Description

Remove object from examples, add 2 more examples

• The previous example used the nullish coalescing assignment operator on const a = { duration: 50 };.
• This new example uses the operator on primitive variables (e.g., let d = 50;).

Motivation

• IMHO, this focuses the example on what matters. e.g., the a in a.duration ??= 10; is not required to show how ??= works, and nothing can be removed from d ??= 50;

Additional details

Relevant article: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment

Related issues and pull requests

[github-actions]

It looks like this is your first pull request. 🎉 Thank you for your contribution! One of the project maintainers will triage and assign the pull request for review. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

[Josh-Cena]

I'm not sure I like this. Interactive examples do not need to reduce the feature to a bare working minimum, because it's not a substitution for documentation. Sometimes we introduce extra semantics just to make it more realistic, and I'd say conditionally assigning properties is more realistic than assigning variables.

[DanKaplanSES]

Gotcha. That's perfectly reasonable. I will say the object confused me at first until I realized it wasn't directly relevant, but I don't feel strongly about that. It's probably a me problem more than anything to do with the example.

Here's an alternative proposal: how would you feel about swapping the two code blocks in the original so it looks like this:

const a = { duration: 50 };

a.speed ??= 25;
console.log(a.speed);
// Expected output: 25

a.duration ??= 10;
console.log(a.duration);
// Expected output: 50

I think this may have avoided my confusion because:

1. You only have to look one line up/down to see a.speed is not defined.
2. It shows ??= performing a nullish coalesce early instead of late.

Here's a third idea:

const a = { };
a.speed ??= 25;
console.log(a.speed);
// Expected output: 25

const b = { duration: 50 };
b.duration ??= 10;
console.log(b.duration);
// Expected output: 50

Now each block of code is independent of the other; you don't have to jump over a code block to see the structure of the object you're dealing with.

FWIW, I don't feel strongly about any of these ideas--just food for thought.

[Josh-Cena]

I like your first alternative, if you find it helpful too.

[DanKaplanSES]

@Josh-Cena done!

[Josh-Cena]

Looks good, thanks

[github-actions]

Congratulations on your first merged pull request. 🎉 Thank you for your contribution! Did you know we have a project board with high-impact contribution opportunities? We look forward to your next contribution.