Quiz

Explique porque o seguinte não funciona como um IIFE: `function foo(){ }();`. O que precisa ser alterado para torná-lo corretamente um IIFE?

Topics
JavaScript

IIFE significa expressões de função imediatamente invocadas. O interpretador JavaScript lê function foo(){ }(); como function foo(){ } e ();, onde o primeiro é uma declaração de função e o último (um par de parênteses) é uma tentativa de chamar uma função, mas não há nome especificado, portanto, ele retorna Uncaught SyntaxError: Unexpected token ).

Aqui estão duas maneiras de corrigir que envolve a adição de mais parênteses: (function foo(){ })() e (function foo(){ }()). Declarações que começam com function são consideradas como function declarations ao envolver essa função dentro de (), ela se torna uma function expression que pode ser executada com o () subsequente. Essas funções não são expostas no escopo global e você pode até omitir o nome delas se não precisar fazer referência a si mesmas dentro do corpo.

Você também pode usar o operador void: void function foo(){ }();. Infelizmente, há um problema com essa abordagem. A avaliação da expressão fornecida é sempre undefined, então, se sua função IIFE retornar algo, você não poderá usá-la. Um exemplo:

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

Exercícios

Verifique seu entendimento
Beta
Verifique seu entendimento Exercício
Verifique seu entendimento Exercício

Why does the first snippet invoke successfully without grouping parentheses around the function, while the second is a syntax error?

const result = function answer() { return 42; }();
function answer() { return 42; }();