ES6 이전에는 JS 자체의 Module 시스템이 존재하지 않았다.

Module

• 하나의 파일에 모든 코드를 작성하면, 실행은 하지 않더라도, 엔진은 해석을 한다. 메모리를 차지하므로 비효율적이다.
• Module은 파일을 분리하여 필요한 시점에 필요한 것을 가져와서 해석하고 실행하려는 것이다.
• Module을 파일이라고 확정 짓긴 어렵지만, 구조 측면에서 대부분 하나의 파일이 Module이다.
• 함수와 오브젝트를 분리하는 것이 바탕이므로 Module 파일은 되도록 작아야 한다.

.mjs 확장자

V8 엔진에서는 모듈 파일의 확장자를 .mjs로 하기를 추천한다. 그 이유는 다음과 같다.

1. 가독성의 이유다. 다른 사람이 프로젝트 디렉토리를 볼 때, .mjs 파일 일반적인 스크립트 파일이 아니라, 모듈임을 쉽게 파악할 수 있다.
2. .mjs파일은 Node.js와 같은 런타임에 의해 "module"로서 파싱되며, Babel과 같은 툴로 빌드된다.

.mjs 확장자 배포시 주의할 점

만약 .mjs파일을 배포하려고 할 때는 Content-Type : text/javascript 헤더가 필요하다.

Module 코드 형태

// file : aaa.mjs
export function getPoint(id) {
  return id + 100;
}

// file : bbb.mjs
import { getPoint } from "./aaa.mjs";
console.log(getPoint(123123));

export 키워드

• 외부로 보내 줄 함수와 오브젝트를 선언한다.
• export되는 모듈은 <script> 태그에 명시해주지 않아도 된다. import하는 모듈에서 가져다 쓰기 때문이다.

import 키워드

• export로 선언된 mjs 파일을 가져와서 오브젝트와 함수를 사용한다.
• import 하는 모듈은 <script> 태그에 명시해줘야 한다.
• <script type=module src="./bbb.mjs"
  html 파일에 module 파일을 작성하는 방법이다. type = module을 작성하면 defer 가 기본으로 동작한다.

Module 특징

Module 특징 (1): Scope

• Mdoule 코드는 "use strict" 환경에서 실행된다.
• 다른 파일에서 모듈의 변수와 함수를 사용할 수 없다. Module 마다 별도의 스코프를 갖기 때문이다.(window Object를 스코프로 갖지 않는다.) 모듈에 있는 코드를 사용하려면 export하고 import 해야 한다.
  • <script>에 type=module을 작성하면, 모듈마다 각자의 스코프를 갖게 된다.
  • 파일이 다르더라도, 스크립트 파일의 가장 바깥족 변수와 함수들은 window를 Scope로 삼는다. 그러나 type=module을 통해 불러오는 스크립트들은 각자의 Scope를 갖게된다. - 따라서 사용하려면, import export를 해야한다.

만약 모듈의 변수가 window Scope를 갖게하려면 Window 오브젝트에 변수와 함수를 작성하면 된다. widnow.obj = {}

Module 특징 (2) : 상태 유지

• import를 두 번 하더라도, 값이 초기화 되지 않고, 전에 사용한 값이 유지된다.

// file : keep.mjs
export const point = {
  value: "초깃값",
};

// file : first.mjs
import { point } from "./keep.mjs";
console.log(point); //=> "초깃값"
point.value = "값 변경";

// file : second.mjs
import { point } from "./keep.mjs";
console.log(point); //=> "값 변경"

Module 특징 (3) : this 참조

• 글로벌 오브젝트에서 this는 window를 참조한다.
• 그러나 type=module로 참조하는 module 파일에서 this 값은 undefined다.