[JavaScript] 디자인패턴 #Module

이번 시간에는 모듈 패턴에 대해 알아보겠습니다. IIFE(즉시 함수 표현식) 또는 모듈패턴이라고 불리는 디자인 패턴은 즉시실행함수, 클로저, 스코프에 대한 개념을 알고계시다면 금방 이해하실 수 있습니다.

const module = (function() {
  let x = 0; // 즉시 실행함수를 활용해 비공개 변수를 생성합니다.
  
  return {
    y() { // 외부에서 접근 가능한 프로퍼티입니다.
      return x++;
    }
  }
})()

console.log(module.y()); // 0
console.log(module.y()); // 1
console.log(module.y()); // 2
console.log(module.y()); // 3
console.log(module.y()); // 4

즉시 실행함수의 호출이 끝나더라도 반환된 객체에서 여전히 x 변수에 접근할 수 있습니다. 이는 반환된 객체의 렉시컬 환경과 즉시실행함수가 클로저를 형성하고 있기 때문입니다.

객체에서 즉시실행함수로 스코프체인을 타고 올라가 변수 x를 참조하며 이로 인해 가비지 컬렉터에 의해 메모리가 회수되지 않고 변수 객체가 보존됩니다.

이러한 패턴을 바로 모듈패턴이라고 합니다.