Import With Or Without Curly Brackets In Es6

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 cons

Solution 1:

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

Solution 2:

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.