IIFE (Immediately-Invoked Function Expression) 정리

Published in

sjk5766

4 min readMay 2, 2020

본 포스팅에서는 IIFE를 두 가지를 기준으로 정리합니다.

IIFE 문법

일반적으로 IIFE 사용할 때 아래와 같이 두 가지 방법이 있습니다.

ES6 에서 도입된 Arrow function과 함께 사용할 수 도 있습니다.

리턴 값이 필요없을 때 문법적으로 IIFE를 아래와 같이도 사용 가능합니다. (알고만 넘어가세요, 실제는 위 방식을 많이 씁니다.)

자바스크립트 코드를 해석할 때 function 으로 시작하면 함수 선언식으로 인지하지만 위 코드처럼 !,+,-,~,void 등의 연산자와 키워드를 사용할 경우 함수 표현식으로 인지하기 때문에 위와 같은 문법으로 사용이 가능합니다.

만약 IIFE가 return 값이 존재할 경우 위 방식을 사용하면 아래와 같이 예상치 못한 결과가 나타납니다.

연산자나 void는 보다는 (function() {} )() 이 널리 활용되므로 위 방법은 알고만 넘어가면 됩니다.

IIFE에 인자를 전달할 수도 있습니다.

또한 IIFE에 이름을 붙일 수도 있습니다.

종종 아래와 같이 IIFE 앞에 semicolon 이 붙는 경우를 봤을 겁니다.

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

이는 IIFE 이전 코드의 semicolon이 생략된 경우 에러가 발생하기 때문에 대비한 겁니다. 구체적인 예시 하나를 보겠습니다.

var name = value(function() {
  console.log('semi')
})();

위 코드는 아래와 같이 해석됩니다. IIFE 이전 코드에 semicolon이 없을 경우 함수의 인자로 전달되서 에러가 발생할 수 있습니다.

var name = value(function() {
  console.log('semi')
})();

언제, 왜 IIFE를 사용하나

IIFE의 주요 이점은 아래와 같습니다.

프로그램 초기화 시점에 아래 init 함수를 실행한다고 가정합니다.

function init() {
  var operate = 'init';
  console.log(operate)
}init()

이 함수는 전역 Scope에 선언되어 name collision 이 발생할 확률을 높이며, 개발자 의도와 달리 다른 code에 의해 재호출 될 수도 있습니다.

따라서 외부 코드로부터 사용되지 않는 단 한번 호출하는 코드들, 이 코드에서 사용하는 변수와 함수들은 IIFE를 사용하여 전역 Scope 오염을 방지하고, 다른 개발자가 실수로 호출할 수 없도록 하는게 바람직합니다.

(function init() {
  var operate = 'init';
  console.log(operate)
})()

이렇게 IIFE 내부에 선언된 변수와 함수는 외부에서 접근이 불가능합니다.

(function init() {
  var operate = 'init';
  console.log(operate)
})()console.log(operate) // operate is not defiend

IIFE의 또 다른 use case들을 살펴보겠습니다.

IIFE의 대표적 use case 중 하나로 Closure와 함께 priavte 변수를 생성하여 사용합니다. 아래 예제에서 count라는 private 변수를 만들어 사용하고 있습니다.

IIFE가 실행과 동시에 Closure 함수를 리턴하고 있으며 이때 count 변수는 private 변수로 외부에서 접근할 수 없게 됩니다.

또 다른 use case 로 변수 이름 alias를 들 수 있습니다. jQuery와 또 다른 라이브러리를 사용하고 있는데 둘 다 $ 을 전역 변수로 사용할 때 인자를 사용하는 IIFE로 아래와 같이 사용할 수 있습니다.

window.$ = function libraryA() {
};(function($) {
})(jQuery);

여기까지 IIFE를 살펴봤습니다. 저도 아직 실무에서 IIFE를 사용한 적이 없는데 IIFE가 필요한 시점을 알고 적절하게 사용 할 수 있으면 좋겠네요. 감사합니다.

Written by Jeongkuk Seo