Nuances das Expressões Funcionais em JavaScript

O nome Function Expression (Expressão de Função) não é dado à toa. Ele realmente significa isso - que tais funções são parte de alguma expressão.

Por exemplo, podemos somar uma string qualquer e uma função sem nome:

javascriptlet str = 'str' + function() {return 3;};
console.log(str); // exibirá 'strfunction() {return 3;}'

Por que vemos um resultado tão estranho, e não o número 3? Porque o segundo termo - não é o resultado da execução da função, mas seu código fonte (afinal, não chamamos essa função, apenas a escrevemos).

Ou seja, o nome expressão funcional indica que tal função participa de alguma expressão.

A atribuição a uma variável também é uma expressão:

javascriptlet func = function() {
  console.log('!');
};

Pode-se também, por exemplo, passar a função como parâmetro para console.log e ele exibirá seu código fonte no console - isso também será considerado uma expressão:

javascriptconsole.log(function() {return 3;});

Por que isso é importante: porque a diferença entre Function Declaration (Declaração de Função) e Function Expression (Expressão de Função) não está absolutamente no fato de que a primeira função é criada com um nome, e a segunda inicialmente não tem um nome. Isso não é verdade.

Exemplo. Aqui temos uma função sem nome, mas que não participa de nenhuma expressão (ou seja, nenhuma ação é realizada com ela, falando de forma simples):

javascript/*
  Esta função será uma Function Declaration (Declaração de Função),
  mas com um erro de sintaxe:
*/
function() {
  console.log('!');
}

Esse código simplesmente gerará um erro! Por quê: já que a função não participa de nenhuma expressão, o navegador a considera uma Function Declaration (Declaração de Função), mas não encontra seu nome e gera um erro.

Para que o erro desapareça, precisamos fazer com que a função se torne parte de alguma expressão. Por exemplo, escrevemos a operação + antes dela:

javascript+function() { // tal código é correto
  console.log('!');
};

Como isso funciona: por si só, a operação + não faz nada, é o mesmo que escrever em vez do número 3 o número +3 - é permitido, mas não muda nada.

Mas no caso da função - muda. Agora nossa função não está simplesmente escrita, mas participa de uma expressão. Portanto, não haverá mais erro. Também não haverá resultado da execução da função, pois nós apenas a escrevemos, mas não a chamamos.

Em vez de +, pode-se escrever qualquer coisa. Por exemplo:

javascript-function() { // tal código é correto
  console.log('!');
};

!function() { // tal código é correto
  console.log('!');
};

Pode-se também colocar nossa função entre parênteses, neste caso ela também se tornará uma expressão funcional:

javascript(function() { // tal código é correto
  console.log('!');
});

javascriptfunction func() {
  console.log('!');
}

javascriptlet func = function() {
  console.log('!');
}

javascript+function() {
  console.log('!');
}

javascript!function func() {
  console.log('!');
}

javascript-function func() {
  console.log('!');
}

javascript1 + function func() {
  console.log('!');
}

javascript(function func() {
  console.log('!');
})

javascriptconsole.log(
  function() {
    console.log('!');
  }
);