#21 JavaScript Code Snippets: Modules (import/export, named exports, default exports, dynamic import, module behavior)

// math.js
export const num = 10;

// app.js
import { num }
from "./math.js";

console.log(num);

Named exports are imported using curly braces.

// math.js
export const a = 5;
export const b = 10;

// app.js
import {
 a,
 b
}
from "./math.js";

console.log(a + b);

Both named exports are imported successfully.

// user.js
export default "JS";

// app.js
import user
from "./user.js";

console.log(user);

Default exports are imported without braces.

// user.js
export default "React";

// app.js
import value
from "./user.js";

console.log(value);

The imported variable name can be anything for default exports.

// math.js
export const num = 20;

// app.js
import {
 num
}
from "./math.js";

console.log(
 typeof num
);

num is a numeric export.

// utils.js
export function greet() {
 return "Hello";
}

// app.js
import {
 greet
}
from "./utils.js";

console.log(
 greet()
);

Functions can be exported and imported.

// user.js
const name = "JS";

export {
 name
};

// app.js
import {
 name
}
from "./user.js";

console.log(name);

Variables can be exported later using export {}.

// math.js
export default 100;

// app.js
import score
from "./math.js";

console.log(
 score + 1
);

The imported value is a number.

// data.js
export const arr =
 [1,2,3];

// app.js
import {
 arr
}
from "./data.js";

console.log(
 arr.length
);

The imported array contains 3 elements.

// config.js
export default {
 theme: "dark"
};

// app.js
import config
from "./config.js";

console.log(
 config.theme
);

Objects can be exported as default values.

// math.js
export const num = 10;

// app.js
import {
 num as value
}
from "./math.js";

console.log(value);

Named imports can be aliased.

// user.js
export default "JS";

// app.js
import person
from "./user.js";

console.log(
 person.toUpperCase()
);

toUpperCase keeps JS uppercase.

// data.js
export const obj = {
 id: 1
};

// app.js
import {
 obj
}
from "./data.js";

console.log(
 obj.id
);

Imported objects behave normally.

// utils.js
export function add(
 a,
 b
) {
 return a + b;
}

// app.js
import {
 add
}
from "./utils.js";

console.log(
 add(2,3)
);

The imported function executes normally.

// user.js
export default function() {
 return "Hello";
}

// app.js
import greet
from "./user.js";

console.log(
 greet()
);

Default-exported functions can be imported and invoked directly.

// math.js
export const a = 10;

export default 20;

// app.js
import value,
{
 a
}
from "./math.js";

console.log(
 value + a
);

Default and named exports can be imported together.

// math.js
export const x = 5;
export const y = 10;

// app.js
import * as math
from "./math.js";

console.log(
 math.x + math.y
);

import * as creates a namespace object.

// math.js
export const num = 10;

// app.js
import * as math
from "./math.js";

console.log(
 typeof math
);

Namespace imports are objects.

// math.js
export const num = 50;

// app.js
import * as math
from "./math.js";

console.log(
 math.num
);

Named exports become properties on the namespace object.

// user.js
export default "JS";

// app.js
import * as user
from "./user.js";

console.log(
 user.default
);

Default exports appear under the default property.

// user.js
export const name =
 "React";

// app.js
import {
 name as userName
}
from "./user.js";

console.log(
 userName
);

Aliases rename imported bindings.

// math.js
export const num = 10;

// index.js
export {
 num
}
from "./math.js";

// app.js
import {
 num
}
from "./index.js";

console.log(num);

Modules can re-export values.

// math.js
export const a = 1;
export const b = 2;

// index.js
export * from "./math.js";

// app.js
import {
 a,
 b
}
from "./index.js";

console.log(
 a + b
);

export * re-exports named exports.

// user.js
export default "JS";

// index.js
export {
 default
}
from "./user.js";

// app.js
import value
from "./index.js";

console.log(value);

Default exports can be re-exported.

// math.js
export const num = 10;

// app.js
import * as math
from "./math.js";

console.log(
 "num" in math
);

Namespace objects contain exported members.

// utils.js
export function add() {
 return 1;
}

// app.js
import * as utils
from "./utils.js";

console.log(
 typeof utils.add
);

Exported functions remain functions.

// data.js
export const arr =
 [1,2];

// app.js
import * as data
from "./data.js";

console.log(
 data.arr.length
);

Arrays are accessed through namespace properties.

// user.js
export default {
 name: "JS"
};

// app.js
import * as user
from "./user.js";

console.log(
 user.default.name
);

Default export is stored under default.

// math.js
export const a = 10;

// app.js
import {
 a
}
from "./math.js";

console.log(
 typeof a
);

Imported bindings preserve their original types.

// math.js
export default 100;

// app.js
import value
from "./math.js";

console.log(
 typeof value
);

The default export is a number.

// math.js
export const num = 10;

// app.js
import("./math.js")
 .then(module => {
   console.log(
    module.num
   );
 });

Dynamic import returns a Promise containing the module object.

// user.js
export default "JS";

// app.js
import("./user.js")
 .then(module => {
   console.log(
    module.default
   );
 });

Default exports are available through module.default.

// math.js
export const num = 20;

// app.js
const mod =
 await import(
  "./math.js"
 );

console.log(
 mod.num
);

Top-level await can be used inside ES modules.

// config.js
console.log(
 "Loaded"
 );

// app.js
import "./config.js";

Modules can be imported only for their side effects.

// counter.js
export let count = 0;

count++;

// app.js
import {
 count
}
from "./counter.js";

console.log(count);

Module code executes before imports are used.

// math.js
export let value = 1;

setTimeout(() => {
 value = 2;
}, 1000);

// app.js
import {
 value
}
from "./math.js";

ES Modules use live bindings, not copied values.

// math.js
console.log(
 "Math Loaded"
 );

export const x = 1;

// app.js
import "./math.js";
import "./math.js";

A module executes only once.

// data.js
export const arr =
 [1,2];

// app.js
import("./data.js")
 .then(module => {
   console.log(
    module.arr.length
   );
 });

Dynamic imports expose named exports.

// user.js
export default {
 name: "JS"
};

// app.js
import("./user.js")
 .then(module => {
   console.log(
    module.default
      .name
   );
 });

Default-exported objects are accessed through default.

// app.js
import("./math.js");

console.log(
 "Done"
);

Dynamic import is asynchronous.

// math.js
export const a = 10;

// app.js
import * as math
from "./math.js";

console.log(
 Object.keys(math)
   .length
);

The namespace object contains exported members.

// math.js
export default 5;

// app.js
import * as math
from "./math.js";

console.log(
 math.default
);

Default exports appear as the default property.

// math.js
export const x = 1;

// app.js
import {
 x
}
from "./math.js";

console.log(
 typeof x
);

Imported values retain their original type.

// utils.js
export function add() {}

import {
 add
}
from "./utils.js";

console.log(
 typeof add
);

Exported functions remain functions after import.

// config.js
console.log(
 "Loaded"
 );

export const x = 1;

// app.js
import "./config.js";
import {
 x
}
from "./config.js";

A module is evaluated only once regardless of how many times it is imported.