[Javascript] IIFE 알아보기

IIFE 알아보기

IIFE(Immediately Invoked Function Expression)는 함수 표현식을 즉시 실행하는 방식입니다.

이 표현식은 코드의 범위를 제한하거나, 전역 변수 오염을 방지하는 효과가 있습니다.

자세히 알아보도록 하겠습니다.

IIFE 문법

IIFE는 일반적으로 아래와 같은 형태로 작성됩니다.

ES6에서는 화살표함수 형태로 작성할 수 있습니다.

(function() {
  // 즉시 실행될 코드
})();

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

이 표현식은 함수 선언문의 경우 아래와 같은 코드와 유사하게 동작합니다.

const app = function() {
    // 즉시 실행될 코드
};
app();

동작 결과가 같다면 왜 굳이 이런 형태로 함수를 선언하고 실행할까요?

이어서 알아보겠습니다.

IIFE 장점과 단점

장점

IIFE의 특징은 함수가 선언되고 즉시 실행된다는 점입니다.

이는 함수 내부에서 선언된 변수들이 외부에서 직접 참조될 수 없으며 일반적으로 1회성 실행에 적합한 스코프를 형성합니다.

1. 모듈화 : 특정 기능을 모듈처럼 구분하고, 외부와의 의존성을 최소화할 수 있습니다.
2. 초기화 : 프로그램이나 화면을 초기화하고 한 번만 실행되는 코드들을 사용할 때 유용합니다.
3. 네이밍 충돌 방지 : 전역 네임스페이스에서 변수나 함수명 충돌을 방지할 수 있습니다.
4. 전역 오염 방지 : 함수 내부에서 선언, 사용된 변수들은 함수 범위 안에서만 존재하기 때문에 전역 오염을 피할 수 있습니다.

단점

반면 함수명을 익명으로 선언하는 경우가 종종 있기도 하고, 선언과 동시에 실행되는 특성상

함수의 실행 흐름을 추적하기 어려울 수 있습니다.

1. 익명 IIFE의 경우 스택트레이스에 함수 명이 남지 않기 때문에 디버깅 난이도가 상승할 수 있음
2. 코드가 반복될 수 있음

IIFE 표기법

IIFE는 함수를 표현식으로 만든 뒤 즉시 실행시키는 것이 핵심이기 때문에 이를 만족시키기 위한 여러 가지 표기법이 존재합니다.

아래에서 실무에서 주로 다루는 IIFE 표기법을 정리해보겠습니다.

1. 기본형

실무에서 자주 사용되고 논란의 여지도 비교적 적은 방식으로, 인싸 개발자들은 아래와 같이 작성합니다.

① Function Expression + 괄호

(function () {
  console.log('IIFE');
})();

가장 많이 쓰이는 형태입니다.

함수 선언문이 아니라 표현식임을 명확히 하기 위해 괄호로 감싸줍니다.

② 실행 괄호 위치 변경

(function () {
  console.log('IIFE');
}());

실행괄호를 안쪽에 둔 형태입니다.

스타일이나 컨벤션 선호도에 따라 다르겠지만 동작은 1번 케이스와 동일합니다.

③ 디버깅용 이름 포함

(function initApp() {
  console.log('init');
})();

비록 외부 스코프에서 참조할 수 없지만 디버깅이나 스택트레이스를 위해 이름을 붙여준 형태입니다.

이름을 가지고 있는 덕분에 재귀 호출도 가능합니다.

④ 화살표 함수

(() => {
  console.log('arrow iife');
})();

2. 물음표수집가형

다음은 동일하게 작동하지만 '왜 굳이 이런 식으로 썼지?'와 같은 피드백을 수집하는 괴짜 개발자라면 고민해 볼 만한 방식입니다.

① ! 연산자 사용

!function () {
  console.log('IIFE');
}();

부정 연산자 !가 함수 선언문을 강제로 표현식으로 만들어버립니다.

가독성도 안 좋고 진짜 뭐지? 싶을 수 있으니 사용하지 맙시다.

② + 연산자 사용

+function () {
  console.log('IIFE');
}();

단항 연산자 +가 함수 선언문을 표현식으로 만들어주지만 1번과 마찬가지로 가독성이 좋지 않습니다.

③ void 사용

void function () {
  console.log('IIFE');
}();

반환값을 항상 undefined로 만듭니다.

④ 논리연산자 사용

true && function () {
  console.log('IIFE');
}();

얼핏 조건부 실행처럼 보이지만 가독성이 매우 나쁘고 의도 파악도 좀 어렵습니다.

3. 활용형

① 매개변수 전달

(function (window, document) {
  console.log(window.location.href);
})(window, document);

전역 객체에 접근할 수 있도록 외부 값을 주입한 케이스입니다.

② 반환값으로 값/객체 생성

const config = (function () {
  const API_URL = '/api';
  return {
    url: API_URL
  };
})();

함수 실행 결과를 변수에 주입하는 형식으로, 모듈 패턴의 핵심이 되는 패턴입니다.

IIFE 심화 활용 코스

아래부터는 문법 설명용보다는 실제 실무에서 쓰이는 예제 여러가지를 정리해보겠습니다.

1. 초기화 전용 스코프 + 전역 오염 차단

페이지 진입 시 한 번만 실행되며

초기설정, 이벤트 바인딩, 환경의 체크 등을 수행합니다.

(function initPage() {
  const isMobile = window.innerWidth < 768;
  const body = document.body;

  if (isMobile) {
    body.classList.add('is-mobile');
  }

  document.querySelector('#btn')
    ?.addEventListener('click', () => {
      console.log('clicked');
    });
})();

isMobile, body 등을 전역에 노출할 필요가 없으며, 실행 환경을 체크하고 라벨링하는 1회성 작업에 특화되어있는 코드입니다.

2. Private State를 가진 모듈 패턴

상태를 외부에서 변경하지 못하도록 인터페이스만 공개하고 내부 로직은 은닉합니다.

const Counter = (function () {
  let count = 0; // private state

  function increase() {
    count++;
  }

  function getCount() {
    return count;
  }

  return {
    inc: increase,
    get: getCount
  };
})();

Counter.inc();
Counter.inc();
console.log(Counter.get()); // 2

3. 조건부 실행 + 안전한 단발형 로직

특정 시점, 특정 조건에서만 실행되며 실행 여부 자체를 감춰야할 때 사용되는 패턴입니다.

(function () {
  if (!window.matchMedia('(max-width: 1024px)').matches) {
    return;
  }

  const banner = document.querySelector('.mobile-banner');
  if (!banner) return;

  banner.classList.add('show');
})();

 

마치며

ES Module이라는 선진화된 방식이 존재함에도 불구하고 IIFE가 필요한 이유는

레거시 프로젝트를 유지보수해야 하거나 빠르고 간편한 초기화 로직이 필요하기 때문일 것입니다.

 

다음 글에서는 ES Module에 대해 공부해보도록 하겠습니다.

 

감사합니다.