The Module Concept

Slide navigation: Forward with space bar, →, or PgDn. Backwards with ← or PgUp.

What is a Module?

Public (exported) and private features.
Manage name conflicts:
- Names of public features are unique.
- Names of private features don't clash.
Encapsulate private features.
- Protect private features from being accessed.
- Allow reimplementation that changes/removes private features.
Make requirements explicit.
Not a class.
- Can only have one instance.
Intended for “programming in the large”.

ECMAScript Modules

Part of the language standard (ES6)
Improves upon:
- Ad-hoc approaches (closures as namespaces)
- Common.js/node.js modules (synchronous)
- AMD (Asynchronous Module Definition) such as require.js
Each file is a separate module.
Module dependencies are determined statically (without executing the modules).
Cyclic dependencies are supported.
Modules are loaded asynchronously.

Imports

Default Imports

A module exports one or more features.
- Each exported feature is a variable holding a JavaScript value.
- Typically a function or class (i.e. constructor function).
- Can also be an object, array, or primitive value.
A module is allowed to tag one feature as default

Syntax favors importing the default feature:

import CaesarCipher from 'modules/caesar.js'

You can give any name you like to the imported feature:
```
import CC from 'modules/caesar.js'
```
The module name is a string with a file name or URL that the module loader can locate.
(Uncommon) Can run import without importing anything, just to execute the module body:
```
import 'app/init.js'
```

Named Imports

A module can specify named features in addition to or instead of the default.

Import by name:

import { encrypt, decrypt } from 'modules/caesar.js'

You need braces if you import a single non-default feature:
```
import { encrypt } from 'modules/caesar.js'
```

You can (and often should) rename the imported features:

import { encrypt as caesarEncrypt, decrypt as caesarDecrypt } from 'modules/caesar.js'

Or pour all exported named features into an object:
```
import * as CaesarCipherTools from 'modules/caesar.js'
```
- Use as CaesarCipherTools.encrypt, CaesarCipherTools.decrypt
- Why didn't the module provider put them all into a default object?

Can import both default and named features:

import CaesarCipher, { encrypt, decrypt } ...
import CaesarCipher, { encrypt as caesarEncrypt, decrypt as caesarDecrypt} ...
import CaesarCipher, * as CaesarCipherTools ...

Dynamic Imports

Statically imported modules are loaded from fixed source.
Stage 3 proposal to allow dynamic source.

import yields a promise that is fulfilled when the module is loaded:

import(`plugins/${action}.js`)
  .then(module => {
    module.feature(args)
    ...
  })

Or in an async function:

const module = await import(`plugins/${action}.js`)

Not a function, but a form—like super
Works in both scripts and modules.

Exports

Default Exports

A module consists of JavaScript statements that are executed once, when the module is loaded.
Declarations of variables, functions, classes.
One declaration can be tagged as export default
```
export default class Cipher { ... }
```

Alternatively, tag one value (!) as export default

export default class { // No need to name it if you don't want to
  encrypt(key) { ... }
  decrypt(key) { ... }
}

Named Exports

You can tag any number of declarations with export:

export const defaultKey = 3
export function encrypt(key) { ... }
export class KeyGenerator { ... }

Alternatively, you can provide a clause with the names of the exported items:

const defaultKey = 3
function encrypt(key) { ... }
class KeyGenerator { ... }
...
export { defaultKey, encryt, KeyGenerator }

Reexporting

You can export items from another module:

export { randInt, randDouble } from 'modules/random.js' 
export { randInt as randomInteger } from 'modules/random.js' 
export * from 'modules.random.js'

Reexport the default feature:

export { default } from 'modules/stringutil.js'
export { default as StringUtil } from 'modules/stringutil.js'

Reexport another feature as the default:

export { Random as default } from 'modules/random.js'

Miscellaneous Module Facts

Module code must be marked as “modular”.
- In browser, <script type="module" src="modules/caesar.js"></script>
- In Node.js, mjs extension, package.json "type": "module", --input-type=module
The code inside modules always executes in strict mode.
The module scope is not the same as the “global scope” of the browser/node.js
import/export are always at top level to facilitate static analysis
- Except dynamic imports
export exports variables, not values.
- In cyclic dependencies, the variables might not get filled right away.
- Imports read the variables but can't change them.
Stage 3 proposal for import.meta—metadata for the current module, such as its source URL.