개요

즉시 실행 함수 표현 IIFE(Immediately Invoked Function Expression)는 정의 직후 바로 호출되는 함수 패턴을 의미함 ES5 시기에는 클래스나 표준 모듈이 없어 전역 스코프 오염 방지와 초기화 코드 캡슐화에 널리 사용됨 ES6 이후에는 모듈 export/import가 기본 선택지이나, 독립 실행 초기화 코드, 라이브러리 래퍼, 폴리필 등에서는 여전히 유효한 도구임

함수 선언과 함수 표현의 차이

함수 선언 Function Declaration

  • 선언이 호이스팅되어 해당 스코프의 시작 시점에 바인딩됨
  • 선언 이전 호출 가능

함수 표현 Function Expression

  • 인터프리터가 해당 표현식에 도달했을 때 평가됨
  • 평가 전에는 참조 불가

간단 예시

foo()        // OK
function foo() {}

bar()        // ReferenceError
var bar = function() {}

(function baz() {})
typeof baz   // 'undefined' 바깥 스코프에 노출 안 됨

핵심은 괄호로 감싸는 순간 함수 선언이 아닌 함수 표현식이 됨 표현식은 값처럼 다뤄질 수 있고, 따라서 즉시 호출도 가능함

IIFE의 기본 형태와 동작 원리

기본 형태

(function () { /* 내부 초기화 */ })()
  • 첫 번째 괄호 쌍이 함수 선언을 함수 표현식으로 전환
  • 뒤따르는 괄호가 즉시 호출을 트리거
  • 반환값이 있으면 즉시 평가 결과로 사용 가능

이름을 가진 함수 표현식도 가능

(var showName = function (name) {
  console.log(name || 'No Name')
})()
showName('Rich')   // 이후 재사용 가능
showName()         // No Name

이름을 부여하면 디버깅 스택에서 식별이 쉬움 익명 표현식은 재호출 경로가 없으므로 1회성 초기화에 적합

언제 IIFE를 쓰는가

전역 스코프 오염 방지

  • 라이브러리나 플러그인 래퍼에서 지역 스코프를 만들어 의도치 않은 전역 노출 차단
  • 애플리케이션 진입점에서 초기화 코드를 묶어 외부와의 충돌 최소화

의존성 주입과 캡슐화

  • 외부 객체나 상수를 매개변수로 전달해 내부 별칭 사용 및 최소 노출
// 세미콜론으로 안전하게 시작할 것
;(function (dep) {
  // dep 사용, 내부 변수는 외부에 노출되지 않음
})(someDep)

즉시 실행 초기화

  • 구성 로직을 묶어 실행 순서를 명확히 하고 지역 상태만 유지

조건부 정의와 IIFE

조건에 따라 다른 구현을 바인딩해야 할 때 IIFE로 분기된 구현을 즉시 선택 가능 가독성 저하와 유지보수 비용 증가 가능성이 커서 신중히 사용할 것 필요 시 분기 로직을 별도 함수로 빼고 IIFE 내부에서 결정하는 형태 권장

클로저와 루프에서의 값 캡처 문제 해결

var 기반 루프에서 클로저가 마지막 값만 보게 되는 문제를 IIFE로 해결 가능

for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(function () { console.log(j) })
  })(i)
}

현대 환경에서는 let 사용이 단순하고 가독성 높음 IIFE는 구버전 호환이나 즉시 평가가 필요한 상황에 한정해 선택

ES6 이후의 맥락

모듈이 기본 선택지

  • 파일 단위 스코프 제공, export 로 명시적 공개, import 로 의존성 관리
  • 트리 셰이킹과 정적 분석 친화적

IIFE는 여전히 유효한 경우 존재

  • 브라우저 즉시 실행 번들, 스니펫 삽입, 폴리필 또는 셀프 부팅 초기화 코드
  • 외부 주입값에 따라 런타임에 결정이 필요한 설정 래핑

베스트 프랙티스와 주의 사항

  • 파일 연결 시 IIFE 앞에 세미콜론을 붙여 ASI 이슈 예방 권장
  • 모듈이 가능한 환경에서는 모듈 우선, IIFE는 최소 범위에서 사용
  • 이름 있는 함수 표현식으로 디버깅 가독성 확보
  • 내부에서만 필요한 심볼은 반환하거나 전역에 노출하지 않음
  • 깊은 중첩 IIFE 지양, 초기화 단계를 명확히 분리

간단 예시 모음

기본 패턴

;(function () { /* init */ })()

반환값 활용

var config = (function () { return { debug: false } })()

의존성 주입

;(function (win, doc) { /* 사용 */ })(window, document)

마무리

IIFE는 함수 표현식을 값으로 다루는 자바스크립트 특성을 이용해 스코프를 격리하고 즉시 초기화하는 실용적 패턴임 ES6 모듈이 대체하는 영역이 크지만, 전역 오염 방지와 부트스트랩 코드에선 여전히 간결하고 안전한 선택지임 현대 코드베이스에서는 모듈과 블록 스코프를 우선 적용하고, 레거시 제약이나 즉시 실행 맥락에서 IIFE를 보조 도구로 사용 권장

참고자료