모듈은 JavaScript 코드를 패키징하는 형식으로, 파일을 경계로 내부 구현을 숨길 수 있고 재사용성을 높여준다.
앞서 모듈은 JavaScript 코드를 패키징한다고 했는데, 무슨 의미일까?
하나씩 천천히 살펴보자.
파일에 자바스크립트 코드를 작성했다고 해서 그 파일이 모듈이 되는 것은 아니다. 즉, 파일에 담긴 자바스크립트 코드가 모듈로 동작할 수 있게끔 정의하여 사용해야만 한다.
모듈이 아닌 일반 자바스크립트를 이용하는 경우에 어떠한 문제가 발생하는지 알아보자.
// test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>Hello World</div>
<script src="foo.js"></script>
<script src="bar.js"></script>
</body>
</html>
// foo.js
const foo = '철수';
// bar.js
const bar = '미애';
console.log(foo); // '철수' 출력
분명히 bar.js 파일에는 foo 변수가 존재하지 않는다. 하지만, test.html에서 두 자바스크립트 파일을 로드하였기 때문에, foo.js, bar.js 파일에 선언된 foo, bar는 전역 변수로 사용되게 된다.
따라서, 분리된 두 파일 일지라도 변수/함수가 모두 전역에 선언되어 잘못된 참조를 하는 것뿐만 아니라 기존 값을 덮어씌우게 되는 불안정한 코드를 만들게 된다.
실제로 이러한 문제는 ES6 이전에 대두됐고, 이러한 문제를 해결하고자 모듈 이라는 패턴이 등장하게 되었다.
ES6+를 지원하는 브라우저에서는
type="module"속성을 가진<script>태그를 이용해모듈을 로드하고 실행할 수 있다.
그럼 일반 자바스크립와 다르게 모듈의 핵심 기능은 무엇일까?
이제 하나씩 알아보자.
모듈은 자신만의 스코프를 가지게 되는데, 이를 통해 내부 구현을 캡슐화하여 숨길 수 있어 다른 모듈에 대한 접근을 제한한다.
또한, 일반 자바스크립트에서 발생했던 중복된 변수명, 덮어쓰기 같은 문제를 해결할 수 있다.