javascript
examples
examples.js⚡javascript
// ╔══════════════════════════════════════════════════════════════════════════════╗
// ║ ES MODULES SYNTAX ║
// ║ Modern JavaScript Module System ║
// ╚══════════════════════════════════════════════════════════════════════════════╝
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ ES MODULES OVERVIEW │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ES Modules (ESM) = Native JavaScript module system (ES2015+) │
│ │
│ ┌──────────────┐ import/export ┌──────────────┐ │
│ │ module.js │ ◄─────────────────► │ main.js │ │
│ │ │ │ │ │
│ │ export │ │ import │ │
│ │ functions, │ │ what you │ │
│ │ classes, │ │ need │ │
│ │ variables │ │ │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ Key Features: │
│ • Static structure (analyzed at compile time) │
│ • Tree-shakeable (dead code elimination) │
│ • Asynchronous loading │
│ • Strict mode by default │
│ • Own scope (no global pollution) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// ════════════════════════════════════════════════════════════════════════════════
// 1. NAMED EXPORTS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ NAMED EXPORTS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Export specific named bindings that consumers import by exact name │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ Inline Export │ Export List │ │
│ ├───────────────────────────────────┼────────────────────────────────────┤ │
│ │ export const PI = 3.14159; │ const PI = 3.14159; │ │
│ │ export function add(a, b) {...} │ function add(a, b) {...} │ │
│ │ export class Calculator {...} │ export { PI, add, Calculator }; │ │
│ └───────────────────────────────────┴────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// --- Inline Named Exports ---
// Each declaration can be exported individually
export const PI = 3.14159;
export const E = 2.71828;
export const GOLDEN_RATIO = 1.61803;
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export function multiply(a, b) {
return a * b;
}
export function divide(a, b) {
if (b === 0) throw new Error('Division by zero');
return a / b;
}
export class Calculator {
constructor() {
this.result = 0;
}
add(n) {
this.result += n;
return this;
}
subtract(n) {
this.result -= n;
return this;
}
multiply(n) {
this.result *= n;
return this;
}
divide(n) {
if (n === 0) throw new Error('Division by zero');
this.result /= n;
return this;
}
clear() {
this.result = 0;
return this;
}
getResult() {
return this.result;
}
}
// --- Export List (Bottom of File) ---
// Define first, export later
const VERSION = '1.0.0';
const AUTHOR = 'JavaScript Module';
function power(base, exponent) {
return Math.pow(base, exponent);
}
function squareRoot(n) {
if (n < 0) throw new Error('Cannot calculate square root of negative number');
return Math.sqrt(n);
}
// Export list at bottom of file
export { VERSION, AUTHOR, power, squareRoot };
// ════════════════════════════════════════════════════════════════════════════════
// 2. RENAMING EXPORTS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ RENAMING EXPORTS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Use 'as' keyword to export under different names │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ // Internal name → External name │ │
│ │ export { internalName as publicName } │ │
│ │ │ │
│ │ // Example: │ │
│ │ function calculateSum(arr) {...} │ │
│ │ export { calculateSum as sum } // Exported as 'sum' │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Internal function names (more descriptive)
function calculateArithmeticMean(numbers) {
const sum = numbers.reduce((acc, n) => acc + n, 0);
return sum / numbers.length;
}
function calculateStandardDeviation(numbers) {
const mean = calculateArithmeticMean(numbers);
const squaredDiffs = numbers.map((n) => Math.pow(n - mean, 2));
return Math.sqrt(calculateArithmeticMean(squaredDiffs));
}
function calculateFactorial(n) {
if (n < 0) throw new Error('Factorial not defined for negative numbers');
if (n <= 1) return 1;
return n * calculateFactorial(n - 1);
}
// Export with shorter, public-facing names
export {
calculateArithmeticMean as mean,
calculateStandardDeviation as stdDev,
calculateFactorial as factorial,
};
// ════════════════════════════════════════════════════════════════════════════════
// 3. DEFAULT EXPORTS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ DEFAULT EXPORTS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Each module can have ONE default export │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ // Exporting │ // Importing │ │
│ ├──────────────────────────────────┼──────────────────────────────────────┤ │
│ │ export default function() {} │ import anyName from './module' │ │
│ │ export default class {} │ // No braces needed! │ │
│ │ export default expression; │ // Can use any name │ │
│ └──────────────────────────────────┴──────────────────────────────────────┘ │
│ │
│ Default Export vs Named Export: │
│ ┌──────────────────────────┬──────────────────────────────────────────────┐ │
│ │ Default │ Named │ │
│ ├──────────────────────────┼──────────────────────────────────────────────┤ │
│ │ One per module │ Multiple per module │ │
│ │ Import without braces │ Import with braces │ │
│ │ Any import name │ Must match export name (or use 'as') │ │
│ │ For "main" thing │ For utilities, constants, helpers │ │
│ └──────────────────────────┴──────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Example: Default export a class
class MathUtility {
static add(a, b) {
return a + b;
}
static subtract(a, b) {
return a - b;
}
static multiply(a, b) {
return a * b;
}
static divide(a, b) {
if (b === 0) throw new Error('Division by zero');
return a / b;
}
static power(base, exp) {
return Math.pow(base, exp);
}
static sqrt(n) {
return Math.sqrt(n);
}
static abs(n) {
return Math.abs(n);
}
static round(n, decimals = 0) {
const factor = Math.pow(10, decimals);
return Math.round(n * factor) / factor;
}
}
// NOTE: In a real file, you'd use: export default MathUtility;
// Can't use in same file with other examples, showing syntax only
// Default export can be anonymous
// export default function(a, b) { return a + b; }
// export default class { constructor() {} }
// ════════════════════════════════════════════════════════════════════════════════
// 4. MIXED EXPORTS (Default + Named)
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ MIXED EXPORTS (Default + Named) │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Combine default and named exports in one module │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ // Module: lodash-like utility library │ │
│ │ │ │
│ │ // Default export: main utility object │ │
│ │ export default { │ │
│ │ chunk, compact, flatten │ │
│ │ }; │ │
│ │ │ │
│ │ // Named exports: individual functions │ │
│ │ export { chunk, compact, flatten }; │ │
│ │ │ │
│ │ // Importing: │ │
│ │ import _ from 'lodash'; // Default │ │
│ │ import { chunk } from 'lodash'; // Named │ │
│ │ import _, { chunk } from 'lodash'; // Both │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Utility functions
export function chunk(array, size) {
const result = [];
for (let i = 0; i < array.length; i += size) {
result.push(array.slice(i, i + size));
}
return result;
}
export function compact(array) {
return array.filter(Boolean);
}
export function flatten(array, depth = 1) {
return array.flat(depth);
}
export function uniq(array) {
return [...new Set(array)];
}
export function groupBy(array, key) {
return array.reduce((result, item) => {
const groupKey = typeof key === 'function' ? key(item) : item[key];
(result[groupKey] = result[groupKey] || []).push(item);
return result;
}, {});
}
// In a real module file:
// export default { chunk, compact, flatten, uniq, groupBy };
// ════════════════════════════════════════════════════════════════════════════════
// 5. IMPORT SYNTAX
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ IMPORT SYNTAX │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ IMPORT TYPE │ SYNTAX │ │
│ ├───────────────────────────┼─────────────────────────────────────────────┤ │
│ │ Named imports │ import { a, b } from './module.js' │ │
│ │ Renamed import │ import { a as alias } from './module.js' │ │
│ │ Default import │ import MyDefault from './module.js' │ │
│ │ Default + Named │ import Def, { a, b } from './module.js' │ │
│ │ Namespace import │ import * as Module from './module.js' │ │
│ │ Side-effect only │ import './module.js' │ │
│ └───────────────────────────┴─────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// These are examples of import syntax (would be at top of file normally):
/*
// Named imports - import specific exports
import { add, subtract, multiply } from './math.js';
// Rename on import to avoid conflicts
import { add as addNumbers, subtract as subtractNumbers } from './math.js';
// Default import - can use any name
import Calculator from './calculator.js';
import Calc from './calculator.js'; // Same thing, different name
// Default + Named together
import Calculator, { add, PI } from './calculator.js';
// Namespace import - all exports as object
import * as MathUtils from './math.js';
// Usage: MathUtils.add(1, 2), MathUtils.PI
// Side-effect import (runs module code, no bindings)
import './polyfills.js';
import './styles.css'; // Common in bundlers
*/
// ════════════════════════════════════════════════════════════════════════════════
// 6. DYNAMIC IMPORTS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ DYNAMIC IMPORTS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Load modules on demand using import() function │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Static Import (Top of file) │ Dynamic Import (Runtime) │ │
│ ├─────────────────────────────────┼───────────────────────────────────────┤ │
│ │ import { fn } from './mod.js' │ const mod = await import('./mod.js')│ │
│ │ │ mod.fn() │ │
│ │ • Loaded before execution │ • Loaded when needed │ │
│ │ • Always at top level │ • Can be conditional │ │
│ │ • Synchronous hoisting │ • Returns Promise │ │
│ │ • Better for tree-shaking │ • Code-splitting friendly │ │
│ └─────────────────────────────────┴───────────────────────────────────────┘ │
│ │
│ Use Cases: │
│ • Lazy loading (load when needed) │
│ • Conditional loading (based on user action) │
│ • Route-based code splitting │
│ • Feature detection loading │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Dynamic import example - Lazy loading
export async function loadMathModule() {
console.log('Loading math module on demand...');
// import() returns a Promise
const mathModule = await import('./math.js');
// Access exports from the module
console.log('PI:', mathModule.PI);
console.log('Add:', mathModule.add(2, 3));
return mathModule;
}
// Conditional loading based on feature
export async function loadPolyfill() {
// Only load if browser doesn't support feature
if (!Array.prototype.flat) {
const { flat } = await import('./polyfills/array-flat.js');
Array.prototype.flat = flat;
}
}
// Route-based code splitting
export async function loadRoute(routeName) {
const routes = {
home: () => import('./pages/home.js'),
about: () => import('./pages/about.js'),
contact: () => import('./pages/contact.js'),
dashboard: () => import('./pages/dashboard.js'),
};
const loader = routes[routeName];
if (!loader) {
throw new Error(`Unknown route: ${routeName}`);
}
const module = await loader();
return module.default; // Assuming default export is the component
}
// Error handling with dynamic imports
export async function safeImport(modulePath) {
try {
const module = await import(modulePath);
return { success: true, module };
} catch (error) {
console.error(`Failed to load module: ${modulePath}`, error);
return { success: false, error };
}
}
// Dynamic import with destructuring
export async function loadUtilities() {
// Destructure directly from dynamic import
const { add, subtract, multiply, divide } = await import('./math.js');
return { add, subtract, multiply, divide };
}
// ════════════════════════════════════════════════════════════════════════════════
// 7. RE-EXPORTS (Aggregating Modules)
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ RE-EXPORTS (Barrel Files) │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Re-export from other modules without importing locally │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ // utils/index.js (barrel file) │ │
│ │ │ │
│ │ // Re-export everything from another module │ │
│ │ export * from './math.js'; │ │
│ │ │ │
│ │ // Re-export specific items │ │
│ │ export { format, parse } from './date.js'; │ │
│ │ │ │
│ │ // Re-export with rename │ │
│ │ export { format as formatDate } from './date.js'; │ │
│ │ │ │
│ │ // Re-export default as named │ │
│ │ export { default as Calculator } from './Calculator.js'; │ │
│ │ │ │
│ │ // Re-export as namespace │ │
│ │ export * as StringUtils from './strings.js'; │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ Benefits: │
│ • Single entry point for multiple modules │
│ • Cleaner import paths │
│ • Encapsulate internal structure │
│ • Easy to reorganize internals │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Example: Barrel file structure
/*
// File: utils/index.js
// Re-export all from math module
export * from './math.js';
// Re-export specific functions from string utils
export { capitalize, trim, truncate } from './string.js';
// Re-export with renaming to avoid conflicts
export { format as formatDate } from './date.js';
export { format as formatNumber } from './number.js';
// Re-export default export as named export
export { default as Logger } from './Logger.js';
export { default as Config } from './Config.js';
// Re-export as namespace (ES2020+)
export * as ArrayUtils from './array.js';
export * as ObjectUtils from './object.js';
// Now consumers can import from single path:
// import { add, subtract, capitalize, Logger, ArrayUtils } from './utils';
*/
// Simulated barrel file exports
export const utilsVersion = '2.0.0';
// ════════════════════════════════════════════════════════════════════════════════
// 8. MODULE FEATURES & BEHAVIORS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ ES MODULE FEATURES & BEHAVIORS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ Feature │ Behavior │ │
│ ├───────────────────────┼─────────────────────────────────────────────────┤ │
│ │ Strict Mode │ Always enabled (no need for 'use strict') │ │
│ │ Top-level this │ undefined (not window/global) │ │
│ │ Scope │ Module scope (not global) │ │
│ │ Execution │ Deferred (after HTML parsing) │ │
│ │ Singleton │ Cached after first load │ │
│ │ Live Bindings │ Imports are live references │ │
│ │ Hoisting │ Imports hoisted to top │ │
│ │ CORS │ Required for cross-origin modules │ │
│ └───────────────────────┴─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Live bindings demonstration
let counter = 0;
export function getCounter() {
return counter;
}
export function incrementCounter() {
counter++;
return counter;
}
// When imported, getCounter() will always return current value
// This is because ES modules use "live bindings"
/*
// In another file:
import { getCounter, incrementCounter } from './counter.js';
console.log(getCounter()); // 0
incrementCounter();
console.log(getCounter()); // 1 (live binding reflects change)
*/
// Module singleton demonstration
export const moduleState = {
initialized: false,
data: null,
init(data) {
if (this.initialized) {
console.log('Module already initialized');
return;
}
this.data = data;
this.initialized = true;
console.log('Module initialized with:', data);
},
};
// This state is shared across ALL imports of this module
// (modules are cached and executed only once)
// ════════════════════════════════════════════════════════════════════════════════
// 9. BROWSER MODULE USAGE
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ BROWSER MODULE USAGE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Using ES Modules in HTML: │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ <!-- Module script --> │ │
│ │ <script type="module" src="main.js"></script> │ │
│ │ │ │
│ │ <!-- Inline module --> │ │
│ │ <script type="module"> │ │
│ │ import { add } from './math.js'; │ │
│ │ console.log(add(2, 3)); │ │
│ │ </script> │ │
│ │ │ │
│ │ <!-- Fallback for older browsers --> │ │
│ │ <script nomodule src="fallback.js"></script> │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ Module vs Classic Script: │
│ ┌──────────────────────┬───────────────────────────────────────────────────┐ │
│ │ <script> │ <script type="module"> │ │
│ ├──────────────────────┼───────────────────────────────────────────────────┤ │
│ │ Global scope │ Module scope │ │
│ │ Executed immediately│ Deferred by default │ │
│ │ Blocks parsing │ Doesn't block │ │
│ │ Can access window │ this = undefined │ │
│ │ No CORS required │ CORS required │ │
│ │ Classic variables │ Strict mode │ │
│ └──────────────────────┴───────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// ════════════════════════════════════════════════════════════════════════════════
// 10. PRACTICAL PATTERNS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ PRACTICAL PATTERNS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Common module organization patterns in real projects │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Pattern 1: Feature module with types
export const UserModule = {
// Types/Constants
ROLES: {
ADMIN: 'admin',
USER: 'user',
GUEST: 'guest',
},
// Factory function
createUser(name, role = 'user') {
return {
id: Date.now(),
name,
role,
createdAt: new Date(),
};
},
// Validation
isValid(user) {
return (
user &&
typeof user.name === 'string' &&
Object.values(this.ROLES).includes(user.role)
);
},
// Serialization
toJSON(user) {
return JSON.stringify(user);
},
fromJSON(json) {
return JSON.parse(json);
},
};
// Pattern 2: Service module
export const ApiService = {
baseURL: 'https://api.example.com',
async get(endpoint) {
const response = await fetch(`${this.baseURL}${endpoint}`);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return response.json();
},
async post(endpoint, data) {
const response = await fetch(`${this.baseURL}${endpoint}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return response.json();
},
};
// Pattern 3: Configuration module
export const Config = Object.freeze({
APP_NAME: 'My Application',
VERSION: '1.0.0',
API_URL: 'https://api.example.com',
DEBUG: process.env?.NODE_ENV !== 'production',
features: Object.freeze({
darkMode: true,
notifications: true,
analytics: true,
}),
});
// ════════════════════════════════════════════════════════════════════════════════
// 11. IMPORT ASSERTIONS (FUTURE)
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ IMPORT ASSERTIONS (Emerging Feature) │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Specify expected module type for security and clarity: │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ // JSON import (requires assertion) │ │
│ │ import data from './data.json' assert { type: 'json' }; │ │
│ │ │ │
│ │ // CSS import │ │
│ │ import styles from './styles.css' assert { type: 'css' }; │ │
│ │ │ │
│ │ // Dynamic import with assertion │ │
│ │ const config = await import('./config.json', { │ │
│ │ assert: { type: 'json' } │ │
│ │ }); │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ Note: Syntax may change. Currently using 'with' keyword in some browsers: │
│ import data from './data.json' with { type: 'json' }; │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// ════════════════════════════════════════════════════════════════════════════════
// 12. COMPLETE MODULE EXAMPLE
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ COMPLETE MODULE EXAMPLE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ A complete, production-ready module structure │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// ─── EventEmitter Module ───────────────────────────────────────────────────────
// Private via closure (not exported)
const privateListeners = new WeakMap();
// Named export: EventEmitter class
export class EventEmitter {
constructor() {
privateListeners.set(this, new Map());
}
on(event, callback) {
const listeners = privateListeners.get(this);
if (!listeners.has(event)) {
listeners.set(event, new Set());
}
listeners.get(event).add(callback);
return this;
}
off(event, callback) {
const listeners = privateListeners.get(this);
if (listeners.has(event)) {
listeners.get(event).delete(callback);
}
return this;
}
emit(event, ...args) {
const listeners = privateListeners.get(this);
if (listeners.has(event)) {
for (const callback of listeners.get(event)) {
callback(...args);
}
}
return this;
}
once(event, callback) {
const onceWrapper = (...args) => {
this.off(event, onceWrapper);
callback(...args);
};
return this.on(event, onceWrapper);
}
}
// Named export: helper functions
export function createEventEmitter() {
return new EventEmitter();
}
// Named export: constants
export const COMMON_EVENTS = {
READY: 'ready',
ERROR: 'error',
DATA: 'data',
COMPLETE: 'complete',
};
// If this were the main module file, we'd add:
// export default EventEmitter;
console.log(`
╔══════════════════════════════════════════════════════════════════════════════╗
║ ES MODULES SYNTAX - EXAMPLES COMPLETE ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ Covered Topics: ║
║ ✓ Named exports (inline & list) ║
║ ✓ Renaming exports ║
║ ✓ Default exports ║
║ ✓ Mixed exports ║
║ ✓ Import syntax variations ║
║ ✓ Dynamic imports ║
║ ✓ Re-exports & barrel files ║
║ ✓ Module features & behaviors ║
║ ✓ Browser usage ║
║ ✓ Practical patterns ║
║ ✓ Import assertions ║
║ ║
║ Remember: ║
║ • Use .js extension in imports (for browsers) ║
║ • Modules are strict mode by default ║
║ • Imports are hoisted ║
║ • Modules are singletons (cached) ║
║ • Exports are live bindings ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
`);