다음이 IIFE로 작동하지 않는 이유를 설명하십시오: "function foo(){ }();". 제대로 IIFE로 만들려면 무엇을 변경해야 합니까?

이 코드는 토큰 오류를 반환합니다.

function foo(){ }(); // Error: Unexpected token ')'

괄호

두 번째 괄호(표현식 평가를 기대하는 그룹화 연산자) 안에 표현식을 넣으면 오류가 사라집니다.

function foo(){ }(1);

따라서 토큰 오류가 평가할 표현식이 없는 두 번째 괄호로 인한 것임을 알고 있습니다.

그러나 ... 여전히 IIFE로 작동하지 않습니다.

고장

인사말을 기록하도록 foo()를 변경해 보겠습니다. 보시다시피 콘솔에 아무것도 기록되지 않습니다.

function foo(){ console.log('Hello from foo!') }(1); // Nothing logged to the console

이는 foo()가 호출되지 않기 때문입니다.

사실, foo()가 다음과 같이 호출될 것으로 예상하는 것은 잘못되었습니다.

function foo(){ console.log('Hello from foo!') }();

두 번째 괄호는 여기에서 호출foo()을 의미하지 않기 때문입니다. 그리고 그것은 남겨진 함수 선언 function foo(){ } 이 표현식이 아니기 때문입니다. 그것은 단지 정의입니다.

파서는 위의 코드를 다음과 같이 인식합니다.

function foo(){ console.log('Hello from foo!') };
();

고치다

두 번째 괄호가 (즉시) foo() 를 호출하도록 하려면 먼저 함수 선언이 함수 표현식으로 평가되도록 해야 합니다. 그리고 우리는 다른 괄호로 그것을 합니다.

(function foo(){ console.log('Hello from foo!') });

그런 다음 계속해서 호출 괄호를 적용할 수 있습니다.

(function foo(){ console.log('Hello from foo!') }(); // "Hello from foo!"

또 다른 수정은 전체 코드를 가장 중요한 괄호로 묶는 것입니다. 이렇게 하면 IIFE로도 작동합니다.

(function foo(){ console.log('Hello from foo!') }()); // "Hello from foo!"

여기에서 마지막 괄호를 포함한 모든 것이 하나의 표현식의 일부로 간주되므로 foo()가 호출됩니다.


참조

Immediately-Invoked Function Expression (IIFE)

IIFE