Diferença entre Declaração de Função e Expressão de Função

Existem algumas diferenças entre Declaração de Função e Expressão de Função, você sabe quais?

Declaração de Função

Uma Função tem obrigatoriamente um nome, logo sua sintaxe seria basicamente assim:


function exibeNome( nome ){
  console.log("Olá " + nome);
}

Quando declaramos uma função (ou variável), podemos referenciá-la antes mesmo de sua declaração:


exibeNome("André");
x = 12;
console.log("valor de x= " + x);

function exibeNome( nome ){
  console.log("Olá " + nome);
}
var x;


O exemplo acima é uma chamada de função válida sem qualquer erro de execução. Isto acontece porque, por padrão, o parser do JavaScript lê todo o seu código antes de executá-lo. E quando ele faz esse parse, ele move todas as definições de funções e variáveis para o topo de sua análise para só então percorrer o código. Isto é chamado de “hoisting“.

 

Expressão de Função

Já no caso de Expressão de Função, o nome não é obrigatório pois, na maioria dos casos, se trata de uma função anônima.
Exemplo:


var quadrado = function(x){ return x * x };
console.log(quadrado(5)); //exibe 25

Perceba que a função não possui nome.
Mas existem casos que podemos atribuir um nome a uma função anônima para utilizarmos a recursão.
Por exemplo:


var calculo = {
  'fatorial': function fatorial(n){
                if(n <= 1) return 1;
                return n * fatorial(n - 1);
              }
};

console.log(calculo.fatorial(5)); // exibe 120

 

Então você pergunta: que diferença isso faz?

A diferença é que quando fazemos a Declaração de Função, permitimos que o parser analise previamente o que será executado enquanto a Expressão de Função é analisada em tempo de execução.
Na declaração de função, devemos prestar atenção pois como mencionado, o JavaScript usa o “hoister” e isso faz com que qualquer declaração de função seja trazida para o início do contexto em que foi declarada. Logo, se houver duas declarações de função, a que prevalecerá sera sempre a última:


function exibeNome( nome ){
  console.log("Olá " + nome);
}
exibeNome("André");

function exibeNome( nome ){
  console.log("Seu nome é " + nome);
}
exibeNome("André");

A execução acima exibirá:
“Seu nome é André”
“Seu nome é André”

Enquanto:


var exibeNome = function ( nome ){
  console.log("Olá " + nome);
};
exibeNome("André");

var exibeNome = function ( nome ){
  console.log("Seu nome é " + nome);
}
exibeNome("André");

Terá como resultado:
“Olá André”
“Seu nome é André”

Se houver alguma dúvida, sugestão ou percebeu algum erro de digitação, não hesite em entrar em contato que responderei tão rápido quanto puder e atribuirei o crédito pela ajuda.

Até mais!
André Fellows

Leave a Reply Cancel reply