즉시 실행 함수 표현(IIFE)

Immediately Invoked Function Expression의 약자. 정의됨과 동시에 즉시 실행하는 함수를 뜻하며, 괄호로 둘러싸인 익명함수 ( function () { statements } ) 와 즉시 실행 함수를 생성하는 괄호 ( )로 구성된다.

(function () {
    statements
})();

( function () { statements } )
전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지하고, IIFE 함수 내부로 다른 변수들이 접근하는 것을 막는다.

(function () {
    let name = "Harry Potter";
})();

name // throws "Uncaught ReferenceError: name is not defined"

• Closure와 함께 private data를 사용할 때 쓰인다.

const counter = (function() {
    let count = 0;
    return function() {
      return `해리포터의 ${++count}번째 시리즈`;
    };
  })();
  
  console.log(counter()); // 해리포터의 1번째 시리즈
  console.log(counter()); // 해리포터의 2번째 시리즈

( )
자바스크립트 엔진이 함수를 즉시 해석하여 실행하게 한다.

IIFE는 이렇게 Arrow function으로도 사용하거나,

(() => let name = "Harry Potter")();
name // throws "Uncaught ReferenceError: name is not defined"

이름을 붙힐 수도 있다!

(function wizard() {
    let name = "Harry Potter"
})();
name // throws "Uncaught ReferenceError: name is not defined"

1) IIFE를 변수에 할당

IIFE 함수 자체를 저장하는 것이 아니라, 함수가 실행된 결과(return 값)를 저장한다.

const result = (function () {
    let name = "Harry Potter"; 
    return name; 
})(); 

result; // "Harry Potter"

2) IIFE에 인자를 전달

const array= [1, 2, 3];

(function(array) {
    for(let i=0; i<array.length; i++)
        console.log("Harry Potter");
})(array);

// "Harry Potter"
// "Harry Potter"
// "Harry Potter"

3) ; 세미콜론과 함께

const name = wizard
(function() {
  console.log('Harry Potter')
})();

// ReferenceError: wizard is not defined

IIFE 이전 코드 const name = wizard에 ; (semicolon)이 생략되면,

const name = wizard(function() {
  console.log('Harry Potter')
})();

// ReferenceError: wizard is not defined

이렇게 해석이 된다. 그래서 ReferenceError가 나므로 혹시 모를 상황을 방지하기 위해

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

IIFE 앞에 ; 을 붙히기도 한다.

참고 자료
IIFE
1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기
IIFE (Immediately-Invoked Function Expression) 정리