Modules (Import/Export)

Modules (Import/Export) is a core JavaScript concept covering modules (Import/Export): JavaScript modules allow you to break up your This topic is essential for academic learning, board exam preparation, and developing optimized real-world code.

JavaScript modules allow you to break up your code into separate files. This makes it easier to maintain the code-base.

1. Exporting

You can export functions or variables from any file.

person.js

export const name = "Jesse";
export const age = 40;

export function greet() {
    return "Hello!";
}

Default Export

You can only have one default export in a file.

const message = () => "This is default";
export default message;

2. Importing

You can import modules into a file in two ways, based on if they are named exports or default exports.

main.js

import { name, age } from "./person.js";
import message from "./message.js"; // No curly braces for default

3. Usage in HTML

To use modules in HTML, you must set type="module" in the script tag.

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

Server Required

Modules only work when served via HTTP(s), not when opening file:// directly in the browser due to CORS policies.