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

Question

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 module named Animals(Animals.js) let suppose the module exports a default binding Man and several other named bindings such as Cat, Dog etc

/*
 Animals.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's 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 this

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

You can also mix 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.