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!

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!