자바스크립트는 오랫동안 모듈 시스템이 없어서 코드를 구성하고 관리하는 것이 어려웠습니다. 하지만 최근에는 다양한 모듈 시스템이 등장하여 자바스크립트 코드를 구조화하고 재사용성을 높일 수 있게 되었습니다.

CommonJS

CommonJS는 서버 사이드 자바스크립트(Node.js)를 위해 개발된 모듈 시스템입니다. 모듈은 파일 하나에 하나의 모듈을 정의하며 module.exports를 사용하여 내보낼 수 있습니다. 또한 필요한 모듈은 require 함수를 통해 가져올 수 있습니다.

// math.js
const add = (a, b) => a + b;

// main.js
const math = require('./math'); // 모듈 가져오기
console.log(math.add(5, 10)); // 15

AMD

Asynchronous Module Definition(AMD)은 브라우저 환경에서 비동기로 모듈을 로딩하기 위해 사용되는 모듈 시스템입니다. 주로 RequireJS와 함께 사용되며, define 함수를 통해 모듈을 정의하고 require 함수를 사용하여 필요한 모듈을 가져올 수 있습니다.

// math.js
define([], function() {
  const add = (a, b) => a + b;
  return { add };
});

// main.js
require(['math'], function(math) {
  console.log(math.add(5, 10)); // 15
});

ES Modules(ESM)

ES Modules(ESM)는 ECMAScript 2015부터 표준으로 포함된 자바스크립트의 내장 모듈 시스템입니다. export 문으로 모듈을 내보내고 import 문으로 모듈을 가져올 수 있습니다.

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math'; // 모듈 가져오기
console.log(add(5, 10)); // 15

자바스크립트 모듈 시스템을 사용하면 코드를 모듈 단위로 구성하여 관리할 수 있습니다. 이를 통해 코드의 가독성을 향상시키고 재사용성을 높일 수 있으며, 모듈 간의 의존성을 명확하게 정의하여 충돌이나 혼란을 방지할 수 있습니다.

더 자세한 내용은 해당 모듈 시스템의 공식 문서를 참고하시기 바랍니다. 각 모듈 시스템은 자신만의 특징과 장단점을 가지고 있으므로, 프로젝트의 요구 사항에 맞게 선택해야 합니다.