Modules

자바스크립트의 Module에 관한 개념 및 문법을 정리하였습니다.

---

< What are modules? >

Modules are reusable pieces of code in a file that can be exported and then imported for use in another file.

This modular strategy is called separation of concerns.

 

• Note: The words “module” and “file” are often used interchangably

 

 

---

< Implementations of Modules in JavaScript:  Node  vs  Browser  >

Before we dive in, it should be noted that there are multiple ways of implementing modules depending on the runtime environment in which your code is executed.

 

• In JavaScript, there are two runtime environments and each has a preferred module implementation:
  1. The Node runtime environment and the module.exports and require( ) syntax.
  2. The browser’s runtime environment and the ES6 import/export syntax.

 

 

---

< Modules in Node >

< Export >

- module.exports is an object that is built-in to the Node.js runtime environment. Other files can import this object.
- To export the module

Example)

/* converters.js */
function celsiusToFahrenheit(celsius) {
  return celsius * (9/5) + 32;
}
 
module.exports = celsiusToFahrenheit;
 
module.exports = function celsiusToFahrenheit(fahrenheit) {
  return (fahrenheit - 32) * (5/9);
};

 

< Import >

- To import the module
- The require( ) function accepts a string as an argument. That string provides the file path to the module you would like to import.

Example)

/* water-limits.js */
const converters = require('./converters.js');
 
const freezingPointC = 0;
const boilingPointC = 100;
 
const freezingPointF = converters.celsiusToFahrenheit(freezingPointC);
const boilingPointF = converters.celsiusToFahrenheit(boilingPointC);
 
console.log(`The freezing point of water in Fahrenheit is ${freezingPointF}`);
console.log(`The boiling point of water in Fahrenheit is ${boilingPointF}`);

: The module name(in this case, 'converters') can be anything you like

 

+. If there are more than two modules, You can use object destructuring to extract only the needed functions.

 

Example)

/* celsius-to-fahrenheit.js */
const { celsiusToFahrenheit } = require('./converters.js');
 
const celsiusInput = process.argv[2]; 
const fahrenheitValue = celsiusToFahrenheit(input);
 
console.log(`${celsiusInput} degrees Celsius = ${fahrenheitValue} degrees Fahrenheit`);

 

 

---

< Modules in Browser >

 

< Named Export >

- To export modules through the use of variables.

Example)

// Example 1
const specialty = 'special';
function isVegetarian() {
  // ~~~
}

export { specialty, isVegetarian }

// Example 2
export const specialty = 'special';
export function isVegetarian() {
  // ~~~
}

+. Export as : in Named export, to change the name of variables.

Example)

const specialty = 'special';
function isVegetarian() {
  // ~~~
}

export { specialty as chefsSpecial, isVegetarian as isVeg }

 

< Named Import >

- To import modules stored in a variable.
- The name of the imported module must be the same as the name of the exported module.

Example)

import { specialty, isVegetarian } from './menu';

+. Import as : in Named import, to import module with another name.

Example)

import { specialty as chefsSpecial, isVegetarian as isVeg } from './menu';

 

< Default Import & Export >

- To Export one module per file

Example)

const Menu = {'Kimchi', 'Pasta', 'Chiecken'};
export default Menu;

- In import file

Example)

// Example 1
import Menu from './menu.js';

// Example 2
import { default as Menu } from './menu.js';

: The module name(In this case, 'Menu') can be anything you like.

 

Note : To Applying the module to your HTML, use type='module' attribute in your <script> tag

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules

JavaScript modules - JavaScript | MDN

 

 

Reference : What are CJS, AMD, UMD, and ESM in JavaScript?

https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm

What the heck are CJS, AMD, UMD, and ESM in Javascript?