Sign in Subscribe
Javascript

[JS] Export v.s. Import Modules

[JS] Export v.s. Import Modules

What to Expect from This Post

In this post, we’ll learn how to export and import variables between files in JavaScript using ES Modules (ESM). This is essential for writing modular, organized, and maintainable code.

Folder Setup Example

Let’s say we’re working with the following three files:

  • index.html
  • index.js
  • test.js

🟨 index.html

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Refresher</title>
    <link rel="stylesheet" href="assets/styles/main.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <header>
      <img src="assets/images/js-logo-xs.png" alt="JavaScript logo" />
      <h1>JavaScript Refresher</h1>
    </header>

    <!-- Important: Use type="module" to enable imports -->
    <script src="assets/scripts/index.js" type="module"></script>
  </body>
</html>
💡 Heads Up: You must add type="module" to your <script> tag to enable import and export in browser environments.

Case 1: Export/Import a Single Variable

Exporting a single variable is easy—just add export in front of it. When importing, use curly braces {} to grab the variable by name.

🟩 test.js

export let word = "hello!";

🟦 index.js

import { word } from './test.js';

console.log(word); // Output: hello!

Case 2: Export/Import Multiple Variables

You can export multiple variables in the same file.

🟩 test.js

export let word = "hello!";
export let sentence = "how are you?";

✅ Option 1: Import by Name

import { word, sentence } from './test.js';

console.log(word);     // hello!
console.log(sentence); // how are you?

✅ Option 2: Import Everything as an Object

import * as greet from './test.js';

console.log(greet.word);     // hello!
console.log(greet.sentence); // how are you?
💡 Using import * as gives you an object to group all exported variables.

Case 3: Export/Import a Default Value

Each file can have one default export, which can be imported without curly braces.

🟩 test.js

export default "hello!";

🟦 index.js

import word from './test.js';

console.log(word); // hello!
💡 You can name the imported default value whatever you like. There’s no need to match the original variable name.

Bonus: Mixing Default and Named Exports

You can combine default and named exports in one file:

🟩 test.js

export default "hello!";
export const sentence = "how are you?";

🟦 index.js

import greeting, { sentence } from './test.js';

console.log(greeting); // hello!
console.log(sentence); // how are you?

🔁 Summary

Here’s a quick comparison of different import styles:

Export TypeImport SyntaxNotes
Named Exportimport { name } from './file.js'Must match the name of the exported variable
Default Exportimport name from './file.js'Can choose any name for the imported value
Import Allimport * as alias from './file.js'Use alias.variableName to access exports

🧠 Final Thoughts

Understanding how modules work in JavaScript is a game changer for writing scalable, clean code. Whether you’re building a small script or a large web app, mastering import/export will make your codebase easier to maintain.

Read next

Comments ()