IIFE와 arrow function

IIFE란?

 

Immediately Invoked Function Express.

즉, 즉시 실행함수의 약자이다.

 

일회성 함수이거나, 모듈간 스코프분리를 위해서 주로 사용한다.

 

예제는 다음과 같다.

 

// 1
(function () {})()

// 2
(function (){}())

// 3
(() => {})()

 

여기서 한자기 의문이 있다.

2는 왜 되는거지?

 

일단은 "그냥 된다"라고 설명해두고 다른 질문에 답해보자.

 

// 4
(() => {}())

4는 왜 안되는 걸까?

 

2번과 같다고 생각되는데 4번은 되지 않는다.

그 이유는

https://github.com/babel/babel/issues/2118

ArrowFunction: CallExpression not allowed after closing } · Issue #2118 · babel/babel

ES2015 specification:
Arrow functions are AssignmentExpressions, whereas CallExpression requires its left-hand side to be a MemberExpression or another CallExpression.

 

즉, arrow function의 => 는 호출 연산이아니라, 할당 연산으로 취급된다는 뜻이다.

실제 동작은 호출 연산으로 취급되어야 하는것이 맞지만,

<= >= >>= <<= 등의 연산자 때문에 바벨은 할당 연산으로 취급하는 것 같다.

아마 arrow function이 =>라는 키워드를 어떻게든 쓰려다보니 생긴 일종의 버그가 아닐까 싶다.

 

바벨입장에서는 4번은 arrow function은 호출연산이 아닌데 ()로 호출하고 있으니까 에러를 내뱉는다.

 

반면에 2번은 function은 호출 연산으로 취급되기 때문에 다음과 같이 변환될 것이다.

// 2
( (function(){}) () )

1번과 같다.

 

그래서 1,2번은 되는 것이다.