[JS] javascript에서 IIFE(Immediately Invoked Function Expression)패턴이란?

 

 

 

IIFE패턴에 대해 정리하게 된 계기

 

프로젝트에 프리티어를 적용하는데, 이상한 구문을 발견...

처음에는 프리티어가 제대로 작동하지 않는다고 생각했다.. 하지만 나중에 이게 IIFE패턴이고

프리티어는 정상적으로 작동하고 있다는 것을 알게 되었다.

 

관련 내용은 아래 링크 참조

 

[Prettier] 프리티어 사용시 IIFE패턴 앞에 세미콜론(;)이 붙는 현상에 대한 이야기

[Prettier] 프리티어 사용시 IIFE패턴 앞에 세미콜론(;)이 붙는 현상에 대한 이야기

 

 

IIFE패턴 기본 사용법

 

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

정의되자마자 즉시 실행되는 Javascript Function 를 말한다.

IIFE라는 이름은 Ben Alman이 블로그에서 처음으로 시작되었습니다.

-MDN 참조

 

 

기본구조

//샘플코드1
(function () {
	// code
})();

//샘플코드2
(() => {
	// code
})();

//샘플코드3
(async () => {
	// code
})();

 

 

샘플코드

//일반함수 선언 및 호출
function callAlert() {
	Alert('callAlert를 실행합니다.')
}

callAlert()

//IIFE패턴으로 함수선언과 동시에 함수호출
(function callAlert() {
	Alert('callAlert를 실행합니다.');
})();

 

 

IIFE패턴은 어떤 경우에 사용할까?

우선 다음과 같은 이유로 IIFE패턴을 사용한다고 한다.

 

필요없는 전역 변수의 생성을 막을 수 있다.

- 한번만 사용하는 코드, 즉 코드를 재사용하지 않는 경우에 IIFE함수를 사용할 수 있다.

 

샘플코드

(function() {
  function sampleFuntion() {
    // code
  }
})();

/**
 * 위와 같이 sampleFuntion이라는 함수를 IIFE패턴 안에 선언하면
 * 외부에서는 sampleFuntion에 접근할 수 없다. 또한 같은 이름의 함수가 있더라도 
 * 충돌을 피할 수 있다.
 * 만약 외부에서 사용하고 싶다면 window.sampleFuntion와 같이 window 객체 안에 넣는다.
 */

 

 

이외에도 변수의 값을 즉시 할당라거나, 자주 사용되는 특정한 키워드를 압축할 때에도 사용한다고 한다.