DEV Community

loading...

What is wrong with `export` and `export default`?

dotorimook
Web Developer and UI/UX researcher who likes beautiful UI/UX
・1 min read

I have been using export and export default together, and there is no much difference in the usage but aliasing to import the module. In fact, I was thinking that they are just same when I import them.
However, I found there is a difference between export and export default. Let me show an simple example.

TestModule.js

let a = 0;

const test = () => a++;

export {a, test};
export default ({a, test});

index.js

import module, { a, test } from './TestModule';

const check = () => console.log(a, module.a);

check();
module.test();
check();
module.test();

I expected that the console would be like this because index.js import just same reference:

0 0
1 1

BUT, the what the console really says is:

0 0
1 0

I think the references of theme are different each other, but I don't understand why? Is there some one explain about why, please let me know.

Anyway, I think I have to use them becarefuly.

Discussion (0)