> For the complete documentation index, see [llms.txt](https://xiaoyang-liu.gitbook.io/programming-notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaoyang-liu.gitbook.io/programming-notes/web-development/javascript-tutorial/the-javascript-language/chapter-13-modules.md).

# Chapter 13: Modules

## 13.1 Modules, introduction

A module is just a file. One script is one module.

* `export` keyword labels variables and functions that should be accessible from outside the current module.
* `import` allows the import of functionality from other modules.

```javascript
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
```

```javascript
import {sayHi} from './sayHi.js';
```

### Core module features

* Always “use strict”
* Module-level scope: top-level variables and functions from a module are not seen in other scripts.
* If the same module is imported into multiple other places, its code is executed only the first time. (Changes will share between importers.)
* The object `import.meta` contains the information about the current module.
* In a module, `this` is `undefined`.

### Browser-specific features

* Module scripts are deferred: Module scripts wait until the HTML document is fully ready and then run. (Relative order is maintained.)
* `async` works on inline scripts.

#### External scripts

* External scripts with the same `src` run only once.
* External scripts that are fetched from another origin require `CORS` headers. (`Access-Control-Allow-Origin`)
* Modules without any path are not allowed. (Example: `import {sayHi} from 'sayHi';`)

### Compatibility, “nomodule”

Old browsers do not understand `type="module"`. Scripts of an unknown type are just ignored. It’s possible to provide a fallback using the `nomodule` attribute.

```javascript
<script type="module">
  alert("Runs in modern browsers");
</script>

<script nomodule>
  alert("Modern browsers know both type=module and nomodule, so skip this")
  alert("Old browsers ignore script with unknown type=module, but execute this.");
</script>
```

### Build tools

Browser modules are rarely used in their “raw” form. We bundle them together with a special tool such as Webpack and deploy to the production server.

## 13.2 Export and Import

### Export before declarations

We can label any declaration as exported by placing export before it, be it a variable, function or a class.

### Import \*

```javascript
import * as say from './say.js';
```

However, we should explicitly list what we need to import?

* Modern build tools (webpack and others) bundle modules together and optimize them to speedup loading and remove unused stuff.
* Shorter names.
* Better overview of the code structure.

### Import “as”

Use `as` to import under different names.

```javascript
import {sayHi as hi, sayBye as bye} from './say.js';
```

### Export “as”

```javascript
export {sayHi as hi, sayBye as bye};
```

`hi` and `bye` are official names for outsiders, to be used in imports.

### Export default

Modules provide a special `export default` syntax to make the :one thing per module" structure way look better.

```javascript
export default class User {}

import User from './user.js';
```

`import` needs curly braces for named exports and doesn’t need them for the default one.

The exported entity may have no name.

### The “default” name

```javascript
// user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

// main.js
import {default as User, sayHi} from './user.js';

new User('John');
```

There’s a rule that imported variables should correspond to file names.

### Re-export

“Re-export” syntax `export ... from ...` allows to import things and immediately export them.

```javascript
// import login/logout and immediately export them
import {login, logout} from './helpers.js';
export {login, logout};
```

#### Re-exporting the default export

```javascript
export * from './user.js'; // to re-export named exports
export {default} from './user.js'; // to re-export the default export
```

## 13.3 Dynamic imports

### The import() expression

The `import(module)` expression loads the module and returns a promise that resolves into a module object that contains all its exports.

```javascript
let module = await import(modulePath);

let {hi, bye} = await import('./say.js');

let obj = await import('./say.js');
let say = obj.default;
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://xiaoyang-liu.gitbook.io/programming-notes/web-development/javascript-tutorial/the-javascript-language/chapter-13-modules.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.