Javascript - Module

ES6 module

일반적으로 javascript에서는 따로 모듈 기능을 사용하지 않는다면 분리된 js파일이라도 각각의 스코프를 갖지 않고 하나의 전역을 공유한다.

하지만 ES6 module은 파일 자체의 스코프를 제공해 독자적인 모듈 스코프를 갖는다. 따라서 모듈 내에서 var 키워드로 선언한 변수는 전역변수도 아니고, window객체의 프로퍼티도 아니게 된다.

모듈 내에서 선언한 변수는 스코프가 다르기 때문에 모듈 외부에서 참조할 수 없다. 하지만!!

export 키워드

export 키워드를 통해 모듈 안에 선언한 식별자를 외부로 공개하여 다른 모듈들이 참조할 수 있게 할 수 있다.

선언문 앞에 export 키워드를 사용해 여러 번 export할 수도 있고, 대상을 모아서 하나의 객체로 구성한 다음 한 번에 export할 수도 있다.

모듈에서 하나만을 export할 때는 default 키워드를 사용한다.

const x = () => x * x

export default x;

but, default 키워드를 사용하는 경우는 var, let, const는 사용할 수 없다.

export default const foo = () => {};
// => SyntaxError: Unexpected token 'const'

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

import 키워드

모듈에서 export한 대상을 가져오려면 import 키워드를 사용한다.
모듈이 export한 식별자 그대로 import해야하고, ES6 모듈의 파일 확장자를 생략할 수 없다.

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

각각의 식별자가 아닌 하나의 이름으로 한꺼번에 import할 수도 있다. 이 때 import되는 식별자는 as 뒤에 지정한 이름의 객체에 프로퍼티로 할당된다.

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

이름을 변경해 import할 수 있다.

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

Reference

• Using JavaScript modules on the web
• ECMAScript modules in browsers