IIFE — 즉시 실행 함수 표현식 완전 정복

지난 글에서 arguments 객체와 그 현대적 대체 방법을 살펴봤습니다. 이번에는 ES 모듈이 없던 시절 JavaScript 코드 구조화의 핵심이었던 IIFE(Immediately Invoked Function Expression, 즉시 실행 함수 표현식)를 다룹니다. 레거시 코드에서 빈번하게 등장하고, 오늘날에도 특정 상황에서 유용한 패턴입니다.

IIFE란

함수를 정의하자마자 즉시 호출하는 표현식입니다. 핵심은 함수를 표현식으로 만들어 즉시 호출하는 것입니다.

// 기본 형태 — 함수 전체를 괄호로 감싸기 (크록포드 스타일)
(function() {
  console.log('즉시 실행!');
}());

// 호출 괄호를 바깥에 두기 (더글라스 스타일)
(function() {
  console.log('즉시 실행!');
})();

// 화살표 함수 IIFE
(() => {
  console.log('즉시 실행!');
})();

괄호가 필요한 이유는 JavaScript 파서가 function으로 시작하는 문장을 선언식으로 해석하기 때문입니다. 괄호로 감싸거나 void, !, + 같은 단항 연산자를 앞에 붙이면 표현식 위치로 해석되어 즉시 호출이 가능해집니다.

void function() { console.log('실행!'); }();
!function() { console.log('실행!'); }();
+function() { console.log('실행!'); }();

왜 IIFE가 필요했나

ES2015 이전에는 var 변수가 함수 스코프만 가졌고, 블록 스코프가 없었습니다. ES 모듈도 없었습니다. 이런 환경에서 코드를 모듈화하고 전역 네임스페이스 오염을 막는 유일한 방법이 IIFE였습니다.

// ES2015 이전 — 전역 오염 없는 초기화
var MyApp = (function() {
  var _private = 'secret'; // 외부에서 접근 불가

  function init() {
    console.log('앱 시작');
  }

  return {
    init: init,
    version: '1.0'
  };
}());

MyApp.init();          // 정상 동작
console.log(MyApp._private); // undefined — 접근 불가

클로저 모듈 패턴

IIFE와 클로저를 결합하면 프라이빗 상태를 가진 모듈을 만들 수 있습니다.

const counter = (function() {
  let _count = 0; // 프라이빗

  return {
    increment() { _count++; },
    decrement() { _count--; },
    getCount()  { return _count; },
    reset()     { _count = 0; },
  };
}());

counter.increment();
counter.increment();
counter.getCount(); // 2
counter._count;     // undefined — 직접 접근 불가

이 패턴은 revealing module pattern의 기반이었으며, ES2022 클래스 프라이빗 필드(#)가 등장하기 전까지 캡슐화의 표준 방식이었습니다.

초기화 값 전달

IIFE에 인수를 넘겨 외부 값을 안전하게 캡처할 수 있습니다. 미니파이어가 파라미터 이름을 줄여도 내부 동작은 보장됩니다.

const app = (function(window, document, undefined) {
  // undefined를 명시적으로 파라미터에 올려 외부 변조 방지 (ES5 관용구)
  // window, document는 지역 변수로 미니파이 가능

  function onReady() {
    document.title = 'App Ready';
  }

  window.addEventListener('DOMContentLoaded', onReady);
  return { version: '1.0' };
}(window, document));

비동기 IIFE

Top-level await가 없던 시절, 모듈 최상단에서 async/await를 사용하려면 비동기 IIFE가 필요했습니다.

(async function() {
  try {
    const config = await fetch('/api/config').then(r => r.json());
    initApp(config);
  } catch (err) {
    console.error('초기화 실패:', err);
  }
}());

// 화살표 버전
(async () => {
  const data = await loadData();
  render(data);
})();

오늘날 ES 모듈에서는 top-level await를 직접 사용할 수 있어 이 패턴이 불필요해졌습니다.

// 현대 ES 모듈에서
const data = await loadData(); // 바로 사용 가능
render(data);

for 루프 var 클로저 문제 해결 (역사적 패턴)

var와 루프의 클로저 문제를 IIFE로 해결하던 고전 패턴입니다.

// 문제: 모든 핸들러가 i=5를 출력
for (var i = 0; i < 5; i++) {
  setTimeout(function() { console.log(i); }, i * 100);
}

// 해결: IIFE로 i를 캡처
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() { console.log(j); }, j * 100);
  }(i));
}

// 현대 해결책: let 사용 (블록 스코프)
for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), i * 100);
}

현대 코드에서 IIFE

ES2015+ 환경에서 IIFE의 전통적 역할 대부분은 다른 기능이 대체했습니다.

• 스코프 격리 → ES 모듈 (각 파일이 독립 스코프)
• 프라이빗 상태 → 클래스 프라이빗 필드(#) 또는 클로저
• 블록 스코프 → let/const
• 비동기 초기화 → Top-level await

그럼에도 IIFE가 여전히 유용한 경우가 있습니다.

// 복잡한 초기화 값을 const에 할당
const DATA = (() => {
  const raw = [/* 복잡한 처리 */];
  return Object.freeze(raw.map(transform));
})();

// 블록 스코프가 필요하지만 이름 없는 로직
{
  const temp = computeExpensive();
  useOnce(temp);
} // temp는 여기서 GC 대상

// 위와 동일한 효과를 IIFE로
(() => {
  const temp = computeExpensive();
  useOnce(temp);
})();

---

지난 글: arguments 객체 완전 정복

다음 글: 고차 함수 완전 정복

읽어주셔서 감사합니다. 😊