[Solved] – JavaScript – When should we use curly braces for ES6 import?

When should we use curly braces for ES6 import?

Asked on October 20, 2018 in Javascript.
Add Comment


  • 4 Answer(s)

    In the Es6 the curly braces are used in order of exporting multiple values

    var initialState = {
        todo: {
            todos: [
                {id: 1, task: 'Finish Coding', completed: false},
                {id: 2, task: 'Do Laundry', completed: false},
                {id: 2, task: 'Shopping Groceries', completed: false},
            ]
        }
    };
    export default initialState;
    

    Here there are multiple values and the values are able to displayed
    with different id values and the for the exporting of this multiple values curly braces are used.

    Answered on October 20, 2018.
    Add Comment

    This is a default import:

    // B.js
    import A from './A'
    

    It only works if A has the default export:

    // A.js
    export default 42
    

    In this case it doesn’t matter what name we assign to it when importing:

    // B.js
    import A from './A'
    import MyA from './A'
    import Something from './A'
    

    Because it will always resolve to whatever is the default export of A.

    This is a named import called A:

    import { A } from './A'
    

    It only works if A contains a named export called A:

    export const A = 42
    

    In this case the name matters because we’re importing a specific thing by its export name:

    // B.js
    import { A } from './A'
    import { myA } from './A' // Doesn't work!
    import { Something } from './A' // Doesn't work!
    

    To make these work, we would add a corresponding named export to A:

    // A.js
    export const A = 42
    export const myA = 43
    export const Something = 44
    

    A module can only have one default export, but as many named exports as we’d like (zero, one, two, or many). We can import them all together:

    // B.js
    import A, { myA, Something } from './A'
    

    Here, we import the default export as A, and named exports called myA and Something, respectively.

    // A.js
    export default 42
    export const myA = 43
    export const Something = 44
    

    We can also assign them all different names when importing:

    // B.js
    import X, { myA as myX, Something as XSomething } from './A'
    

    The default exports tend to be used for whatever we normally expect to get from the module. The named exports tend to be used for utilities that might be handy, but aren’t always necessary. However it is up to we to choose how to export things: for example, a module might have no default export at all.

    Answered on October 20, 2018.
    Add Comment

    In order to understand the use of curly braces in import statements, first, we have to understand the concept of destructing introduced in ES6
    1. Object destructuring

    var bodyBuilder = {
        firstname: 'Kai',
        lastname: 'Greene',
        nickname: 'The Predator'
    };
    var {firstname, lastname} = bodyBuilder;
    console.log(firstname, lastname); //Kai Greene
    firstname = 'Morgan';
    lastname = 'Aste';
    console.log(firstname, lastname); // Morgan Aste
    

    2. Array destructuring

    var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
    console.log(firstGame); // Gran Turismo
    

    Using list matching

    var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
    console.log(secondGame); // Burnout
    

    Using the spread operator

    var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
    console.log(firstGame);// Gran Turismo
    console.log(rest);// ['Burnout', 'GTA'];
    

    Now that we’ve got that out of our way, in ES6 we can export multiple modules. We can then make use of object destructuring like below
    Let’s assume we have a module called module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);
    

    We would like to import the exported functions into index.js;

    import {printFirstname, printLastname} from './module.js'
    printFirstname('Taylor');
    printLastname('Swift');
    

    We can also use different variable names like so

    import {printFirstname as pFname, printLastname as pLname} from './module.js'
    pFname('Taylor');
    pLanme('Swift');
    
    Answered on October 20, 2018.
    Add Comment

    This is a default import:

    // B.js
    import A from './A'

    It only works if A has the default export:

    // A.js
    export default 42

    In this case it doesn’t matter what name you assign to it when importing:

    // B.js
    import A from './A'
    import MyA from './A'
    import Something from './A'

    Because it will always resolve to whatever is the default export of A.


    This is a named import called A:

    import { A } from './A'

    It only works if A contains a named export called A:

    export const A = 42

    In this case the name matters because you’re importing a specific thing by its export name:

    // B.js
    import { A } from './A'
    import { myA } from './A' // Doesn't work!
    import { Something } from './A' // Doesn't work!

    To make these work, you would add a corresponding named export to A:

    // A.js
    export const A = 42
    export const myA = 43
    export const Something = 44

    A module can only have one default export, but as many named exports as you’d like (zero, one, two, or many). You can import them all together:

    // B.js
    import A, { myA, Something } from './A'

    Here, we import the default export as A, and named exports called myA and Something, respectively.

    // A.js
    export default 42
    export const myA = 43
    export const Something = 44

    We can also assign them all different names when importing:

    // B.js
    import X, { myA as myX, Something as XSomething } from './A'

    The default exports tend to be used for whatever you normally expect to get from the module. The named exports tend to be used for utilities that might be handy, but aren’t always necessary. However it is up to you to choose how to export things: for example, a module might have no default export at all.

    Answered on February 13, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.