Introduction to JavaScript Modules

The Big Idea

When programs grow, keeping all code in one file becomes unmanageable. Modules let you split code into separate files and connect them with import and export. This is how real JavaScript programs are structured.

Your Roadmap

Why modules?

Modularity means breaking a large thing into smaller, self-contained parts that each make sense on their own — and can be connected together.

The clearest example is Lego. Each brick is simple. The stud (the knob) and the anti-stud (the socket) let bricks connect. By plugging simple pieces together, you can build something far more complex than any single brick.

JavaScript modules work the same way:

• Each module is a file that does one focused thing
• export is the stud — it makes something available to other files
• import is the anti-stud — it pulls that thing into another file

This also reduces cognitive load. When all code is in one file, you have to hold the whole program in your head at once. When code is split into modules, you can think about one module at a time.

The syntax

Here is a simple example — two files connected with import and export:

encode.js — handles encoding logic:

// encode.js
export function encode(plaintext) {
  let codedText = ''
  for (let i = 0; i < plaintext.length; i++) {
    let cc = plaintext.charCodeAt(i) + 9
    codedText += String.fromCharCode(cc)
  }
  return codedText
}

main.js — uses the encode function:

// main.js
import { encode } from './encode.js'

const input = document.getElementById('PlainTextArea')
const output = document.getElementById('CodedText')

input.addEventListener('change', (event) => {
  const plaintext = input.value
  const codedText = encode(plaintext)
  output.textContent = codedText
})

index.html — loads the JavaScript as a module:

<!-- index.html -->
<textarea id="PlainTextArea"> </textarea>
<div id="CodedText"></div>
<script src="./main.js" type="module"></script>

The key is type="module" on the script tag. Without it, import and export will not work in the browser.

Exercises

Exercise 1

Create a folder with three files: index.html, main.js, and encode.js. Recreate the example above and view it in your browser.

Start a local server:

npx vite

Open the URL it logs to your terminal (usually http://localhost:5173/). Do not open the HTML file directly — import and export do not work over the file:// protocol.

Exercise 2 ◎ Optional

Add a second module called decode.js that reverses the encoding. Import and use it in main.js.

The Big Idea (revisited)

Modules are how real programs stay manageable. Instead of one giant file, you write small focused pieces and connect them with import and export — the same way Lego bricks connect to build something bigger than any single piece.

How to know you've nailed it