[FN-Interview] IIFE가 작동하지 않는 이유는?

이 시리즈에서는 front-end-interview-handbook 의 질문들에 답하는 형식으로 채워나갈 예정입니다. 그리고 정확하지 않은 정보나 이건..!;…!!!!! 이다 싶은 부분이 있다면 언제든 댓글 혹은 연락주세요 🙏

📍 IIFE가 작동하지 않는 이유는? 그리고 다음 코드를 IIFE로 만들기 위해서는 무엇을 바꿔야하나요?

const foo = void function bar() { return 'foo'; }();
console.log(foo); // undefined

💡

즉시 실행 함수는 식으로 표현되는 함수를 즉시 실행하는 함수이다. 때문에 식으로써 표현될 수 있는 함수표현식가 즉시 실행 함수로 표현될 수 있다. (MDN 참조)

자바스크립트에서 식으로 표현되는 경우

개념적으로 2가지 유형이 있다.

1. 변수에 할당함으로써의 식
2. 단순히 +, -와 같은 연산자를 이용한 식

예를 들어 const foo = 7; 은 foo라는 변수를 선언하면서 7이란 값을 할당시키기 위해 =연산자를 사용했기 때문에 첫번째 유형이 되고, 1 + 6은 7이란 값을 가지지 않아도 +연산자를 이용했기 때문에 두번째 유형이 된다.

함수표현식 IIFE

const foo = (function bar() { return ‘foo’; })();
console.log(foo) // foo

대표적인 익명함수 IIFE

(function () { alert('foo') })() // foo

이와 같은 표현 외에도 다르게 IIFE를 표현될 수 있는데 이 표현법을 사용하려면 return하는 값이 없는 function이여야 한다.

void function bar() { alert('foo'); })(); // foo
void function () { alert('foo'); })();  // foo

void연산자는 값을 생성하는 표현식을 평가하여 오직 undefined 얻어내기 위한 연산자로, 이 연산자를 즉시실행함수로 사용하면 function 키워드를 표현식으로 간주하여 IIFE로써 실행시킨다.

하지만 처음 주어진 코드에서 사용된 void는 {return ‘foo'}값이 존재하여 void 연산자의 반환값인 undefined가 출력되었고 void 연산자를 이용한 IIFE는 실행되지 않는다.

때문에 주어진 코드를 IIFE로써 실행되게 하려면 void연산자를 삭제하고 괄호를 사용한 형태로 만들어야 한다.

const foo = (function bar() { return 'foo'; })();
console.log(foo); // foo