What is export default in JavaScript

Question

File  SafeString js    Build out our basic SafeString type function SafeString string      this string   string     SafeString prototype toString   function       return  quot  quot    this string      export default SafeString   I have never seen export default before  Are there any equivalent stuff for export default that can be easier to understand

User · Answer

As explained on this MDN page

There are two different types of export, named and default. You can have multiple named exports per module but only one default export[...]Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.But a default export can be imported with any name

For example:

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

User · Answer

There are two different types of export  named and default  You can have multiple named exports per module but only one default export  Each type corresponds to one of the above  Source  MDN  Named Export export class NamedExport1      export class NamedExport2         Import class import   NamedExport1   from  path-to-file  import   NamedExport2   from  path-to-file      OR you can import all at once import   as namedExports from  path-to-file   Default Export export default class DefaultExport1         Import class import DefaultExport1 from  path-to-file     No curly braces -        You can use a different name for the default import import Foo from  path-to-file     This will assign any default export to Foo

User · Answer

export default is used to export a single class  function or primitive from a script file   The export can also be written as  export default function SafeString string      this string   string     SafeString prototype toString   function       return      this string       This is used to import this function in another script file  Say in app js  you can   import SafeString from    handlebars safe-string     A little about export  As the name says  it s used to export functions  objects  classes or expressions from script files or modules  Utiliites js  export function cube x      return x   x   x    export const foo   Math PI   Math SQRT2    This can be imported and used as  App js  import   cube  foo   from  Utilities   console log cube 3       27 console log foo         4 555806215962888   Or  import   as utilities from  Utilities   console log utilities cube 3       27 console log utilities foo         4 555806215962888   When export default is used  this is much simpler  Script files just exports one thing  cube js  export default function cube x      return x   x   x       and used as App js  import Cube from  cube   console log Cube 3       27

User · Answer

In my opinion  the important thing about the default export is that it can be imported with any name  If there is a file  foo js  which exports default   x000D   x000D  export default function foo     x000D   x000D   x000D   it can be imported in bar js using   x000D   x000D  import bar from  foo  import Bar from  foo     Or ANY other name you wish to assign to this import x000D   x000D   x000D

User · Answer

export default is used to export a single class  function or primitive  export default function       can be used when the function has no name  There can only be one default export in a file  Read more

User · Answer

export default function     can be used when the function doesn t have a name  There can only be one default export in a file  The alternative is a named export  This page describes export default in detail as well as other details about modules that I found very helpful

User · Answer

What is    export default    in JavaScript  In default export the naming of import is completely independent and we can use any name we like   I will illustrate this line with a simple example  Let   s say we have three modules and an index html file   modul js modul2 js modul3 js index html  File modul js export function hello         console log  quot Modul  Saying hello  quot       export let variable   123   File modul2 js export function hello2         console log  quot Module2  Saying hello for the second time  quot       export let variable2   456   modul3 js export default function hello3         console log  quot Module3  Saying hello for the third time  quot       File index html  lt script type  quot module quot  gt  import   as mod from    modul js   import  hello2  variable2  from    modul2 js   import blabla from    modul3 js        Here is the important stuff - we name the variable for the module as we like  mod hello    console log  quot Module   quot    mod variable    hello2    console log  quot Module2   quot    variable2    blabla     lt  script gt   The output is  modul js 2 10   - gt  Modul  Saying hello  index html 7 9  - gt  Module  123 modul2 js 2 10  - gt  Module2  Saying hello for the second time  index html 10 9 - gt  Module2  456 modul3 js 2 10  - gt  Module3  Saying hello for the third time    So the longer explanation is   export default  is used if you want to export a single thing for a module  So the thing that is important is  quot import blabla from    modul3 js  quot  - we could say instead   quot import pamelanderson from    modul3 js quot  and then pamelanderson     This will work just fine when we use  export default  and basically this is it - it allows us to name it whatever we like when it is default   P S   If you want to test the example - create the files first  and then allow CORS in the browser - gt  if you are using Firefox type in the URL of the browser  about config - gt  Search for  quot privacy file unique origin quot  - gt  change it to  quot false quot  - gt  open index html - gt  press F12 to open the console and see the output - gt  Enjoy and don t forget to return the CORS settings to default  P S 2  Sorry for the silly variable naming More information is in link2medium and link2mdn

User · Answer

It s part of the ES6 module system  described here  There is a helpful example in that documentation  also      If a module defines a default export   export default function     console log  hello            then you can import that default export by omitting the curly braces   import foo from  foo   foo       hello       Update  As of June 2015  the module system is defined in   15 2 and the export syntax in particular is defined in   15 2 3 of the ECMAScript 2015 specification

User · Answer

Export Default is used to export only one value from a file which can be a class  function  or object  The default export can be imported with any name    file functions js  export default function subtract x  y      return x - y       importing subtract in another file in the same directory import myDefault from  quot   functions js quot    The subtract function can be referred to as myDefault in the imported file  Export Default also creates a fallback value which means that if you try to import a function  class  or object which is not present in named exports  The fallback value given by default export will be provided  A detailed explanation can be found on https   developer mozilla org en-US docs web javascript reference statements export

[javascript] What is "export default" in JavaScript?

Examples related to javascript

Examples related to node.js

Examples related to ecmascript-6