IIFE란?

Immediately Invoked Function Expressions.
함수 정의와 동시에 즉시 호출되는 즉시 실행 함수.

즉시 실행 함수는 단 한 번만 호출이 되며, 다시 호출할 수 없다.

어떻게 사용하나요?

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

(function () { 
  console.log('IIFE2') 
}()); // IIFE2

• 이렇게 함수 리터럴로 작성해 사용할 수 있다. 기명, 익명 함수 모두 가능하다.
• 리터럴 말고도 함수 앞에 연산자를 붙여서 사용할 수도 있고, 앞에 값과 이어진 값으로 평가받는것을 방지하기 위해서 세미콜론을 붙이기도 한다.
  *단 이방법은 화살표함수에서는 사용할 수 없다.

왜 ( )로 감싸주어야 하나요?

function(){ } 키워드를 사용할 경우 js코드를 해석하는 파서가 이를 함수선언문(statement)으로 인지하기 때문이다. 위의 이미지에서처럼 ()로 감싸지 않고 실행시키면 에러가 생긴다.

문은 js 해석기에게 명령을 지시하고 사라지는 것이기 때문에 "값"으로 남지 않는다.
따라서,

• 변수에 할당하거나,
• ( )로 감싸서

이것이 함수선언문이 아닌 함수표현식(expression)이라는 것을 명시적으로 나타내야한다.

왜 사용하나요? 장점은?

한 번만 실행하는 함수인 경우 사용한다.

• 함수iifetest를 다시 실행시키면 에러가 나는 것을 볼 수 있다.
• 예시로 초기 화면이 로딩되었을 때만 실행하면되는 함수일 경우 사용할 수 있다.

함수의 리턴값을 변수에 바로 할당해 사용하고자 할 때 사용한다.

• 함수 표현식(Function expression)은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 과정을 거친다.
  - 아래 이미지와 같이 일반 함수를 변수에 할당해 표현식으로 작성하고, 함수addFunc를 콘솔찍어보면 함수 add가 리턴하는 값이 콘솔에 찍히는 것을 알 수 있다.
  - 함수 add를 콘솔찍어보면 함수자체가 찍히는 것을 확인할 수 있다.
  
• 하지만 즉시 실행 함수는 함수를 정의하고 바로 실행하여 이러한 과정을 거치지 않는다. 즉, 함수 자체는 저장하지 않고, 즉시 실행해 리턴값만 얻어 사용할 수 있다.
  -addFunc2의 값 4가 콘솔에 찍히는 것은 확인이 되지만, add2함수는 정의된 적이 없다는 에러가 난다.

불필요한 전역 변수와 함수를 생성하지 않기 위해 사용. 전역 스코프를 오염시키지 않을 수 있다.

• 전역에 선언한 변수와 함수는 중복이 될 가능성이 있다. 이런 충돌을 방지하기 위해 사용한다.

클로저와 함께 사용하면 프라이빗 데이터를 이용할 수 있다.

const counter = (() => {
  let num = 0;
    
  return {
    increase: () => num++,
    decrease: () => num--,
  }
    
})();
console.log(counter.increase()); // 1
console.log(counter.increase()); // 2
console.log(counter.increase()); // 3
console.log(counter.decrease()); // 2
console.log(counter.num); // undefined !!! 접근할 수 없음 !
console.log(counter); 
/* [object Object] {
	increase: () => number++,
    decrease: () => num--
	} */

응용

IIFE를 직접 사용해본 일이 잘 없었는데, 재귀 알고리즘을 하나 풀어보면서 사용한 코드를 첨부해본다.
스트링이 주어졌을 때 만들수 있는 아나그램을 배열 형태로 리턴하는 알고리즘 문제. 새로웠다 !
anagram 함수는 최초 한 번만 즉시 실행해도 이후에는 재귀적으로 실행되는 함수이기 때문에 IIFE로 사용할 수 있다.

function allAnagrams(string) {

  let obj = {};

  (function anagram (ana, str) {
    if (str === '') { obj[ana] = 1; }

    for (let i = 0; i < str.length; i++) {
      anagram(ana + str[i], str.slice(0, i) + str.slice(i + 1));
    }
  })('', string);

  return Object.keys(obj);
};