자바스크립트 즉시 실행 함수(IIFE): 클로저 문제 해결 및 스코프 관리

반복문과 비동기 코드에서 발생하는 클로저 문제

자바스크립트에서 반복문 내에 비동기 작업을 포함할 때, 특히 var 키워드로 선언된 변수를 사용할 경우 흔히 예상치 못한 동작을 마주하게 됩니다. 이는 변수가 반복문의 마지막 값으로만 참조되는 클로저(Closure) 문제입니다.

예를 들어, 다음 코드를 살펴보겠습니다. 여러 지연된 메시지를 출력하려 하지만, 모든 메시지가 반복문의 최종 인덱스 값을 참조합니다.


const dataItems = ['항목 A', '항목 B', '항목 C'];

for (var i = 0; i < dataItems.length; i++) {
    setTimeout(function() {
        // 이 함수가 실행될 때쯤이면, 'i'는 이미 반복문의 최종 값인 '3'이 되어 있습니다.
        console.log(`현재 처리 중인 값: ${dataItems[i]} (인덱스: ${i})`);
    }, 100 * i); // 각 항목에 대해 약간의 지연 시간 설정
}
// 예상 출력:
// "현재 처리 중인 값: 항목 A (인덱스: 0)"
// "현재 처리 중인 값: 항목 B (인덱스: 1)"
// "현재 처리 중인 값: 항목 C (인덱스: 2)"

// 실제 출력:
// "현재 처리 중인 값: undefined (인덱스: 3)" (세 번 반복)

이러한 현상이 발생하는 이유는 setTimeout 내부의 콜백 함수가 실행될 때, 이미 for 루프가 종료되어 변수 i의 최종 값(dataItems.length인 3)을 참조하게 되기 때문입니다. 콜백 함수는 i의 값을 기억하는 것이 아니라, i 변수 자체의 참조를 기억합니다.

즉시 실행 함수(IIFE)를 활용한 문제 해결

이러한 클로저 문제를 해결하는 효과적인 방법 중 하나는 즉시 실행 함수 표현식(Immediately Invoked Function Expression, IIFE)을 사용하는 것입니다. IIFE는 함수가 정의되자마자 즉시 실행되며, 자신만의 독립적인 스코프를 생성하여 변수의 현재 값을 캡처할 수 있도록 돕습니다.


const elements = ['첫째', '둘째', '셋째'];

for (var k = 0; k < elements.length; k++) {
    // 즉시 실행 함수를 사용하여 현재 'k' 값을 'capturedK'로 캡처
    (function(capturedK) {
        setTimeout(function() {
            console.log(`처리된 요소: ${elements[capturedK]} (캡처된 인덱스: ${capturedK})`);
        }, 100 * capturedK);
    })(k); // 루프의 각 'k' 값을 즉시 실행 함수에 인수로 전달
}
// 실제 출력:
// "처리된 요소: 첫째 (캡처된 인덱스: 0)"
// "처리된 요소: 둘째 (캡처된 인덱스: 1)"
// "처리된 요소: 셋째 (캡처된 인덱스: 2)"

위 코드에서 (function(capturedK) { ... })(k); 부분은 IIFE입니다. 루프의 각 반복마다 k의 현재 값이 capturedK라는 이름으로 IIFE의 스코프 안에 "고정"됩니다. 따라서 setTimeout 콜백 함수가 나중에 실행될 때, 올바른 capturedK 값을 참조하게 됩니다.

즉시 실행 함수 표현식(IIFE)의 기본 개념

IIFE의 동작 방식을 이해하려면 자바스크립트의 함수 선언 방식과 호이스팅 개념을 먼저 알아야 합니다.

1. 함수 선언식과 함수 표현식

함수 선언식 (Function Declaration): function myFunction() { ... } 형태로 선언하며, 함수 이름이 필수적입니다. 자바스크립트 엔진이 코드를 실행하기 전에 해당 함수를 메모리에 로드하는 호이스팅(Hoisting)이 발생합니다.
```
        sayGreeting(); // 출력: 안녕하세요!
        function sayGreeting() {
            console.log('안녕하세요!');
        }
        
```
함수 표현식 (Function Expression): var myFunction = function() { ... }; 형태로 변수에 함수를 할당합니다. 익명 함수가 주로 사용되며, 호이스팅 시에는 변수 선언만 되고 함수 할당은 코드 실행 시점에 이루어집니다. 따라서 할당 전에 호출하면 오류가 발생합니다.
```
        // greetUser(); // TypeError: greetUser is not a function (또는 undefined)
        var greetUser = function() {
            console.log('환영합니다!');
        };
        greetUser(); // 출력: 환영합니다!
        
```
익명 함수 (Anonymous Function): 이름이 없는 함수입니다. 함수 표현식의 형태로 많이 사용되거나, 콜백 함수 등으로 활용됩니다. 익명 함수는 그 자체로는 호출할 수 없으며, 변수에 할당되거나 다른 함수의 인자로 전달될 때 의미를 가집니다.

2. 즉시 실행 함수(IIFE)의 문법

IIFE는 함수 표현식의 한 형태로, 함수를 정의함과 동시에 즉시 호출합니다. 핵심은 자바스크립트 파서가 함수를 '함수 선언'이 아닌 '함수 표현식'으로 인식하도록 만드는 것입니다.

다음과 같은 코드는 문법 오류를 발생시킵니다. 자바스크립트 엔진은 function() { ... }()를 함수 선언으로 해석하려 하지만, 함수 이름이 없으므로 오류가 발생합니다.


// function() {
//     console.log('오류 발생!');
// }(); // SyntaxError: Function statements require a function name

이 문제를 해결하기 위해 함수 표현식을 소괄호 ()로 감싸서, 자바스크립트 엔진에게 이것이 함수 선언이 아니라 함수 표현식임을 명시적으로 알려줍니다. 함수 표현식은 그 뒤에 즉시 호출 괄호 ()를 붙일 수 있습니다.


// 가장 일반적인 IIFE 형태: 함수 표현식을 소괄호로 감싸고 즉시 호출
(function(param) {
    console.log(`매개변수 값: ${param}`);
})('인자 전달'); // 출력: 매개변수 값: 인자 전달

// 호출 괄호를 함수 정의 소괄호 안에 넣는 것도 가능
(function(anotherParam) {
    console.log(`또 다른 형태의 호출: ${anotherParam}`);
}('두 번째 인자')); // 출력: 또 다른 형태의 호출: 두 번째 인자

소괄호 () 외에도, 자바스크립트 엔진이 함수를 표현식으로 인식하게 만드는 다양한 단항 연산자를 사용할 수 있습니다. !(부정), +(단항 플러스), -(단항 마이너스), ~(비트 NOT) 등이 그 예시입니다.


// 부정 연산자 '!' 사용
!function(value) {
    console.log(`! 연산자 사용: ${value}`);
}(42); // 출력: ! 연산자 사용: 42

// 단항 플러스 연산자 '+' 사용
+function(num) {
    console.log(`+ 연산자 사용: ${num}`);
}(100); // 출력: + 연산자 사용: 100

// 이외에도 - (단항 마이너스), ~ (비트 NOT), typeof, void 등 다양한 연산자가 사용 가능

그러나 일반적으로 ()로 함수를 감싸는 방식이 가장 널리 사용되고 안전합니다. 다른 연산자들은 함수의 반환 값과 연산을 수행할 수 있어 예상치 못한 부작용을 일으킬 수 있기 때문입니다.

IIFE의 활용 및 이점

IIFE는 단순한 문법적 특징을 넘어 실제 자바스크립트 개발에서 여러 중요한 이점을 제공합니다.

클로저 문제 해결: 앞서 살펴본 반복문 내 비동기 작업에서 발생하는 클로저 문제를 효과적으로 해결하여, 각 반복의 고유한 값을 안전하게 캡처할 수 있도록 합니다.
스코프 격리 및 전역 네임스페이스 오염 방지: 자바스크립트는 블록 스코프가 아닌 함수 스코프를 기반으로 합니다(let, const 도입 이전 var 사용 시). IIFE는 자신만의 독립적인 스코프를 생성하여, 그 안에 선언된 변수나 함수가 외부 스코프에 영향을 주지 않도록 합니다. 이는 전역 변수 충돌을 방지하고 코드의 모듈성을 높이는 데 기여합니다.
```
        var globalVar = '전역 변수';

        (function() {
            var privateVar = '내부 변수';
            console.log(globalVar); // IIFE 내부에서 전역 변수 접근 가능
            console.log(privateVar); // 내부 변수 접근 가능
        })();

        // console.log(privateVar); // ReferenceError: privateVar is not defined (외부에서 접근 불가)
        
```
이러한 특성 덕분에 jQuery와 같은 라이브러리들은 모든 코드를 하나의 거대한 IIFE로 감싸서 전역 스코프 오염을 방지하고 내부 변수들을 보호합니다.
데이터 은닉 (Private Scope): IIFE 내부에서 정의된 변수는 외부에서 직접 접근할 수 없으므로, 마치 클래스의 private 멤버처럼 데이터를 은닉하는 효과를 얻을 수 있습니다. 이는 복잡한 애플리케이션에서 코드의 응집도를 높이고 유지보수를 용이하게 합니다.

태그: JavaScript IIFE 클로저 스코프 함수표현식

7월 21일 01:18에 게시됨

괴물 클럽