48. 모듈

48.1 모듈의 일반적 의미

---

• 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 의미함
• 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함

48.2 자바스크립트와 모듈

---

• 여러 개의 자바스크립트의 파일을 script태그로 로드하면 하나의 자바스크립트 파일 내에 있는 것 처럼 동작함

48.3 ES6모듈 (ESM)

---

• ES6에서 모듈 기능을 추가함
• script태그에 type='module' 어트리뷰트를 추가하고, 파일 확장자는 mjs사용을 권장

<script type='module' src='app.mjs'></script>

• 기본적으로 strict mode가 적용됨

48.3.1 모듈 스코프

• ESM은 독자적인 모듈 스코프를 가짐
• 모듈 내에서 var키워드로 선언한 변수는 전역변수가 아니며, window객체의 프로퍼티도 아님
• 모듈 내에서 선언한 식별자는 모듈 외부에서 참조할 수 없음

48.3.2 export키워드

• 모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 재사용할 수 있게 하려면 export키워드를 사용

// 변수를 export
export const pi = Math.PI;

// 함수를 export
export function square(x) {
  return x * x;
}

• export할 대상을 하나의 객체로 구성하여 한번에 export할 수 있음

const pi = Math.PI;

function square(x) {
  return x * x;
}

export { pi, square };

48.3.3 import 키워드

• 다른 모듈에서 export한 식별자를 자신의 모듈 스코프 내부로 로드하려면 import키워드를 사용함

import { pi, square, Person } from './lib.mjs';

• 하나의 이름으로 한번에 import할 수 있음. (식별자는 as뒤에 임의로 지정한 객체의 프로퍼티로 할당됨)

import * as lib from './lib.mjs';

• 모듈이 export한 식별자 이름을 변경하여 import할 수 잇음

import { pi as PI, square as sq, Person as P } from './lib.mjs';

• 모듈에서 하나의 값만 export한다면 default키워드를 사용할 수 있음

export default x => x * x;

• default키워드와 함께 export한 모듈은 {}없이 임의의 이름으로 import함

import square from './lib.mjs';