When should I use curly braces for ES6 import

Question

It seems to be obvious  but I found myself a bit confused about when to use curly braces for importing a single module in ES6  For example  in the React-Native project I am working on  I have the following file and its content  File initialState js 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   In the TodoReducer js  I have to import it without curly braces  import initialState from    todoInitialState    If I enclose the initialState in curly braces  I get the following error for the following line of code   Cannot read property todo of undefined  File TodoReducer js  export default function todos state   initialState todo  action                  Similar errors also happen to my components with the curly braces  I was wondering when I should use curly braces for a single import  because obviously  when importing multiple component modules  you have to enclose them in curly braces  which I know  The Stack  Overflow post at here does not answer my question  instead I am asking when I should or should not use curly braces for importing a single module  or I should never use curly braces for importing a single module in ES6  this is apparently not the case  as I have seen single import with curly braces required

User · Answer

If you think of import as just syntax sugar for Node js modules  objects  and destructuring  I find it s pretty intuitive     bar js module        module exports       functionA       gt        functionB      gt             Really all that is is this   var module        exports          functionA  functionB               Then  over in foo js     The whole exported object  var fump   require    bar js          functionA  functionB      Or import fump from    bar     The same thing - object functionA and functionB properties      Just one property of the object var fump   require    bar js   functionA      Same as this  right  var fump     functionA  functionB   functionA      And if we use ES6 destructuring  var   functionA        functionA  functionB       We get same result     So  in import syntax  import   functionA   from    bar

User · Answer

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   This is a great guide to ES modules  explaining the difference between default and named exports

User · Answer

The curly braces are used only for import when export is named   If the export is default then curly braces are not used for import

User · Answer

Usually when you export a function you need to use the     If you have export const x  you use import  x  from     If you use export default const x  you need to use import x from     Here you can change X to whatever variable you want

User · Answer

In order to understand the use of curly braces in import statements  first  you have to understand the concept of destructuring introduced in ES6  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   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 you can export multiple modules  You can then make use of object destructuring like below  Let s assume you have a module called module js     export const printFirstname firstname    gt  console log firstname       export const printLastname lastname    gt  console log lastname    You would like to import the exported functions into index js      import  printFirstname  printLastname  from    module js       printFirstname  Taylor        printLastname  Swift     You can also use different variable names like so     import  printFirstname as pFname  printLastname as pLname  from    module js       pFname  Taylor        pLanme  Swift

User · Answer

For a default export we do not use     when we import  For example  File player js export default vx   File index js import vx from    player    File index js  File player js  If we want to import everything that we export then we use

User · Answer

If there is any default export in the file  there isn t any need to use the curly braces in the import statement   if there are more than one export in the file then we need to use curly braces in the import file so that which are necessary we can import   You can find the complete difference when to use curly braces and default statement in the below YouTube video  very heavy Indian accent  including rolling on the r s      21  ES6 Modules  Different ways of using import export  Default syntax in the code  ES6   ES2015

User · Answer

Dan Abramov s answer explains about the default exports and named exports  Which to use  Quoting David Herman  ECMAScript 6 favors the single default export style  and gives the sweetest syntax to importing the default  Importing named exports can and even should be slightly less concise  However  in TypeScript named export is favored because of refactoring  Example  if you default export a class and rename it  the class name will change only in that file and not in the other references  with named exports class name will be renamed in all the references  Named exports is also preferred for utilities  Overall use whatever you prefer  Additional Default export is actually a named export with name default  so default export can be imported as  import  default as Sample  from     Sample js

User · Answer

I would say there is also a starred notation for the import ES6 keyword worth to mention     If you try to console log Mix   import   as Mix from    A   console log Mix     You will get        When should I use curly braces for ES6 import    The brackets are golden when you need only specific components from the module  which makes smaller footprints for bundlers like webpack

User · Answer

Summary ES6 modules  Exports  You have two types of exports   Named exports Default exports  a maximum one per module  Syntax     Module A export const importantData 1   1  export const importantData 2   2  export default function foo         Imports  The type of export  i e   named or default exports  affects how to import something   For a named export we have to use curly braces and the exact name as the declaration  i e  variable  function  or class  which was exported  For a default export we can choose the name   Syntax     Module B  imports from module A which is located in the same directory  import   importantData 1   importantData 2    from    A       For our named imports     Syntax single named import     import   importantData 1       For our default export  foo   the name choice is arbitrary import ourFunction from    A    Things of interest   Use a comma-separated list within curly braces with the matching name of the export for named export  Use a name of your choosing without curly braces for a default export   Aliases  Whenever you want to rename a named import this is possible via aliases  The syntax for this is the following  import   importantData 1 as myData   from    A    Now we have imported importantData 1  but the identifier is myData instead of importantData 1

User · Answer

The curly braces      are used to import named bindings and the concept behind it is destructuring assignment A simple demonstration of how import statement works with an example can be found in my own answer to a similar question at When do we use   39      39  in javascript imports

[javascript] When should I use curly braces for ES6 import?

Examples related to javascript

Examples related to import

Examples related to ecmascript-6