Modules: import and export

Why modules?

A real app has thousands of lines. In one file, every variable would be visible to every other line, two people would accidentally use the same name, and nobody could find anything. A module is simply a file with its own private scope. It decides what to share (export), and other modules decide what to use (import).

Named exports

// gst.js
export const GST_RATE = 18;
export function addGst(amount) {
  return Math.round(amount * (1 + GST_RATE / 100));
}
function secretHelper() {}      // not exported: private to this file

// cart.js
import { addGst, GST_RATE } from './gst.js';
console.log(addGst(1000), GST_RATE); // 1180 18

Default exports

// logger.js
export default function log(msg) {
  console.log(new Date().toISOString(), msg);
}

// app.js
import log from './logger.js';          // any name you like, no braces
import writeLog from './logger.js';     // the same function

Renaming and namespace imports

import { addGst as withTax } from './gst.js';  // rename on import
import * as gst from './gst.js';               // everything as one object
console.log(gst.GST_RATE, withTax(100));

Using modules in the browser and in Node

• Browser: <script type="module" src="app.js"></script>. Module scripts run in strict mode, are deferred automatically, and the import paths need the file extension (./gst.js).
• Node.js: files ending in .mjs are ES modules, or set "type": "module" in package.json to make every .js file an ES module.
• Imports are read before the code runs, so they must be at the top level of the file, not inside an if.
• An imported binding is read-only: you cannot assign GST_RATE = 5 in the importing file.

CommonJS: the older Node format

// gst.cjs (CommonJS)
const GST_RATE = 18;
function addGst(a) { return Math.round(a * 1.18); }
module.exports = { GST_RATE, addGst };

// app.cjs
const { addGst } = require('./gst.cjs');

Dynamic import()

import('./charts.js') is a function-like expression that loads a module LATER and returns a promise. Use it to load heavy code only when it is needed, for example the chart library only when the user opens the reports page.