What Are Vanilla JS Modules?

Vanilla JS just means plain JavaScript, without any frameworks or libraries like React, Vue, or jQuery. So, when we talk about Vanilla JS modules, we’re talking about using JavaScript's built-in module system, introduced with ES6 (ECMAScript 2015). Why Use Modules? Modules help you: Organize code into reusable, manageable chunks Avoid polluting the global scope (no more mysterious variable collisions) Split responsibilities (e.g., one file handles DOM, another handles data) The Basics Vanilla JS modules are just .js files where you export and import things. 1. Exporting You can export functions, variables, classes, etc. // mathUtils.js export function add(x, y) { return x + y; } export const PI = 3.14; Or export everything at once: // mathUtils.js function subtract(x, y) { return x - y; } function multiply(x, y) { return x * y; } export { subtract, multiply }; Yu can also have one default export: // greet.js export default function greet(name) { console.log(`Hello, ${name}!`); } 2. Importing Now you bring that module into another file: // main.js import { add, PI } from './mathUtils.js'; import greet from './greet.js'; console.log(add(2, 3)); // 5 console.log(PI); // 3.14 greet('Marie'); // Hello, Marie! A Few Gotchas You must run modules through a server (localhost or real server). They won’t work if opened directly via file:// Use the type="module" attribute in your HTML: Modules are deferred by default, so they wait for the HTML to load Why Not Just Use Script Tags? Because: Modules help you split code cleanly Let you import only what you need Are more scalable for bigger projects TL;DR Vanilla JS modules = using the native import/export syntax to structure code. They’re clean, powerful, and don’t require any external tools — just the browser.

Apr 16, 2025 - 08:50

Vanilla JS just means plain JavaScript, without any frameworks or libraries like React, Vue, or jQuery. So, when we talk about Vanilla JS modules, we’re talking about using JavaScript's built-in module system, introduced with ES6 (ECMAScript 2015).

Why Use Modules?

Modules help you:

Organize code into reusable, manageable chunks
Avoid polluting the global scope (no more mysterious variable collisions)
Split responsibilities (e.g., one file handles DOM, another handles data)

The Basics

Vanilla JS modules are just .js files where you export and import things.

1. Exporting

You can export functions, variables, classes, etc.

// mathUtils.js
export function add(x, y) {
  return x + y;
}

export const PI = 3.14;

Or export everything at once:

// mathUtils.js
function subtract(x, y) {
  return x - y;
}

function multiply(x, y) {
  return x * y;
}

export { subtract, multiply };

Yu can also have one default export:

// greet.js
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

2. Importing

Now you bring that module into another file:

// main.js
import { add, PI } from './mathUtils.js';
import greet from './greet.js';

console.log(add(2, 3)); // 5
console.log(PI);        // 3.14
greet('Marie');         // Hello, Marie!

A Few Gotchas

You must run modules through a server (localhost or real server). They won’t work if opened directly via file://
Use the type="module" attribute in your HTML:

Modules are deferred by default, so they wait for the HTML to load

Why Not Just Use Script Tags?

Because:

Modules help you split code cleanly
Let you import only what you need
Are more scalable for bigger projects

TL;DR

Vanilla JS modules = using the native import/export syntax to structure code. They’re clean, powerful, and don’t require any external tools — just the browser.