js는 파일을 나누어 작성하고 분리하여도 js들은 똑같이 하나의 전역스코프를 가진다. 그렇기에 전역변수를 공용하여 전역 변수가 중복되는 등의 문제가 발생할 수 있다

script 태그에 type="module"  어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다. ES6 모듈의 파일 확장자는 모듈임을 명확히 하기 위해 mjs를 사용하도록 권장한다.

<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>

export 키워드

모듈들은 각자의 스코프를 가지기 때문에 외부의 파일에서 모든 식별자들을 사용할 수 없다 이때 export키워드를 사용해서 참조할 수 있도록 한다. 선언된 변수, 함수, 클래스 모두 export할 수 있다.

// lib.mjs
// 변수의 공개
export const pi = Math.PI;

// 함수의 공개
export function square(x) {
  return x * x;
}

// 클래스의 공개
export class Person {
  constructor(name) {
    this.name = name;
  }
}

// 하나하나 export를 붙이기 귀찮다면
// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { pi, square, Person };

import 키워드

export한 식별자들을 사용할 때 import 키워드 쓴다

// app.mjs
// 같은 폴더 내의 lib.mjs 모듈을 로드.
// lib.mjs 모듈이 export한 식별자로 import한다.
// ES6 모듈의 파일 확장자를 생략할 수 없다.
import { pi, square, Person } from './lib.mjs';

console.log(pi);         // 3.141592653589793
console.log(square(10)); // 100
console.log(new Person('Lee')); // Person { name: 'Lee' }

// 식별자를 지정하지 않고 한번에 가져올 수 있음
// 지정이름의 프로퍼티로 사용함
import * as lib from './lib.mjs';

console.log(lib.pi);         // 3.141592653589793
console.log(lib.square(10)); // 100
console.log(new lib.Person('Lee')); // Person { name: 'Lee' }

이름을 변경하여 import할 수도 있다.

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

console.log(PI);    // 3.141592653589793
console.log(sq(2)); // 4
console.log(new P('Kim')); // Person { name: 'Kim' }

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

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

다만, default를 사용하는 경우, var, let, const는 사용할 수 없다.