When do we use '{ }' in javascript imports? [duplicate]

Answer 1

Take the following example:

File to be imported, say importedFile.js:

var defaultExport, otherExport1, otherExport2, otherExport3;

export default defaultExport = () => {
    console.log("Default Export")
}

export otherExport1 = "Other non-default Export";

export otherExport2 = function() {
  console.log("Some more non-default Export");
};

export otherExport3 = { msg: "again non-default Export" };

Now in your main JS file, if you would do the following:

import something from './importedFile.js;

Here the variable something would get the value of the variable/function that has been exported as default in the importedFile.js file, i.e. the variable defaultExport. Now, if you do something like the following:

import { otherExport1, otherExport2 } from './importedFile.js;

It would import specifically otherExport1 and otherExport2 variable and function and not the defaultExport and otherExport3.

You can also do something like the following to import all the variables by their names from importedFile.js:

import { defaultExport, otherExport1, otherExport2, otherExport3 } from './importedFile.js';

Conclusion:

1. curly braces are used to choose variables/functions/objects (using a technique called object destructuring in ES6) that need to be imported without importing all the other unnecessary exported variables/functions/objects.
2. If you don't specify curly braces, it would always import only the variable/function/object that has been exported as default and nothing else. It would import undefined if nothing has been exported as default export.