#19 자바스크립트 클로저 활용 예시 : 즉시 실행 함수(IIFE)와 모듈 패턴

자바스크립트에서 클로저(Closure)는 강력한 기능을 제공하며, 특히 즉시 실행 함수(IIFE)와 모듈 패턴(Module Pattern)에서 자주 활용됩니다. 이 글에서는 클로저의 개념을 바탕으로, 즉시 실행 함수와 모듈 패턴이 무엇인지, 그리고 클로저를 어떻게 활용하는지 예제와 함께 설명하겠습니다.

즉시 실행 함수(IIFE)란?

즉시 실행 함수(Immediately Invoked Function Expression, IIFE)는 정의되자마자 즉시 실행되는 함수입니다. IIFE는 보통 한 번 실행되고 다시 호출되지 않으며, 변수나 함수의 유효 범위를 한정하는 데 자주 사용됩니다. IIFE는 함수 선언이 아닌 함수 표현식으로 작성되며, 이 표현식을 괄호로 감싸고 바로 실행합니다.

IIFE 기본 예제

(function() {
    let message = 'Hello, IIFE!';
    console.log(message);
})();

위의 예제에서, 익명 함수는 괄호 ()로 감싸져 있고, 마지막에 ()를 추가하여 즉시 실행됩니다. 결과적으로 "Hello, IIFE!"가 콘솔에 출력됩니다. 이때 message 변수는 IIFE 내부에서만 접근 가능하며, 외부 스코프에는 노출되지 않습니다.

IIFE와 클로저

IIFE는 클로저를 활용하여 변수를 외부에서 접근하지 못하도록 보호하면서도, 내부에서 데이터 처리를 할 수 있게 합니다. IIFE는 특히 전역 변수 오염을 방지하는 데 유용합니다.

IIFE를 활용한 클로저 예제

const increment = (function() {
    let counter = 0;
    
    return function() {
        counter += 1;
        return counter;
    };
})();

console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3

이 예제에서 increment 함수는 IIFE의 반환 값입니다. IIFE 내부에서 counter 변수가 정의되어 있으며, 이 변수는 외부에서 직접 접근할 수 없습니다. 그러나 반환된 함수(클로저)를 통해 counter 변수에 접근하고, 그 값을 증가시킬 수 있습니다.

모듈 패턴이란?

모듈 패턴(Module Pattern)은 클로저와 IIFE를 활용하여 코드의 모듈화 및 캡슐화를 구현하는 패턴입니다. 모듈 패턴은 관련된 기능을 하나의 모듈로 묶고, 필요한 부분만 외부에 공개하며, 나머지는 비공개로 유지합니다. 이 패턴은 전역 스코프 오염을 방지하고, 코드의 가독성을 높이며, 유지 보수를 쉽게 만듭니다.

모듈 패턴 기본 예제

const CounterModule = (function() {
    let count = 0;

    function increment() {
        count += 1;
        return count;
    }

    function decrement() {
        count -= 1;
        return count;
    }

    return {
        increment: increment,
        decrement: decrement,
    };
})();

console.log(CounterModule.increment()); // 1
console.log(CounterModule.increment()); // 2
console.log(CounterModule.decrement()); // 1

이 예제에서는 CounterModule이 모듈로 정의되었습니다. count 변수와 increment, decrement 함수는 모듈 내부에서만 접근 가능하며, 외부에는 increment와 decrement 함수만 공개됩니다. 이러한 구조 덕분에 count 변수는 외부 코드에 의해 직접 변경될 수 없고, 모듈 내에서만 안전하게 관리됩니다.

모듈 패턴의 확장

모듈 패턴은 클로저를 활용하여 복잡한 기능을 구현하는 데도 사용할 수 있습니다. 예를 들어, 여러 개의 메서드와 상태를 포함하는 고급 모듈을 만들 수 있습니다.

고급 모듈 패턴 예제

const ShoppingCartModule = (function() {
    let cart = [];

    function addItem(item) {
        cart.push(item);
    }

    function getTotal() {
        return cart.reduce((total, item) => total + item.price, 0);
    }

    function getItems() {
        return cart.slice();
    }

    function clearCart() {
        cart = [];
    }

    return {
        addItem: addItem,
        getTotal: getTotal,
        getItems: getItems,
        clearCart: clearCart,
    };
})();

ShoppingCartModule.addItem({ name: 'Apple', price: 1.5 });
ShoppingCartModule.addItem({ name: 'Banana', price: 1.2 });
console.log(ShoppingCartModule.getTotal()); // 2.7
console.log(ShoppingCartModule.getItems()); // [{ name: 'Apple', price: 1.5 }, { name: 'Banana', price: 1.2 }]
ShoppingCartModule.clearCart();
console.log(ShoppingCartModule.getItems()); // []

위의 예제에서 ShoppingCartModule은 장바구니 기능을 캡슐화한 모듈입니다. cart 배열은 모듈 내부에서만 관리되며, 외부에서는 addItem, getTotal, getItems, clearCart 메서드를 통해서만 접근할 수 있습니다. 이 모듈 패턴을 사용함으로써 장바구니 데이터의 무결성을 보장할 수 있습니다.

결론

자바스크립트의 클로저는 코드의 안전성과 효율성을 높이는 데 중요한 역할을 합니다. 클로저를 활용한 즉시 실행 함수(IIFE)와 모듈 패턴은 전역 변수 오염을 방지하고, 코드의 모듈화 및 캡슐화를 통해 유지 보수성을 향상시킬 수 있습니다. 이러한 패턴들은 자바스크립트에서 빈번하게 사용되는 중요한 기법이므로, 잘 이해하고 적절히 활용하는 것이 좋습니다.