mdn / interactive-examples

Home of the MDN live code editor interactive examples
Creative Commons Zero v1.0 Universal
726 stars 506 forks source link

Reorder example outputs #2799

Closed DanKaplanSES closed 1 month ago

DanKaplanSES commented 1 month ago

Description

Remove object from examples, add 2 more examples

Motivation

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[bot] commented 1 month ago

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.

DanKaplanSES commented 1 month ago

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 commented 1 month ago

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

DanKaplanSES commented 1 month ago

@Josh-Cena done!

github-actions[bot] commented 1 month ago

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.