esmencapsulation

JavaScript module scope를 설명해 주세요

예상 시간
5분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

module top-level 변수는 window에 붙나요?

부가 설명

// counter.js
let count = 0;
 
export function increase() {
  count += 1;
  return count;
}
// app.js
import { increase } from "./counter.js";
 
increase(); // 1

count는 counter.js module 내부에만 있습니다. increase 함수는 closure처럼 count에 접근할 수 있지만, 외부에서는 count를 직접 건드릴 수 없습니다.

module scope는 단순히 파일을 나누는 기능보다 캡슐화에 더 가깝습니다. 어떤 값을 공개할지, 어떤 값은 내부 구현으로 숨길지 파일 단위로 정할 수 있습니다.

CommonJS와 비교하면 ES module은 import/export가 top-level에 있어야 하고, 정적 분석이 더 쉽습니다. bundler가 tree shaking을 할 수 있는 이유도 이 정적 구조와 관련이 있습니다.

한 줄 정리

module scope는 파일 단위로 변수를 캡슐화하고, 필요한 값만 export/import로 연결하게 해주는 scope입니다.