[JS] IIFE를 올바르게 동작하는 방식에 대하여

IIFE(Immediate Invoked Function Expression)

말 그대로 해석을 해보면 된다. 즉시 실행함수를 가리킨다.

function foo() {}();

그렇다면 위의 코드는 왜 실행이 안되는 것일까?

자바스크립트 Parser는 function foo() {} 이 부분은 함수의 선언부인 반면에 후자(괄호의 쌍)는 함수를 호출하려는 시도이지만 실제로 어떠한 이름도 지정이 된 것이 없기 때문에 Uncaught SyntaxError: Unexpected token ). 와 같은 에러 상황이 발생할 것이다. 

 

이를 해결하기 위해서는 괄호를 추가하는 두 가지의 방법이 있다. 

(function foo(){ })()

(function foo(){ }())

function으로 시작하는 선언문은 함수 선언으로 간주된다. 이 함수를 () 안에 감싸버리면 뒤에 ()를 붙임으로서 실행할 수 있는 함수 표현식이 된다. 이러한 함수는 전역 범위에 노출되지 않으며 본문 내에서 자신을 참조할 필요가 없는 경우 이름을 생략할 수도 있다. 

 

다른 한 방식이 또 있기는 하지만, 별로 추천하고 싶은 방식은 아니다. 이는 void operator를 추가하는 것이다. 

void function foo(){ }();

이 접근 방식에는 한 가지 문제가 있다. 주어진 식의 평가는 항상 'undefined'이기 떄문에 IIFE 함수가 어떤 것을 반환하더라도 이를 사용하지 못한다. 

const foo = void (function bar() {
  return 'foo';
})();

console.log(foo); // undefined

 

Reference

https://www.frontendinterviewhandbook.com/javascript-questions#explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife

JavaScript trivia questions in front end interviews | Front End Interview Handbook