자바스크립트는 전통적으로 클래스를 기본적으로 지원하지 않았기 때문에, 모듈 패턴(Module Pattern)이 널리 사용되어 왔습니다. 모듈 패턴은 공개(public) 메서드와 비공개(private) 메서드, 그리고 변수들을 하나의 객체 안에 깔끔하게 캡슐화하여 관리할 수 있도록 도와주는 디자인 패턴입니다.
모듈 패턴의 핵심 개념
모듈 패턴의 핵심은 익명 클로저(Anonymous Closure), 즉 즉시 실행 함수 표현식(IIFE, Immediately Invoked Function Expression)을 활용하는 것입니다. IIFE 내부에 선언된 변수와 함수는 외부에서 직접 접근할 수 없으므로 자연스럽게 비공개(private) 상태가 되며, 반환 객체를 통해 선택적으로 노출하고 싶은 기능만 공개(public) API로 만들 수 있습니다.
이러한 방식은 다음과 같은 장점을 제공합니다.
- 캡슐화: 내부 구현 세부사항을 숨기고 외부에는 필요한 인터페이스만 노출합니다.
- 전역 오염 방지: 전역 스코프에 변수를 남발하지 않아 코드 충돌 위험을 줄입니다.
- 네임스페이스 관리: 관련 기능을 하나의 단위로 묶어 코드 구조를 명확하게 만듭니다.
예제: 미성년 유권자 필터링
아래 예제는 익명 클로저를 활용해, 나이 기준(18세 미만)을 충족하지 못해 투표 자격이 없는 유권자 수를 계산하는 코드입니다. votersAge 배열과 average, notQualified 함수가 모두 클로저 내부에 선언되어 외부로부터 보호됩니다.
<!DOCTYPE html>
<html>
<body>
<script>
(function () {
var votersAge = [15, 50, 27, 17, 22, 87, 65, 45];
var average = function() {
var total = votersAge.reduce(function(accumulator, age) {
return accumulator + age}, 0);
return total / votersAge.length + '.';
}
var notQualified = function(){
var notAdult = votersAge.filter(function(age) {
return age < 18;});
return 'Voters not qualified to vote (age less than 18) = ' + notAdult.length;
}
document.write(notQualified());
}());
</script>
</body>
</html>코드 동작 원리 살펴보기
- IIFE 실행:
(function () { ... }())형태로 정의된 함수는 선언과 동시에 즉시 실행됩니다. - 비공개 데이터 유지:
votersAge배열은 클로저 안에만 존재하므로 전역 스코프를 오염시키지 않습니다. - filter로 조건 검사:
notQualified함수는Array.prototype.filter()를 사용해 18세 미만인 요소만 추출합니다. - 결과 출력: 해당 예제에서는 [15, 17] 두 명이 자격 미달이므로 "Voters not qualified to vote (age less than 18) = 2"라는 결과가 화면에 출력됩니다.
참고로, ES6(ECMAScript 2015)부터 자바스크립트에 class 문법이 도입되었지만, 모듈 패턴은 여전히 비공개 상태 관리와 캡슐화를 구현하는 강력한 방법으로 활용되고 있습니다. 특히 최신 자바스크립트의 프라이빗 필드(#field) 문법이 등장하기 전까지는 클로저 기반 모듈 패턴이 사실상 표준적인 캡슐화 기법이었습니다.