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.

Enables import/export syntax
Automatically delays script execution until HTML is loaded (like defer)
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.