Programing/javascript

자바스크립트 IIFE 패턴(즉시 실행 함수 표현식)의 쓰임새와 모던 대안

Dongkkase 2025. 4. 24. 08:16
반응형

자바스크립트의 IIFE(Immediately Invoked Function Expression)는 과거부터 변수 스코프를 보호하거나 초기화 코드를 실행할 때 자주 사용되던 패턴입니다. 최근에는 ES6 이후의 모듈 시스템과 블록 스코프 변수(let, const)로 인해 덜 사용되긴 했지만, 여전히 유용한 구조로 여겨지며 이해하고 있어야 할 중요한 문법입니다.


✨ IIFE란?

정의하자마자 즉시 실행되는 함수 표현식을 의미합니다.

형식:

(function() {
  // 코드 실행
})();

또는

(() => {
  // 코드 실행
})();

✅ 왜 사용했을까?

ES6 이전에는 var만 존재해 **함수 스코프(function scope)**를 만들기 위해 IIFE가 널리 사용되었습니다.

예시 1: 변수 보호

(function() {
  var secret = 'hidden';
  console.log(secret); // hidden
})();

console.log(secret); // ReferenceError
  • 내부 변수는 외부에서 접근 불가 (은닉)

예시 2: 초기화 코드 실행

const result = (function(a, b) {
  return a + b;
})(2, 3);

console.log(result); // 5

🔍 IIFE의 특징 요약

  • **이름 없는 함수(익명 함수)**를 괄호로 감싸고 즉시 호출
  • 지역 스코프를 만들어 전역 변수 오염 방지
  • 즉시 실행되어 초기화 작업에 적합

🚀 모던 자바스크립트에서의 대안

  1. 블록 스코프 (let, const)
{
  let hidden = 'block scope';
  console.log(hidden);
}
// console.log(hidden); → 에러
  1. ES6 모듈 시스템 (import/export)
  • 모듈 단위로 스코프가 분리되므로 전역 변수 충돌 없이 코드 작성 가능
  1. 즉시 실행 함수 대신 화살표 함수로도 표현 가능
(() => {
  console.log("즉시 실행됨");
})();

✨ 결론

IIFE는 과거 자바스크립트에서 스코프 보호와 초기 실행을 위해 많이 사용되었지만, 현재는 let, const, 모듈 시스템 등으로 그 필요성이 줄어들었습니다. 하지만 레거시 코드나 즉시 실행이 필요한 경우 여전히 쓰일 수 있으므로 이해해두는 것이 중요합니다.

반응형