JavaScript  

JavaScript Modules: Export and Import

Introduction

Modern JavaScript supports ES Modules, which allow you to split your code into multiple files and reuse logic. This improves scalability.

Export: Sharing Code Between Files

You can export constants, functions, or even entire classes from one file to use them in another.

1. Named Exports

You can export multiple values by name.

// config.js
export const API_KEY = "12345";
export const API_URL = "https://example.com";

2. Exporting a let Value (via function)

If a value needs to change (e.g., a counter), use let inside a function.

let visitCount = 0;

export function incrementVisit() {
  visitCount++;
  return visitCount;
}

3. Default Export

A file can also export one default value:

export default "default-secret-token";

Import: Bringing Code Into a File
 

1.Named Imports

//app.js
import { API_KEY, API_URL } from "./config.js";

2. Default Import

import defaultToken from "./config.js";

3. Rename Imports

import { API_URL as url } from "./config.js";

4. Import Everything as an Object

import * as config from "./config.js";
console.log(config.API_KEY);

Config.js & app.js

So, now your config.js looks like this.

Config.js

// config.js

// Named exports
export const API_KEY = "12345";
export const API_URL = "https://example.com";

// A let variable for an updatable value
let visitCount = 0;
export function incrementVisit() {
  visitCount++;
  return visitCount;
}

// Default export
export default "default-secret-token";

App.js

// app.js

// Importing named exports
import { API_KEY, API_URL, incrementVisit } from "./config.js";

// Importing default export
import defaultToken from "./config.js";

// Importing everything as a namespace
import * as config from "./config.js";

console.log("Named import - API_KEY:", API_KEY);
console.log("Named import - API_URL:", API_URL);
console.log("Default import:", defaultToken);

console.log("Namespace import - API_KEY:", config.API_KEY);
console.log("Namespace import - API_URL:", config.API_URL);

// Using the let-based function
console.log("Visit count:", incrementVisit());
console.log("Visit count:", incrementVisit());

This is how the console looks.

Console

Bonus: Dynamic Import

You can load a module only when it's needed.

if (userLoggedIn) {
  const auth = await import("./auth.js");
  auth.login();
}

Index.html

To use import/export in your JavaScript files, the browser needs to know you're using ES Modules. You must include.

<script type="module" src="app.js"></script>

This does 3 important things.

  1. Enables import/export syntax
  2. Automatically delays script execution until HTML is loaded (like defer)
  3. Keeps all variables scoped to the file (not global)

Without type="module", you’ll get.

Uncaught SyntaxError: Cannot use import statement outside a module

Here is the full version of index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vanilla JS App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="scripts/app.js"></script>
</body>
</html>

Let me also quickly cover how to pass arguments to a function.

Functions

You can export functions either as named exports or default exports, depending on your use case.

1. Named Function Exports

Named exports allow you to export multiple functions from a single file, and you import them by their specific names.

// math.js

// Named function export
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

2. Default Function Export

You can export a single function as the default export. This is useful when you want to export just one main function or value from a file.

// greet.js 

// Default function export
export default function greet(name) {
  return `Hello, ${name}!`;
}

Importing Functions

Once you've exported functions, you can import them into another JavaScript file.

1. Importing Named Functions

To import named functions, you must use the exact names from the export.

// app.js

// Importing named functions
import { add, subtract } from './math.js';

console.log("Function add:", add(5, 3));      // 8
console.log("Function subtract:", subtract(9, 4)); // 5

2. Importing a Default Function

When you export a function as the default, you can import it with any name you like.

// Importing default function
import greet from './greet.js';

console.log("Function greet:", greet("Alex")); // "Hello, Alex!"

3. Renaming Imported Functions

If you want to rename an imported function, you can use the as keyword during import.

// Importing and renaming a named function
import { add as sum, subtract as diff } from './math.js';

console.log("Function add with name: sum:", sum(10, 10));      // 20
console.log("Function add with subtract: diff:", diff(-10, 10));     // -20

Let's validate all of this with the output.

Output

Conclusion

Let's summarize what we have learned so far.

Syntax

Feature Example
Named Export export const API_KEY = "..."
Default Export export default something
Import Named import { API_KEY } from "./file.js"
Import Default import something from "./file.js"
Import All import * as config from "./file.js"
Rename Import import { x as y } from "./file.js"
Dynamic Import const mod = await import("./file.js")

Variable

Variable Name Declaration Why Used?
API_KEY const Static config value
API_URL const Static config value
visitCount let Tracks visits, changes over time
defaultToken default Primary export from the module

Using export and import helps keep your code modular and easier to manage. It’s one of the key tools for building modern JavaScript applications.

Membership not found