IIFE(Immediately Invoked Function Expression)

IIFE(Immediately Invoked Function Expression)는 '즉시 실행 함수 표현식'이라는 뜻으로, 자바스크립트에서 함수를 정의하자마자 즉시 실행하는 패턴을 의미한다.

 

IIFE의 기본 구조

IIFE는 다음과 같은 기본적인 구조를 가진다.

(function() {
  // 함수 내용
})();

• 익명 함수를 괄호 ()로 감싼다.
• 함수 뒤에 또 다른 괄호 ()를 붙여 함수를 즉시 호출한다.

IIFE의 사용 이유 및 개념

1. 스코프 제한:
   • IIFE 내부에서 선언된 변수와 함수는 IIFE 내부 스코프에서만 접근할 수 있다.
   • 이를 통해 전역 스코프의 오염을 방지하고, 변수명 충돌을 막을 수 있다.
2. 즉시 실행:
   • 함수를 정의하자마자 즉시 실행하므로, 초기화 코드나 한 번만 실행하면 되는 코드를 작성하는 데 유용하다.
3. 모듈화:
   • IIFE를 사용하여 관련 있는 변수와 함수를 그룹화하고, 필요한 부분만 외부로 공개하여 모듈화된 코드를 작성할 수 있다.

---

IIFE는 마치 일반 코드처럼 해당 줄에서 실행되는 함수인가?

맞다. IIFE(Immediately Invoked Function Expression)는 함수를 정의함과 동시에 해당 줄에서 즉시 실행되는 함수이다. 마치 일반 코드를 작성하는 것처럼 IIFE를 선언하고 즉시 실행할 수 있다.

 

함수 형태인데 왜 즉시 실행되는가?

IIFE는 일반적인 함수 선언식이 아니라 함수 표현식의 특별한 형태이며, 해당 형태 자체가 {} 내부의 함수를 정의함과 동시에 즉시 호출하는 것과 동일한 효과를 가진다.

 

익명 함수여야만 하나?

반드시 익명 함수여야 하는 것은 아니다. IIFE는 익명 함수를 사용하는 것이 일반적이지만, 명명된 함수를 사용하여 IIFE를 만들 수도 있다.

하지만 이름을 가진다고 이후 재사용이 가능한 것이 아니라 디버깅 용도나 IIFE 내에서 재귀 호출을 하는 용도로 사용된다.

 

재사용이 불가능한데 모듈화라고 하는 이유가 무엇인가?

모듈화(modularization)는 소프트웨어 개발에서 코드의 재사용성을 높이고 유지보수를 용이하게 하기 위해 코드를 독립적인 부품(모듈)로 분리하는 것을 말한다. 간단하게 말하면 공용 부품(함수)을 생산해서 필요한 곳에 사용하는 것이다.

 

여기서 IIFE는 한번 사용하고 끝나는 일 회용 부품이라 사용한 부품을 다시 빼서 다른 곳에 사용하는 것은 아니다.

하지만 스코프 격리와 캡슐화 특성을 만족하여 모듈화라고 하는 것이다.

 

• 스코프 격리(Scope Isolation): IIFE 내부 변수 및 함수를 외부 스코프와 격리하여 전역 스코프 오염 방지
• 캡슐화(Encapsulation): IIFE 내부 구현 숨기고 필요한 기능만 외부로 노출

 

 

결론

IIFE는 일반 코드처럼 작동한다. 하지만 스코프를 제한함으로 써 스코프가 섞이는 것(오염)을 막고 IIFE 내부에서 생성된 함수 또는 객체를 외부로 반환하여 재사용이 가능하다.(클로져) 때문에 외부와 독립된 폐쇄형 생태계를 가지면서 어디서든 호출하여 사용 가능한 일반 코드라고 볼 수 있다.(모듈화)

예시

1. 변수 스코프 제한

• IIFE 내부에서 선언된 변수는 IIFE 내부 스코프에서만 접근이 가능하다.
• 전역 스코프와의 변수 충돌을 방지할 수 있다.

(function () {
    var message = "Hello, IIFE!";
    console.log(message); // "Hello, IIFE!"
  })();
  
  // console.log(message); // ReferenceError: message is not defined

2. 초기화 코드 실행

• 페이지 로드 시 한 번만 실행해야 하는 초기화 코드를 IIFE 내부에 작성할 수 있다.
• 변수의 스코프 관리가 용이하다.

(function () {
    var count = 0;
  
    function initialize() {
      // 초기화 작업
      count = 10;
      console.log("초기화 완료");
    }
  
    initialize();
  
    // 다른 코드
    console.log("count:", count); // "count: 10"
  })();

3. 클로저 활용

• IIFE를 사용하여 클로저를 생성하고, 내부 변수를 외부에서 접근할 수 있도록 만들 수 있다.
• 데이터 은닉 및 상태 유지를 구현하는 데 유용하다.

const counter = (function () {
    let privateCounter = 0;
  
    function changeBy(val) {
      privateCounter += val;
    }
  
    return {
      increment: function () {
        changeBy(1);
      },
      decrement: function () {
        changeBy(-1);
      },
      value: function () {
        return privateCounter;
      },
    };
  })();
  
  console.log(counter.value()); // 0
  counter.increment();
  counter.increment();
  console.log(counter.value()); // 2
  counter.decrement();
  console.log(counter.value()); // 1

4. 모듈 패턴 구현

• IIFE를 사용하여 관련 있는 변수와 함수를 그룹화하고, 필요한 부분만 외부로 공개하여 모듈화된 코드를 작성할 수 있다.

const myModule = (function () {
    let privateVariable = "private";
  
    function privateFunction() {
      console.log(privateVariable);
    }
  
    return {
      publicFunction: function () {
        privateFunction();
      },
    };
  })();
  
  myModule.publicFunction(); // "private"
  // console.log(myModule.privateVariable); // undefined
  // myModule.privateFunction(); // TypeError: myModule.privateFunction is not a function

5. 라이브러리/플러그인 개발

• 전역 스코프를 오염시키지 않고 독립적인 라이브러리 또는 플러그인을 개발하는 데 유용하다.

이러한 예제들을 통해 IIFE가 스코프 관리, 초기화 작업, 클로저 활용, 모듈화, 라이브러리/플러그인 개발과 같은 다양한 상황에서 유용하게 사용될 수 있음을 알수 있다.