When Should I Use Curly Braces For Es6 Import

When should I use curly braces for ES6 import?

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.

What is use of curly braces in an ES6 import statement?

Well, the difference between whether you should import your components within brackets or without it lies in the way you export it.

There are two types of exports

1. Default Export
2. Named Export

A component can have one default export and zero or more named exports.

If a component is a default export then you need to import it without brackets.

E.g.,

export default App;

The import it as

import App from './path/to/App';

A named export could be like

export const A = 25;

or

export {MyComponent};

Then you can import it as

import {A} from './path/to/A';

or

import {A as SomeName} from './path/to/A';

If your component has one default export and few named exports, you can even mix them together while importing

import App, {A as SomeName} from './path/to/file';

Similarly in case of react and react-dom, React and ReactDOM are default exports respectively whereas, for instance Component is a named export in react and render is a named export in react-dom. That's the reason you can either do

import ReactDOM from 'react-dom';

and then use

ReactDOM.render()

or use it like mentioned in your question.

When do we use '{ }' in javascript imports?

import { elements, renderLoader } from './views/base'

is the way you need to import single, named exports from a module, in this case it is importing named exports elements and renderLoader from base.js.

The { elements, renderLoader } syntax is in many cases just syntactic sugar (called destructuring) added in recent versions of the ECMAScript standard.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

In this case, though, it is necessary to get only the named exports you want.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_single_export_from_a_module

Please note that you can also pick new names for your variables like this:

import { elements as newNameForElements, renderLoader as newNameForRenderLoader } from './views/base'

which would then make the elements export available as newNameForElements etc.

Import with or without curly brackets in ES6

as given in developer.mozilla.org

It is possible to have a default export (whether it is an object, a
function, a class, etc.). The import statement may then be used to
import such defaults.

The simplest version directly imports the default:

import myDefault from '/modules/my-module.js';

References : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

What is different between curly brace import and import from sub directory in ES6?

Yes, in fact, it does matter in regards to the final bundle size in this specific case. Per the React Bootstrap Documentation:

Bundle size optimization

If you install React-Bootstrap using npm, you can import individual components from react-bootstrap/lib rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the size of your client bundle.

The emphasis is mine. The above confirms that importing from a specific file in a subdirectory at react-bootstrap/lib reduces bundle size as bundlers will not include the whole library which would happen if you imported directly from the library with import { Button } from 'react-bootstrap'.

Another thing to note is that bundlers such as Webpack do have features such as tree-shaking to remove unnecessary modules when only importing a certain part of a library but it's not working reliably with React Bootstrap yet, so prefer the first choice for bundle size optimization. As for other cases with other libraries, it depends on if tree-shaking can be reliably used, and in that case it shouldn't matter which way you import a component of the library.

curly braces in es6 and react

The ES6 syntax

import React, {Component} from 'react';

Is an example of the syntax used to import ES6 modules - not to confuse with object destructuring. These are not related but are often confused as imports mimics shallow destructuring.

The JSX syntax

<h2>It is {new Date().toLocaleTimeString()}</h2>

Tells the JSX compiler to interpret whatever is inside the curly braces as javascript instead of text.

Neither the ES6 Import syntax, object destructuring, nor JSX curly braces are related.

Typescript: Why using `as` in curly braces import?

The module has an export named find.

If you were to import { find } from './resources/customer' then it would be assigned to a local variable named find.

By saying as findCustomer you assign it to a local variable named findCustomer instead.

This:

• Gives you a more informative name for it
• Can help you avoid conflicting with another variable named find (e.g. which might be imported from another module)

When do importing user-defined components need curly braces?

That might be happening because the CustomButton is not exported as default in './CustomButton'.

When a module has a default you don't need {}. That is needed when you export multiple things, and you want to require some of them.

TypeScript - difference between import ... and import {...} (with curly braces)

The difference between your two import declarations is covered in the TypeScript specification. From §11.3.2, Import Declarations:

An import declaration of the form

import d from "mod";

is exactly equivalent to the import declaration

import { default as d } from "mod";

Thus, you would omit the braces only when you are importing something that was exported as the default entity of the module (with an export default declaration, of which there can only be one per module). The name you provide in the import declaration becomes an alias for that imported entity.

When importing anything else, even if it's just one entity, you need to provide the braces.

The Default exports section of the TypeScript handbook has a few examples.

---

Related Topics