즉시 실행 함수 표현식(IIFE, Immediately Invoked Function Expression)

정의되자마자 바로 실행되는 함수

1. 기본 형태

(function() {
  console.log("즉시 실행됨");
})();

• (function() { ... }) : 함수 선언을 괄호로 감싸서 표현식(expression)으로 만든다.
• () : 함수를 정의하자마자 곧바로 실행시킨다.

2. 활용 목적

1) 변수의 스코프(범위) 제한

ES6 이전에는 let, const가 없어서 var를 쓰면 전역 변수가 되어버리는 경우가 많았다.
이때 IIFE로 감싸면 지역변수처럼 동작시킬 수 있었다.

(function() {
  var temp = "지역변수";
  console.log(temp);
})();

console.log(typeof temp); // undefined (IIFE 밖에서는 접근 불가)

2) 초기화 코드 실행

프로그램 시작 시 한 번만 실행할 코드(설정, 초기 데이터 로딩 등)을 묶어서 실행할 때 사용

const config = (function() {
  const secret = "abcd1234"; // private 값
  return {
    apiKey: secret,
    version: "1.0"
  };
})();
console.log(config.apiKey); // "abcd1234"

3) 모듈 패턴 구현(ES6 이전 방식)

위에 지역변수처럼 활용했던 특징을 private처럼 활용할 수도 있다.

const Counter = (function() {
  let count = 0; // private
  return {
    increment() { count++; return count; },
    decrement() { count--; return count; },
    getCount() { return count; }
  };
})();

console.log(Counter.increment()); // 1
console.log(Counter.increment()); // 2
console.log(Counter.getCount());  // 2

4) TypeScript의 Enum 구현

TypeScript에서 Enum을 정의하고 JavaScript에서 컴파일된 것을 보면
다음과 같이 생겼다.

// TypeScript에서의 Enum 정의
enum Role {ADMIN, READ_ONLY, AUTHOR};

// JavaScript에서의 Enum 구현
var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["READ_ONLY"] = 1] = "READ_ONLY";
    Role[Role["AUTHOR"] = 2] = "AUTHOR";
})(Role || (Role = {}));

enum은 컴파일 시 값이 한 번만 초기화되어야 하는 오브젝트다.
따라서 Role을 초기화하는 코드를 즉시 실행함수 안에 넣어서 초기화 로직을 한 번만 실행하고, 전역에는 결과만 남기게 하는 것이다.

3. ES6이후의 활용

let, const, class, module 등이 생겨서 IIFE의 필요성이 줄었으나,
즉시 실행이 필요한 초기화 코드나 클로저로 은닉할 때 자주 활용된다.