Skip to content

Instantly share code, notes, and snippets.

@amysimmons
Last active July 5, 2018 08:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amysimmons/9b70e66ed4d91514b2fa2f1c78481d5a to your computer and use it in GitHub Desktop.
Save amysimmons/9b70e66ed4d91514b2fa2f1c78481d5a to your computer and use it in GitHub Desktop.
// 1) NAMED EXPORTS

function helloWorld() {
  //...
}
const name = "Taylor Swift";
const age = 22;

export { helloWorld, name, age }
// 2) DECLARATION EXPORTS

export function helloWorld() {
  //...
}
export const name = "Taylor Swift";
export const age = 22;
// 3) RENAMED NAMED EXPORTS

const name = "Taylor Swift";
export { name as person };
// 4) DEFAULT EXPORTS
// Note: ES6 prefers having a single, default export per module over multiple exports 

function helloWorld() {
  //...
}

// This function can be made the default import in two different ways:

// A.

export default helloWorld;

// Note this is the same as 

export default function helloWorld() {
  //...
}

// B.

export { helloWorld as default }

// A. means you export a binding to the value at that moment, so even if it
// was changed in the module later, the imported value would remain the same
// B. means you export a binding to the identifier rather than its value, so if 
// it was changed in the module after the value was imported elsewhere, the imported
// value would still reflect the change
// 5) DEFAULT AND NAMED EXPORTS COMBINED

export default function helloWorld() {...}
export const name = "TayTay";

// or...

function helloWorld() {...}
const name = "TayTay";

export { helloWorld as default, name }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment