Javascript 모듈 패턴과 Closure (클로저)

이 글은 2021년 5월 백업 아카이브에서 복원된 글입니다.

Javascript 모듈 패턴은 Javascript 의 코드 관리 기법 중 하나로 객체 핸들링을 위한 방법론 중 하나입니다. 보통 객체의 유효범위(Scope)를 주어 Private, Public 을 구분하여 캡슐화를 할 때 사용하는 방법으로, 네임스페이스 패턴에 렉시컬 스코프를 추가한 것으로 보면 됩니다.

모듈 패턴은 접근제한자(Private, Public, Protected, Default 등)가 따로 없으므로, 캡슐화를 구현할 때 주로 사용하는 방법론 중 하나입니다. 전역 공간을 사용하지 않도록 함으로써 변수명 등이 겹치는 것을 방지하고, 주로 함수 내부에 Private 한 변수 및 함수를 생성하고 Return 을 기준으로 위쪽은 Private 영역, Return 영역을 Public 영역으로 구분하여 캡슐화되었지만 제한적인 접근을 허용하는 구조로 만들 수 있습니다.

모듈 패턴은 아래의 패턴들을 조합한 것입니다:

• 네임스페이스 패턴
• 즉시 실행 함수
• private / public 멤버
• 의존관계 선언

모듈을 구성하는 대표적인 방법론 중 Javascript 의 Closure 를 이용한 모듈 패턴이 있습니다.

Closure 정의 및 모듈 패턴

Closure 란 외부 함수에 접근할 수 있는 내부 함수, 혹은 이러한 원리를 일컫는 용어입니다. Scope 에 따라서 내부함수의 범위에서는 외부함수 범위에 있는 변수나 함수에 접근이 가능하지만, 반대로 외부함수에서 내부함수의 변수나 함수에 접근하는 것은 불가능합니다.

보통 Javascript 에서 함수가 선언될 때, 함수 자신이 접근할 수 있는 범위를 정하고 기억하고 있는데, 그것이 렉시컬 스코프 라고 하며 이런 렉시컬 스코프에 의해 자신을 포함하고 있는 외부함수의 환경(Scope)을 기억하고 있는 내부 함수가 Closure 입니다.

클로저의 핵심은, 외부함수는 자신의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않고 계속 살아있다는 것입니다. 내부함수가 외부함수의 context 에 접근할 수 있는데, 보통 함수 내부의 지역변수는 함수의 Life-Cycle 에 의해서 역할을 다하면 같이 사라지게 됩니다. 하지만 부모함수 내부에 내부함수가 존재하고 그 함수가 부모의 요소를 계속 참조하게 되면 부모함수가 종료되더라도 자신의 요소를 참조하고 있는 내부함수 때문에 지역 변수가 사라지지 않으며, 내부함수가 그 요소에 대해 계속적으로 접근이 가능해집니다. 즉 이러한 매커니즘을 이용해 캡슐화된 모듈을 개발할 수 있습니다.

Closure 기본 정의

• 외부함수와 내부함수의 관계, 그리고 내부함수가 참조하는 외부함수의 변수의 Life-Cycle 및 계속적인 접근, 이러한 메커니즘을 Closure 라 한다
• 내부에 Private 성질의 변수 정의 및 사용이 가능하다
• 내부함수를 이용해 Class 의 getter/setter 함수와 같은 기능을 구현할 수 있다

Closure 모듈 패턴

• IIFE(즉각실행함수)를 이용하거나 new 키워드를 이용한 인스턴스를 생성해 캡슐화된 모듈을 제작 가능
• 내부에서만 사용할 수 있는 Private 한 요소를 정의할 수 있고 외부에서 사용 가능한 Public 요소를 제공해줄 수 있음

메모리 주의점

Closure 를 이용해 계속적으로 특정 변수를 참조하고 사용하고 있다면 성능 저하를 일으킬 수 있습니다. 흔히 말하는 메모리 누수 현상 이 발생할 수 있으므로, 내부함수의 사용이 더 이상 필요 없는 적절한 상황에서 외부 변수를 초기화하여 메모리 할당을 해제시켜주는 로직을 포함하는 것이 좋습니다.