When do we use '{ }' in javascript imports

Question

This question already has an answer here:

• When should I use curly braces for ES6 import? 9 answers

I am learning Javascript imports and I am yet to understand when we use curly braces while importing items(functions, objects, variables) from another JS file.

import Search from './models/Search';
import * as searchView from './views/searchView';
import { elements, renderLoader } from './views/base'
//elements is an object, renderLoader is a function

Answer 1

The import statements are used to import the exported bindings from another module

The curly braces ({}) are used to import named bindings and the concept behind it is called destructuring assignment The concept of destructuring assignment is a process that makes it possible to unpack the values from arrays or objects into distinct variables in the imported module

The curly braces ({}) are used to import named bindings

I would like to explain different types of imports in ES6 with the help of an example

Suppose we have a a module named Aninmals(Animals.js) let suppose the module exports a default binding Man and several other named bindings such as Cat, Dog etc

/*
 Animal.js
*/
..
export Cat;
export Dog
export default Man

Import a single export from a module

In order to export a single export from another module (let say Cat) we can write it like this

/*
 Anothermodule.js
*/
import {Cat} from "./Animals"

Similarly for Dog

/*
 YetAnothermodule.js
*/
import {Dog} from "./Animals"

Import multiple exports from module

You can also import multiple modules as follows

/*
 Anothermodule.js
*/
import {Dog, Cat} from "./Animals"

Import an export with a more convenient alias

/*
 Anothermodule.js
*/
import {Dog as Puppy}  from './Animals.js';

Rename multiple exports during import

/*
 Anothermodule.js
*/
import {Dog as Puppy, Cat as Kitty}  from './Animals.js';

But in the case to import Man into another module since it is a default export you can write it like thie

/*
 Anothermodule.js
*/
import Man  from './Animals.js';

You can also mix the both the above variants for example

/*
 Anothermodule.js
*/
import Man, {Dog as Puppy, Cat as Kitty} from '/Animals.js';

Import an entire module's contents

If you want to import everything you can use

/*
 Anothermodule.js
*/
import * as Animals from './Animals.js';

Here, accessing the exports means using the module name ("Animals" in this case) as a namespace. For example, if you want to use Cat in this case you can use it like below

Animals.Cat

You can read more information about import here

you can read about destructuring here

Answer 2

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.

Answer 3

You can export more than 1 content from a single module.

For example at your code:

import * as searchView from './views/searchView'; //1
import { elements, renderLoader } from './views/base' //2

At //1, you import Everything from './views/searchView';

At //2, there might be more content from './views/base', but you import only elements and renderLoader

For more information: import MDN

Answer 4

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.

Answer 5

import Search from './models/Search';

Imports the default exported element as Search.

import * as searchView from './views/searchView';

Imports everything into searchView that has been exported.

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

Imports a hand-picked number of named exported elements.

Answer 6

{} is used when you want to import part of an object. The * as searchView one will import all properties and methods in the searchView file.

Suppose './views/base' has 3 properties: elements, renderLoader, additionalParam (Assuming that all three have been exported as named exports in the file)

When doing

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

you import only those 2 specific properties

But when you do

import * as base from './views/base'

you import all three properties in the object named base