모듈이란 일반적으로 파일 단위로 분리 된 재사용 가능한 코드 조각을 말한다.

모듈별로 스코프가 구분되고 코드 단위를 명확하게 분리하여 개발 효율성과 유지 보수성을 높일 수 있으므로 일반적인 언어들에서 자주 쓰인다.

자바스크립트는 과거 모듈기능이 없었기 때문에 ES6이후에 도입되었다.

module

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

위 코드와 같이 type에 module을 적는 것으로 사용할 수 있다. 하지만 아래와 같은 단점이 있다.

IE를 포함한 구형 브라우저는 지원하지 않음.
ES6 모듈을 사용해도 트랜스파일링이나 번들링이 필요함.
아직 지원하지 않는 기능(Bare import 등)이 있다.
몇가지 이슈가 있음. ECMAScript modules in browsers

1. 모듈 스코프

모듈 처리된 자바스크립트 파일의 경우 독자적인 스코프를 갖는다.

index.html

<!DOCTYPE html>
<html>
  <body>
    <script type="module" src="foo.js"></script>
    <script type="module" src="bar.js"></script>
  </body>
</html>

foo.js

1
2
3

const x = "foo";

console.log(x); // foo

bar.js

1	console.log(x); // ReferenceError: x is not defined

2. export

모듈 밖에서 모듈 안의 식별자를 참조할 수 있게 하려면 export 키워드를 사용한다.

foo.mjs

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

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

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

foo2.mjs

const pi = Math.PI;

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

class Person {
  constructor(name) {
    this.name = name;
  }
}

// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { pi, square, Person };

3. import

외부 모듈에서 공개한 식별자를 로드하려면 import 키워드를 사용한다.

app.mjs

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

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

app2.mjs

import * as lib from "./foo.mjs";

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

4. default

식별자 하나만을 export할 때는 default를 사용한다.

단 default 사용시 var, let, const는 사용할 수 없다.

lib.mjs

export default square (num) => num * num;
// => OK

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

app.mjs

1
2
3

import square from "./lib.mjs";

console.log(square(3)); // 9

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

모듈 (Module)

1. 모듈 스코프

2. export

3. import

4. default

FEATURED TAGS

FRIENDS