Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

A principal diferença é de visibilidade de escopo, que o Bacco demonstrou nos exemplos da resposta deleresposta 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 closuresresposta do mgibsonbr sobre closures ilustra bem isso:

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:

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:

Fim da Recompensa com 150 pontos de reputação concedidos por brasofilo
Fonte Link
bfavaretto
  • 66,2mil
  • 11
  • 151
  • 228

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:

  1. Argumentos
  2. Declarações de funções
  3. 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.