Se estiver com pressa, melhor ver os exemplos visibilidade de escopo na resposta do Bacco :)
A principal diferença é de visibilidade de escopo, que o Bacco demonstrou nos exemplos da resposta dele. Para entender como isso funciona, é preciso entender como funciona o que é chamado de variable hoisting em JavaScript. Se você pensa que variáveis e funções são criadas no ponto do código em que são declaradas, você se engana.
Antes de mais nada, uma breve consideração sobre o funcionamento do escopo em JavaScript: existe o escopo global, e existem os escopos de função. Cada função cria um novo escopo. Se existem funções aninhadas, as mais internas enxergam as variáveis das mais externas, mas não o contrário. A resposta do mgibsonbr sobre closures ilustra bem isso:
function x(a1) { // "x" tem acesso a "a"
var a2;
function y(b1) { // "y" tem acesso a "a" e "b"
var b2;
function z(c1) { // "z" tem acesso a "a", "b", e "c"
var c2;
Cada vez que uma função é invocada, é criado um contexto de execução para ela, onde ficam guardadas as variáveis que ela define. No caso da função x
acima, o contexto de execução contém referências para a1
, a2
e y
(respectivamente, um parâmetro, uma variável, e uma função). Agora, considere o seguinte exemplo:
function x(a) {
var a = "foo";
function a() {
// nada
}
alert(typeof a);
}
x(10);
O que vai sair no alert? O tipo "number"
do argumento passado, o tipo "string"
da variável, ou o tipo "function"
da função? Resposta: "string"
(teste você mesmo). Nessa hora, você coça a cabeça e diz:
Mas como assim?! A função foi declarada depois da variável! Devia dar "function"!
É, faz sentido o que você pensou. Acontece que o algoritmo responsável pelo binding dos argumentos, variáveis e funções ao contexto de execução faz isso numa ordem bem específica, que é a seguinte:
- Argumentos
- Declarações de funções
- Variáveis
Se existirem nomes iguais entre argumentos, declarações de funções e variáveis, eles serão sobrescritos obedecendo a essa ordem. No nosso exemplo, a
começa como o número 10
, depois é sobrescrito pela função, e por fim é sobrescrito pela variável (antes da atribuição). Isso tudo acontece antes de qualquer código ser executado na função, incluindo a atribuição do valor "foo"
a a
. Em código, o que ocorre é algo assim:
function x(a) {
function a() {
// nada
}
var a; // undefined, por enquanto
a = "foo";
alert(typeof a); // "string"
}
x(10);
Repare que a declaração da variável é separada da atribuição. Diz-se que a declaração é "erguida" ou "içada" (hoisted) para o topo do escopo. Veja mais este exemplo:
function f() {
var a = 10;
var b = 10;
function c() {}
var d = function() {};
}
Isso na verdade é interpretado assim:
function f() {
function c() {}
var a = undefined, b = undefined, d = undefined;
a = 10;
b = 10;
d = function() {};
}
Olha que coisa! A função c
está disponível desde o início, mas a função d não está! Isso porque c
foi criada via declaração de função, enquanto a função em d
foi criada via expressão de função (declarações sempre têm nome, e sempre começam com function
como a primeira coisa na linha, desconsiderando os espaços). Se quisermos invocar c
antes da linha onde ela é declarada, não há problema, já que o hoisting faz com que ela já esteja disponível:
function f() {
var a = 10;
var b = 10;
c(); // SEM PROBLEMAS!
function c() {}
var d = function() {};
}
O mesmo não é válido para d
: só vai haver uma função em d
após a linha onde é feita a atribuição. Veja:
function f() {
var a = 10;
var b = 10;
d(); // TypeError! Estamos tentando chamar undefined como função
function c() {}
var d = function() {};
}
Portanto, respondendo à pergunta: var name = function()
e function name()
são diferentes porque a primeira é uma declaração de variável, à qual é atribuída uma função, enquanto a segunda é uma declaração de função. Isso tem consequências em relação ao momento que a função estará disponível para ser invocada.