ES6 export difference between a named and default export

Question

In the first case, I use export and it behaves as I expect

App.js

import * as a from "./a.js";
console.log("a：", a.a); // it would print out "a： a1 "

a.js

let a = "a0";
export { a };
a = "a1";

In the second case, I use export default, and it does not behave as I expect

App.js

import a from "./a.js";
console.log("a：", a); // it would print out "a： a0" ★★★

a.js

let a = "a0";
export default a;
a = "a1";

Why does this happen?

Please tell us what the behaviour is and what you expect. We're not mind readers! — Quentin, Dec 19 '22 at 16:16

score 0 · Answer 1 · answered Dec 19 '22 at 16:14

I'm not 100% sure about this, but my guess is that the default export gets assigned at export time as a separate variable within the module, whereas the named export is evaluated at import time.

let a = "a0";

// default export assigned to a separate variable. doesn't change if a is reassigned.
const defaultExport = a;

const b = { a };

a = "a1";

// import * as c gets the new value
const c = { a };

// defaultExport hasn't changed
console.log(defaultExport); // a0

// b has the original value
console.log(b); // a0

// c has the new value
console.log(c); // a1

ES6 export difference between a named and default export

1 Answers1