36:["$","title",null,{"children":"What the ... JS Pt. 5 | Jing D | Observable"}] 3e:T503,md`

## Module - All exported identifiers must be explicitly exported by name, can’t programmatically loop through an array and export names in a data-driven way. - Named Exports (Zero or more exports per module) - Default Exports (One per module) - Modules are singletons. Even if a module is imported multiple times, only a single “instance” of it exists. - Imports and exports must be at the top level. structure of ES6 modules is static, can't conditionally import different modules - Module imports are hoisted - imports of a module are read-only views on the exported entities - default exports and unqualified named imports works in #ES2016 modules, unlike its predecessors - All of a module’s dependencies are loaded, parsed, and linked eagerly, before any module code runs. [HTML and Java script loading](https://flaviocopes.com/javascript-async-defer/) | | Script | Modules | | --- | --- |---- | |HTML element|< script >|< script type="module" >| |Default mode|non-strict|strict| |Top-level variables are|global|local to module| |Value of this at top level|window|undefined |Executed|synchronously|asynchronously| |Declarative imports (import statement)|no|yes| |Programmatic imports (Promise-based API)|yes|yes| |File extension|.js|.js| `3f:T4b4,md` ### Export
//export any top-level function, class, var, let, or const
export function f() {}
export class c {}
export let v1 = …, v2 = …
export const v1 = …, v2 = …
export var v1 = …, v2 = …

export { name1, name2, …, nameN };

// Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN };

// Exporting destructured assignments with renaming
export const { name1, name2: bar } = o;

// Default exports - default export is just another named export
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// Aggregating modules
export * from … ; //does not set the default export
export * as name1 from …; #ES2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

// Re-exporting
export { name1, name2 as myName2 } from 'src/other_module';
`40:[] 3a:{"id":"e99fb2d0c26c25ba","slug":"what-the-js-pt-5/2","title":"What the ... JS Pt. 5","thumbnail":"a12bccc7b158b7444ed683b419683ae09d0af79d5e193ad87c87934d329e0ef6","access_level":"public","create_time":"$D2020-08-19T04:42:35.610Z","update_time":"$D2020-09-01T03:23:07.903Z","view_time":null,"first_public_time":"$D2020-08-27T18:37:41.137Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d10f468021cb6169","login":"mystiquepanda","name":"Jing D","avatar_url":"https://avatars-next.observableusercontent.com/4cf5309591931daa3113ac391031aae6cd78ac18089619fd39c4a77f8eefd07e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":55,"publish_version":55,"role":null,"authored":false,"authors":[{"type":"individual","id":"41f898cb9b136929","login":"mystiquepanda","name":"Jing D","avatar_url":"https://avatars-next.observableusercontent.com/4cf5309591931daa3113ac391031aae6cd78ac18089619fd39c4a77f8eefd07e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"41f898cb9b136929","login":"mystiquepanda","name":"Jing D","avatar_url":"https://avatars-next.observableusercontent.com/4cf5309591931daa3113ac391031aae6cd78ac18089619fd39c4a77f8eefd07e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bd861e327ed5fcab","slug":"what-the-js","title":"What the ... JS","owner":{"id":"d10f468021cb6169","login":"mystiquepanda","name":"Jing D"}},"type":"notebook","body":{"titling":"auto","title":"What the ... JS Pt. 5","cells":[{"id":0,"value":"md`# What the ... JS Pt. 5\n**[ Module ]**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"toc({selector: \"h2,h3,h4,h5,h6\", heading: \"Table of Contents\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`\n### Import\n
\n// Default import
\n import localName from 'src/my_lib';
\n
\n// Namespace import: imports the module as an object (with one property per named export).
\n import * as my_lib from 'src/my_lib';
\n
\n// Named imports:
\n import { name1, name2 } from 'src/my_lib';
\n
\n// Rename imports:
\n import { name1 as localName1, name2 } from 'src/my_lib';
\n import { default as foo } from 'src/my_lib';
\n
\n// Empty import: only loads the module, doesn’t import anything.
\n// The first import executes the body of the module.
\n import 'src/my_lib';
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`\n### Illegal Imports & Exports\n
\n// Error, only from \"string\" is allowed
\nimport ... from getModuleName();
\n\n// Only one default per module
\nexport default const variable1 = 1, variable1 = 2, variable1 = 3;
\n
\n// Error, not allowed in if!
\nif(...) {
\n import ...;
\n}\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`\n
\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 35:null