150

Vejo em alguns códigos diferentes maneiras de definir uma função, mas desconheço a diferença se é que existe. Qual a diferença entre estas funções?

Função 1

function teste(valor){
    return (valor > 1) ? true : false;
}

Função 2

var teste = function(valor){
    return (valor > 1) ? true : false;
}
2
  • 23
    sempre que você tem comparações como a > b, a <= b, etc o resultado da comparação ja é true ou false :)
    – Largato
    Commented 18/04/2014 às 3:24
  • 2
    A função 1 é defenida quando o script é analizado(parse time) e a função 2 quando é executado(run-time)
    – tinos
    Commented 9/10/2014 às 11:33

5 Respostas 5

117

Declaração de Função: function name()

Uma declaração de função define uma variável de função sem a necessidade de atribuição de variável. São constructs independentes, e não podem ser aninhados em blocos que não sejam de função (ver comentário mais abaixo). Seria como um "parente" das declarações de variável. Assim como variáveis precisam ser declaradas com var, funções são declaradas com function.

function bar() {
   return 3;
}

bar() //3
bar  //function


Expressão de Função: var name = function()

Uma expressão de função define uma função como parte de uma expressão sintática maior, geralmente uma atribuição de variável. Funções definidas com expressões de função podem ter nome ou serem anônimas. Não podem iniciar por function, por isso os parênteses são usados na "auto invocação" no exemplo abaixo:

//expressão anônima de função
var a = function() {
   return 3;
}

//expressão nominada de função
var a = function bar() {
   return 3;
}

//expressão "autoinvocada" de função
(function digaOi() {
    alert("Oi!");
})();


Exemplo de visibilidade de escopo:

<script>
  funcaoUm(); // Da erro, ainda nao foi definida
  var funcaoUm = function() { }
</script>

<script>
  var funcaoDois = function banana() {
    banana(); // Nao da erro, está no escopo
  }
  banana(); // Da erro, está fora do escopo (exceto no IE)
</script>

<script>
  funcaoTres(); // Nao da erro, é resolvida ao compilar
  function funcaoTres() { }
</script>


"Funções não podem ser declaradas em blocos que não sejam de código"

Vejamos este código:

if (true) {
  function foo() {
    return 'primeiro';
  }
} else {
  function foo() {
    return 'segundo';
  }
}
foo();

Alguns browsers vão retornar "primeiro", outros "segundo"!

De acordo com a especificação, declarações de função até podem aparecer dentro de blocos de função, mas não dentro de blocos de if, while, for e outros blocos estruturais.

Nestes casos, o que deveria ocorrer é um syntax error, porém praticamente nenhuma das implementações faz isso na prática, e o que é pior, cada uma trata códigos como o do exemplo de uma maneira diferente (com exceção de BESEB e DMDScripot, conforme esta fonte).


Fontes: Function Declarations vs. Function Expressions, SOen, kangax

7
60
+150

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.

6
  • 5
    +1 eu até sabia que o hoisting existia mas não conhecia nesse nível de detalhe! E pelos meus testes, a coisa ainda é mais confusa do que parece: se você declarar var x; (sem atribuição) junto de function x() { }, o var x não tem nenhum efeito (i.e. ele não recebe undefined em momento algum). Exemplo. (Nota: segundo a especificação linkada - item 8.c - o seu exemplo está sim correto, não estou questionando isso; apenas dei um outro exemplo onde a "interpretação" é um pouco diferente da sua)
    – mgibsonbr
    Commented 2/10/2014 às 21:22
  • 1
    Eu omiti esse "detalhe" porque já estava ficando complicado demais :) Se você olhar o passo 8 do algoritmo, vai ver que ao tentar criar as variáveis ele não faz nada se já existir um binding para o identificador (o if do passo (c) não tem else).
    – bfavaretto
    Commented 2/10/2014 às 21:35
  • +1, ótima resposta @bfavaretto, nossa não conhecia essa ordem de binding, do javascript, o total esclarecimento destes detalhes pode fazer com que não nós metemos em erros "ilógicos", como a alteração da ordem de declaração pelo interpretador. (Se isso acontece comigo até ontem, iria acha que o browser ou javascript estavam bugados. =D) Commented 21/03/2015 às 1:06
  • @bfavaretto, então como você demonstrou nos exemplos, às variáveis declaradas com a palavra-chave var são 'içadas', antes mesmos das funções? visto que tanto var e function possuem Hoisting. Commented 27/06/2020 às 13:52
  • Então @felipecardozo, as funções são içadas antes das variáveis — o que significa que se uma variável e uma função tiverem o mesmo nome, a variável sobrescreve a função.
    – bfavaretto
    Commented 29/06/2020 às 21:50
33

Apesar da explicação bastante completa do Bacco, vale apontar uma coisa sobre as expressões de função.

Quando você armazena uma função inline anônima em uma variável, o identificador da variável não se torna o nome da função. A função continua anônima, ela apenas pode ser acessada por meio de uma variável (que tem nome). Você pode verificar isso facilmente olhando a propriedade name da função:

var foo = function(){}
console.log(foo.name); //Não mostra nada
var bar = function baz(){}
console.log(bar.name) //Mostra "baz"

É relevante saber isso para obter mensagens de erro mais claras. Caso algum erro aconteça quando você chama uma função anônima, a pilha irá mostrar apenas "anonymous function". Caso o erro ocorra em uma função inline que tem nome, o nome da mesma aparecerá.

Como apontado pelo bfavaretto, a propriedade name é a maneira de acessar o nome da função externamente, mas o nome também está disponível dentro da própria função, o que permite que funções inline sejam recursivas¹.
Para obter o mesmo comportamento recursivo de funções anônimas, você deve usar arguments.callee, o que DEVE ser evitado pois esta propriedade está deprecada e não funciona em strict mode.

¹ - Versões antigas do IE vazam essa variável para fora do escopo, cf. kangax.github.io/nfe

1
  • 3
    Verdade, isso é importante. Vale lembrar que no caso de expressões de função nomeadas, esse nome está disponível de duas maneiras: 1) fora da função, via fnObj.name, como você mostrou; 2) dentro da função, diretamente pelo nome, permitindo chamada recursiva (mas versões antigas do IE vazam essa variável para fora do escopo, cf. kangax.github.io/nfe).
    – bfavaretto
    Commented 2/10/2014 às 19:18
11

Existem muitas diferenças, uma delas é o hoisting, function tem prioridade no interpretador.

foo(); foo = function() {}
//saída: Uncaught ReferenceError: foo is not defined (foo não está definido)

bar(); function bar() {}
//saída: undefined (indefinido)
-1

a 1ª é uma função pura e você recupera apenas a função.ex: function(valor){ return (valor > 1) ? true : false; }

document.write(function())

e a 2ª a função está dentro de uma variável,pois assim você pode recuperar a a variável e não a função.ex: var teste = function(valor){ return (valor > 1) ? true : false; } document.write(teste)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .