DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Importing and Exporting Modules in JavaScript
Anas Nabil
Anas Nabil

Posted on

Importing and Exporting Modules in JavaScript

  • Name Export
export const name = 'value'
Enter fullscreen mode Exit fullscreen mode
  • Name Import
import { name } from '...'
Enter fullscreen mode Exit fullscreen mode

  • Default Export
export default 'value'
Enter fullscreen mode Exit fullscreen mode
  • Default Import
import anyName from '...'
Enter fullscreen mode Exit fullscreen mode

  • Rename Export
export { name as newName }
Enter fullscreen mode Exit fullscreen mode
  • Name Import
import { newName } from '...'
Enter fullscreen mode Exit fullscreen mode

  • List Export and Renaming
export {
    name1,
    name2 as newName2
}
Enter fullscreen mode Exit fullscreen mode
  • List Import and Renaming
import {
    name1 as newName1,
    newName2
} from '...'
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
lukeshiru profile image
Luke Shiru

Just a heads up that you can add highlighting to the code blocks if you'd like. Just change:

code block with no colors example

... to specify the language:

code block with colors example

More details in our editor guide!

About the actual post, one scenario that I think is missing is when you re-export one thing from another file:

export { something } from "somewhere";
// or
export { something as somethingElse } from "somewhere";
Enter fullscreen mode Exit fullscreen mode

Cheers!

🌚 Life is too short to browse without dark mode