[javascript] 모듈(module)

Javascript에서 var변수를 선언하거나 함수를 정의하면 global에 등록되어서 window를 통해 곧바로 호출할 수 있습니다. 이게 문제가 될 수 있는건 중복되는 이름으로 변수나 함수가 선언되면 충돌을 일으킬 수 있다는 것입니다. 예를 들어 다음과 같이 a.js와 b.js에 공통적으로 add()라는 함수가 정의된 경우

function add(x, y) {
	return x + y;
};

중복되는 이름이 존재하기에 오류를 일으키게 됩니다. 이 문제를 해결하려면 각 js파일을 html페이지에서 모듈로 추가해야 합니다.

<script type="module" src="./a.js"></script>
<script type="module" src="./b.js"></script>

이렇게 하면 어떤 모듈에서 외부로 노출할 함수를 다음과 같이 export해야만 사용할 수 있게 됩니다. 그래서 a.js파일에 있는 add()함수를 아래와 같이 했다면

export default function add(x, y) {
	return x + y;
};

 

b.js에서는 add()함수를 import해야만 a.js의 add()함수를 사용할 수 있게 됩니다.

import add from './a.js';

add(10, 20);

참고로 export에서 default는 a.js에서 add()함수를 기본적으로 export한다는 것을 의미합니다. 이렇게 기본 export함수를 지정하게 되면 다른 파일에서 import할때 동일한 이름의 함수가 없는 경우 add()함수를 import받게 됩니다.

 

예제에서는 add라는 명칭을 정확하게 지정했지만 sum이나 plus등 다른 이름으로 하는 경우 a.js에서는 일치하는 이름이 없으므로 add()함수를 export하게 되는데 이때 default는 하나만 할 수 있으며 default가 아닌 함수나 변수의 경우 import하고자 하는 정확한 이름을 지정해야 합니다.

import { add } from './a.js';

만약 불러오는 이름을 다르게 하고자 한다면 as를 사용해 원하는 이름을 지정해 주면 되며

import { add as plus } from './a.js';

plus(10, 20);

경우에 따라 하나의 파일에서 여러개의 변수나 함수를 export할 수도 있는데 import하는 입장에서 export한 모든 요소를 가져와야 한다면 *를 사용할 수도 있습니다.

import * as all from './a.js';

all.add(10, 20);