Dominic Elm DM'd me on Twitter to ask me questions about circular dependencies, and, well, I didn't know the answer. After some testing, discu

`export default thing` is different to `export { thing as default }`

submited by

Style Pass

2021-07-05 09:30:03

Dominic Elm DM'd me on Twitter to ask me questions about circular dependencies, and, well, I didn't know the answer. After some testing, discussion, and *ahem* chatting to the V8 team, we figured it out, but I learned something new about JavaScript along the way.

In this case module.thing is the same as thing in ./module.js, whereas destructuredThing is a new identifier that's assigned the value of thing in ./module.js, and that behaves differently.

Imports are 'live bindings' or what some other languages call a 'reference'. This means when a different value is assigned to thing in module.js, that change is reflected in the import in main.js. The destructured import doesn't pick up the change because destructuring assigns the current value (rather than a live reference) to a new identifier.

The above feels natural in my opinion. The potential gotcha here is that named static imports (import { thing } …) kinda look like destructuring, but they don't behave like destructuring.