Programing/javascript

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

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, 모듈 시스템 등으로 그 필요성이 줄어들었습니다. 하지만 레거시 코드나 즉시 실행이 필요한 경우 여전히 쓰일 수 있으므로 이해해두는 것이 중요합니다.

반응형

'Programing > javascript' 카테고리의 다른 글

자바스크립트 날짜 다루기: Date vs dayjs vs date-fns  (0) 2025.04.24
브라우저 저장소 정리: localStorage vs sessionStorage vs cookie  (0) 2025.04.24
자바스크립트 이벤트 위임(Event Delegation)과 성능 최적화  (0) 2025.04.24
자바스크립트 debounce와 throttle 차이 및 성능 최적화 예제  (0) 2025.04.24
자바스크립트 클로저(Closure)의 개념과 실전 활용 예제  (0) 2025.04.24
자바스크립트 비동기 처리 개념 정리(setTimeout, Promise, async/await)  (0) 2025.04.23
자바스크립트 this 키워드 제대로 이해하기 (함수 / 객체 / 클래스에서)  (0) 2025.04.23
자바스크립트 == vs === 비교 연산자의 차이와 올바른 사용법  (0) 2025.04.23
'Programing/javascript' 카테고리의 다른 글
  • 자바스크립트 이벤트 위임(Event Delegation)과 성능 최적화
  • 자바스크립트 debounce와 throttle 차이 및 성능 최적화 예제
  • 자바스크립트 클로저(Closure)의 개념과 실전 활용 예제
  • 자바스크립트 비동기 처리 개념 정리(setTimeout, Promise, async/await)
Dongkkase
Dongkkase
개발자로 일하면서 부딪히는 문제풀이가 누군가에게 도움이 되길 바라며
    반응형
  • Dongkkase
    정집사의 개발로그
    Dongkkase
  • 전체
    오늘
    어제
    • All (478)
      • 금융 (61)
      • Programing (295)
        • Algorithm (39)
        • API (2)
        • javascript (122)
        • CSS (8)
        • HTML (10)
        • PHP (15)
        • JAVA (27)
        • JSP (17)
        • JSP 예제 (1)
        • IOS (1)
        • Android (1)
        • Sencha Touche (1)
        • bat file, cmd (0)
        • 디버깅 (2)
        • SQL (21)
        • MS-SQL (1)
        • MySQL (13)
        • 보안 (5)
      • Server (14)
        • Docker (1)
        • Windows (9)
        • Linux (3)
        • jeus (1)
      • Database (6)
      • IT 일반 (15)
      • 리뷰 (38)
        • Book (17)
        • 제품 (2)
        • 영화 소개 (11)
        • 음악 소개 (7)
      • 잡생각 (36)
        • 회고 (3)
        • 컬럼 (4)
        • 자료실 (6)
        • 낙서장 (12)
        • 위시리스트 (2)
        • WOW (1)
        • 덕 (1)
  • 인기 글

  • 최근 댓글

  • 태그

    자바스크립트유틸
    읽고 싶은 책
    자바스크립트
    기초
    IT·컴퓨터
    블로그
    JavaScript
    It
    iT's MY LiFE
    사고 싶은 책
    SQL
    Java
    IT블로그
    php
    IT 관련
    위시리스트
    jsp
    자바
    js패턴
    디자인패턴
Dongkkase
자바스크립트 IIFE 패턴(즉시 실행 함수 표현식)의 쓰임새와 모던 대안
상단으로

티스토리툴바