When should I use curly braces for ES6 import?

Question

It seems to be obvious, but I found myself a bit confused about when to use curly braces for importing a single module in ES6. For example, in the React-Native project I am

Answer 1

• If there is any default export in the file. There is no need to use the curly braces in the import statement.

• if there is more than one export in the file then we need to use curly braces in the import file so that which are necessary we can import.

• You can find the complete difference when to use curly braces and default statement in the bellow youtube video.

https://www.youtube.com/watch?v=tN-SYsGoDYo&t=130s

Answer 2

For a default export we do not use { } when we import.

eg

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

If we want to import everything that we export then we use *

Answer 3

This is a default import:

// B.js
import A from './A'

It only works if A has the default export:

// A.js
export default 42

In this case it doesn’t matter what name you assign to it when importing:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

Because it will always resolve to whatever is the default export of A.

---

This is a named import called A:

import { A } from './A'

It only works if A contains a named export called A:

export const A = 42

In this case the name matters because you’re importing a specific thing by its export name:

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

To make these work, you would add a corresponding named export to A:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

---

A module can only have one default export, but as many named exports as you'd like (zero, one, two, or many). You can import them all together:

// B.js
import A, { myA, Something } from './A'

Here, we import the default export as A, and named exports called myA and Something, respectively.

// A.js
export default 42
export const myA = 43
export const Something = 44

We can also assign them all different names when importing:

// B.js
import X, { myA as myX, Something as XSomething } from './A'

---

The default exports tend to be used for whatever you normally expect to get from the module. The named exports tend to be used for utilities that might be handy, but aren’t always necessary. However it is up to you to choose how to export things: for example, a module might have no default export at all.

This is a great guide to ES modules, explaining the difference between default and named exports.

Answer 4

The curly braces are used only for import when export is named. If the export is default then curly braces are not used for import.

Answer 5

usually when you export a function you need to use the {}

if you have

export const x 

you use

import {x} from ''

if you use

export default const x 

you need to use

import x from ''

here you can change X to whatever variable you want