이 시리즈에서는 front-end-interview-handbook 의 질문들에 답하는 형식으로 채워나갈 예정입니다. 그리고 정확하지 않은 정보나 이건..!;…!!!!! 이다 싶은 부분이 있다면 언제든 댓글 혹은 연락주세요 🙏
📍 IIFE가 작동하지 않는 이유는? 그리고 다음 코드를 IIFE로 만들기 위해서는 무엇을 바꿔야하나요?
const foo = void function bar() { return 'foo'; }();
console.log(foo); // undefined
💡
즉시 실행 함수는 식으로 표현되는 함수를 즉시 실행하는 함수이다. 때문에 식으로써 표현될 수 있는 함수표현식가 즉시 실행 함수로 표현될 수 있다. (MDN 참조)
자바스크립트에서 식으로 표현되는 경우
개념적으로 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