This site is mobile accessible. Press the "Tap Here" button to use a different font-size.

Smartphone icons created by Freepik - Flaticon

8.2 JS Modules

Modules

JavaScript modules allow you to break up your code into separate files.
This makes it easier to maintain a code-base.
Modules are imported from external files with the import statement.
Modules also rely on type="module" in the <script> tag.

Example 1: JS Modules

<script type="module">
import message from "./message.js";
</script>

Export

Modules with functions or variables can be stored in any external file.
There are two types of exports: Named Exports and Default Exports.

Named Exports

Let us create a file named person.js, and fill it with the things we want to export.
You can create named exports two ways. In-line individually, or all at once at the bottom.

In-line individually:

person.js

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

All at once at the bottom:

person1.js

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

export {name, age};

Default Exports

Let us create another file, named message.js, and use it for demonstrating default export.
You can only have one default export in a file.

Example

message.js

const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};

export default message;

Import

You can import modules into a file in two ways, based on if they are named exports or default exports.
Named exports are constructed using curly braces. Default exports are not.

Import from named exports

Import named exports from the file person.js:

import { name, age } from "./person.js";

Try it yourself

Import from default exports

Import a default export from the file message.js:

import message from "./message.js";

Try it yourself

Note
Modules only work with the HTTP(s) protocol.
A web-page opened via the file:// protocol cannot use import / export.

JavaScript Fundamentals course home
Module 8. JavaScript Classes & Advanced Topics

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
JS Classes JS Class Methods part 1 JS Class Methods part 2 JS Modules Create Object from JSON String JS Debuggers The console.log() Method JS Debuggers The debugger Keyword JS Style Guide - Line Length JS Literal Constructors JS Variables JS Variables - Automatic Type Conversions JS Variables - NaN JS Comparisons JS Functions - Parameter Defaults End Your Switches with Defaults JS String Objects cannot be safely compared JS Objects cannot be compared JS Common JavaScript Mistakes JS Breaking a JavaScript Statement part 1 JS Breaking a JavaScript Statement part 2 JS Breaking a JavaScript Statement part 3 JS Breaking a Return Statement part a JS Breaking a Return Statement part b JS Breaking a Return Statement part c JS Breaking a Return Statement part d JS Breaking a Return Statement part 3f JS Accessing Arrays with Named Indexes part 1 JS Accessing Arrays with Named Indexes part 2 JS Objects - Undefined is Not Null JS Performance - Reduce DOM Access