모듈
모듈? 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드조각
세부사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다.
모듀른 파일 단위로 분리되어 있으며, 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한다.
(애플리케이션과 분리되어 개별적으로 존재하다가, 애플리케이션의 로드에 의해 일원이 된다.)기능별로 분리되어 작성되므로 코드 단위르 명확히 분리한다. 재사용성이 좋아서 효율성, 유지보수성을 높인다.
script 태그에 type= “module” 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.
ES6 모듈의 파일 확장자는 모듈임을 명확히 하기위해 mjs를 사용하도록 권장한다.
1
<script type="module" src="app.mjs"></script>
ES6 모듈의 단점
구형 브라우저는 ES6 모듈을 지원하지 않는다.
브라우저의 ES6 모듈 기능을 사용하더라도 트랜스파일링이나 번들링이 필요하다.
지원하지 않는 기능이 있다. (Bare import 등)
따라서 ES6 모듈기능보다는 Webpack 등의 모듈 번들러를 사용하는 것이 일반적이다.
1. 모듈 스코프
ES6 모듈 기능을 사용하지 않으면 분리된 자바스크립트 파일에 독자적인 스코프를 갖지 않고, 하나의 전역을 공유한다.
1 |
|
foo.js에서 선언한 변수 x와 bar.js에서 선언한 변수 x는 중복 선언되며 의도치않게 변수 x의 값이 덮어 써진다.
(하나의 전역 스코프를 갖기 때문이다.)ES6 모듈은 파일 자체의 스코프를 제공. 독자적인 모듈 스코프를 갖는다. 따라서 모듈 내에서 var 키워드로 선언한 변수는 더이상 전역변수가 아니며, window 객체의 프로퍼티도 아니다.
다른 모듈에서 선언한 변수는 모듈 외부에서 참조할 수 없다. (ReferenceError)
1
2
3
4
5// foo.mjs
var x = 'foo';
console.log(x); //foo
cnosole.log(window.x); // undifined
2. export 키워드
- 모듈 안에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 참조할 수 있게 하고싶을 때 export 키워드 사용
- 선언된 변수, 함수, 클래스 모두 export 가능하다.
- 선언문 앞에 export 키워드를 사용한다. export는 이름으로 구별할 수 있다.
1 | // lib.mjs |
3. import 키워드
모듈에서 공개(export)한 대상을 로드하려면 import 키워드를 사용한다.
1 | // app.mjs |
- 모듈에서 하나만을 export할 때는 default 키워드를 사용할 수 있다.
- default 사용하는 경우, var, let, const 사용불가
- default 키워드와 함께 export한 모듈은 {} 없이 임의의 이름으로 import한다.
1
2
3
4
5
6
7
8
9
10// 모듈에서 하나만 export 할 때는 default 키워드를 사용할 수 있다.
// default를 사용하는 경우 var, let, const는 사용할 수 없다.
export dafalut function (x, y) {
return x + y;
}
export default () => {};
export default const foo = () => {}; // SyntaxError : Unexpected token 'const'