즉시 실행 함수(IIFE)

IIFE는 함수를 정의하고 즉시 호출하는 패턴입니다. IIFE의 실행은 함수 선언과 동시에 이루어지며, 함수 내부의 코드는 모두 즉시 실행됩니다.

* 변수의 스코프를 제한하여 전역 스코프를 오염시키지 않고, 중복된 변수 이름을 방지합니다.
* 모듈 패턴을 구현하여 변수와 함수를 캡슐화하고, 다른 코드와 격리된 스코프를 생성합니다.
* 초기화할 데이터를 IIFE 내부에서 처리합니다.
* 클로저를 생성하여 상태를 유지합니다.

IIFE의 구문은 다음과 같습니다.

(function() {
  // IIFE 코드
})();

1. 전역 스코프 오염을 방지할 때

(function() {
  const message = 'Hello, world!';
  console.log(message); // "Hello, world!"
})();

console.log(message); // ReferenceError: message is not defined

IIFE를 사용하면 함수 내부에서 선언한 변수는 함수 스코프 내부에 존재하게 됩니다. 이는 전역 스코프를 오염시키지 않으며, 다른 코드에서 변수 이름 충돌 문제를 방지할 수 있습니다.

2. 모듈 패턴을 구현할 때

const myModule = (function() {
  const privateVariable = 'This is private';

  return {
    publicVariable: 'This is public',
    getPrivate: function() {
      return privateVariable;
    }
  }
})();

console.log(myModule.publicVariable); // 'This is public'
console.log(myModule.getPrivate()); // 'This is private'

ES6에서는 모듈 기능이 추가되어서 IIFE를 사용하지 않아도 모듈을 쉽게 만들 수 있습니다. 그러나 ES6 이전의 버전에서는 모듈 패턴을 구현하기 위해 IIFE를 사용하는 것이 일반적이었습니다.
IIFE를 사용하여 모듈 패턴을 구현하면 변수와 함수를 캡슐화하여 다른 코드와 격리된 스코프를 생성할 수 있습니다.

3. 초기화할 데이터를 처리할 때

const myApp = (function() {
  let initialized = false;

  function init() {
    // 초기화 코드 실행
    initialized = true;
  }

  // window.onload 이벤트 리스너 등록
  window.onload = function() {
    init();
  };

  // 애플리케이션 API
  return {
    isInitialized: function() {
      return initialized;
    }
  }
})();

console.log(myApp.isInitialized()); // false
// window.onload 이벤트 발생 후 초기화 함수 실행
console.log(myApp.isInitialized()); // true

이 예제에서는 IIFE를 사용하여 window.onload 이벤트 리스너를 등록하고, 이벤트가 발생했을 때 초기화 함수를 실행합니다. 이렇게 하면 애플리케이션이 로딩되었을 때 초기화 코드가 실행되므로 초기화 작업이 끝나기 전까지 다른 코드가 실행되는 것을 방지할 수 있습니다.

예시를 하나 더 들어봅시다.

const themes = (function() {
  const data = [
    { name: 'Light', primaryColor: '#ffffff', secondaryColor: '#f2f2f2', textColor: '#333333' },
    { name: 'Dark', primaryColor: '#333333', secondaryColor: '#222222', textColor: '#ffffff' },
    { name: 'Blue', primaryColor: '#0077cc', secondaryColor: '#0055a5', textColor: '#ffffff' }
  ];
  
  const getThemeByName = name => data.find(theme => theme.name === name);
  
  return {
    data,
    getThemeByName
  };
})();

console.log(themes.data);
console.log(themes.getThemeByName('Dark'));

이 예제에서는 themes 변수를 IIFE로 초기화하고, 해당 IIFE는 data 배열과 getThemeByName 함수를 반환합니다. data 배열은 색상 테마 데이터를 포함하며, getThemeByName 함수는 주어진 이름과 일치하는 색상 테마를 반환합니다.

themes 변수는 이러한 데이터와 함수를 모두 포함하는 객체입니다. 이 객체를 사용하여 data 배열을 출력하고, getThemeByName 함수를 사용하여 Dark 테마를 검색하고 출력합니다.

이러한 방식으로 IIFE를 사용하면 데이터와 함수를 캡슐화하고 필요한 경우에만 노출시킬 수 있으므로 코드를 더욱 안전하게 유지할 수 있습니다. 이 예제에서는 색상 테마 데이터를 초기화하는 데 IIFE를 사용했지만, 실제 회사에서는 데이터베이스 연결 설정, 서버 구성 또는 기타 구성 요소 등에서도 IIFE를 사용하여 초기화할 수 있습니다.