Import with or without curly brackets in ES6

Question

What is the difference between:

import Title from './title.js'

and

import { Title } from './title.js'

?

I think it has some connection with export default Title; and export const Title; but I don't know.

I was guessing about that but is there an explanation to this? — Samurai Jack, Oct 05 '17 at 07:20
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import — user93, Oct 05 '17 at 07:20
this question is not specific to angularjs but it is related to ES6 and above — user93, Oct 05 '17 at 07:24

kharhys · Answer 1 · 2017-10-05T07:57:27.700

A module may declare multiple exports. For instance export const Title; and export const SubTitle;. When you import such a module you get an Object whose keys are the exports you declared.

You can then use function parameter object destructuring - a feature available in ES6 - to select only exports you need from the Object.

Note that parameter destructuring is not available if you use export default since import will not necessarily return an object, unless that is what you exported.

score 1 · Accepted Answer · answered Oct 05 '17 at 07:23

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

Import with or without curly brackets in ES6

2 Answers2

Linked