📦 IIFE (즉시 실행 함수 표현식) 패턴 – 역사적 배경과 활용법 정리

📦 IIFE (즉시 실행 함수 표현식) 패턴 – 역사적 배경과 활용법 정리

IIFE (Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 함수입니다.
ES6 이전에는 모듈 시스템이 없었기 때문에 코드의 전역 오염을 막기 위해 IIFE가 널리 사용되었습니다.
이번 글에서는 IIFE의 기본 개념, 작성 방식, 역사적 필요성, 현재의 쓰임까지 정리합니다.

---

1. IIFE의 기본 문법

// 기본 구조
(function() {
  console.log("즉시 실행됨");
})();

또는

(() => {
  console.log("화살표 함수로 즉시 실행됨");
})();

• 함수를 ()로 감싸면 표현식으로 인식
• 뒤에 ()를 붙여 즉시 실행

---

2. 왜 IIFE가 필요한가?

ES6 이전에는 import/export가 없었기 때문에 모든 스크립트가 전역 공간에 등록되었습니다.

// 전역 오염 예시
var a = 1;
function init() {}

이때 변수 충돌을 막기 위해 다음과 같이 지역 스코프를 강제로 생성한 것이 IIFE입니다.

(function() {
  var a = 1;  // 지역 변수
  function init() {
    // 지역 함수
  }
})();

---

3. 실전 예제 – 네임스페이스 충돌 방지

var message = "글로벌 메시지";

(function() {
  var message = "로컬 메시지";
  console.log("IIFE 안:", message); // 👉 로컬 메시지
})();

console.log("바깥:", message); // 👉 글로벌 메시지

👉 외부 변수와 충돌 없이 코드 캡슐화 가능

---

4. 매개변수 전달도 가능

(function(name) {
  console.log(`Hello, ${name}`);
})("Alice");

IIFE는 즉시 실행되는 동시에 인자도 받을 수 있어 초기화 코드에 적합합니다.

---

5. 모듈화가 없던 시절의 대안

라이브러리에서도 IIFE 패턴은 자주 사용되었습니다.

// 예: jQuery
(function(global) {
  // 내부 코드
  global.$ = global.jQuery = function(selector) {
    // ...
  };
})(window);

👉 전역에 단 하나의 네임스페이스만 노출하고, 나머지는 모두 숨김

---

6. 현재는 사용하지 않아도 되는가?

ESModules이 도입된 이후 대부분의 IIFE 용도는 import/export로 대체 가능합니다.
하지만 다음의 경우에는 여전히 유용합니다:

• 브라우저에서 단독 실행되는 스크립트
• 빠르게 초기화가 필요한 코드 (e.g. 설정, 이벤트 연결)
• 즉시 실행 테스트 함수 (테스트 영역 캡슐화)

---

7. IIFE vs 블록 스코프 (let/const)

let, const의 블록 스코프 도입 이후엔 간단한 캡슐화는 굳이 IIFE 없이도 가능합니다.

{
  const a = 123;
  console.log(a);
}

하지만 즉시 실행과 매개변수 전달이 필요한 경우엔 IIFE가 여전히 유용합니다.

---

📌 마무리

IIFE는 자바스크립트가 아직 모듈 시스템을 갖추기 전, 전역 변수 충돌을 방지하고 지역 스코프를 만들기 위한 중요한 기법이었습니다.
오늘날에는 import/export로 대부분 대체되지만, 즉시 실행 + 스코프 분리라는 장점은 여전히 유효하며, 일부 초기화 코드에 적합합니다.

다음 글에서는 네임스페이스 충돌 방지 전략과 모듈 구조 설계 팁을 다루며, 실전 예제 중심으로 구조화 방식을 설명하겠습니다.