Diferenças entre função declarada e função anônima em JavaScript

Aprenda as principais diferenças entre funções declaradas e anônimas em JavaScript, e como cada uma pode ser usada no seu código.

Qual a diferença entre função declarada e função anônima?

Em JavaScript, você pode criar funções de duas maneiras principais: função declarada e função anônima. Embora ambas sirvam para o mesmo propósito — encapsular um bloco de código reutilizável — elas têm diferenças importantes no comportamento, na forma de declaração e nos casos em que devem ser usadas.

Função Declarada

Uma função declarada é uma forma tradicional de criar uma função em JavaScript. Ela é declarada com a palavra-chave function, seguida de um nome para a função e parâmetros (opcionais). Uma das características principais das funções declaradas é que elas são elevadas (hoisting), ou seja, a função pode ser chamada antes de sua definição no código.

Exemplo de código com função declarada:

function saudacao(nome) {
  console.log('Olá, ' + nome + '!');
}
saudacao('João');

Neste exemplo, a função saudacao é definida com a palavra-chave function, e é chamada logo após sua definição. Uma característica importante aqui é que você pode chamar a função antes de sua declaração no código, devido ao hoisting.

Função Anônima

Uma função anônima é uma função sem nome, geralmente atribuída a uma variável. As funções anônimas não podem ser chamadas antes de sua definição, porque elas não são elevadas como as funções declaradas. Normalmente, funções anônimas são usadas quando uma função precisa ser passada como argumento para outra função ou quando a função é definida inline.

Exemplo de código com função anônima:

let saudacao = function(nome) {
  console.log('Olá, ' + nome + '!');
};
saudacao('Maria');

Neste exemplo, a função anônima é atribuída à variável saudacao, e então chamada com o argumento 'Maria'. Note que a função não possui nome, e não pode ser chamada antes de sua definição, ao contrário da função declarada.

Diferenças entre Função Declarada e Função Anônima

  • Função declarada: possui nome e pode ser chamada antes de sua definição (hoisting). Ideal para situações em que a função precisa ser reutilizada em várias partes do código.
  • Função anônima: não possui nome, e geralmente é usada quando você precisa de uma função temporária, como argumento de outra função ou em expressões. Não pode ser chamada antes de sua definição.

Quando usar cada uma?

  • Use funções declaradas quando você precisar de uma função reutilizável, especialmente se ela for chamada em várias partes do código.
  • Use funções anônimas quando você precisar de uma função temporária ou se a função for usada apenas uma vez, como em callbacks ou como argumentos para outras funções.

Conclusão

Embora funções declaradas e anônimas cumpram a mesma função de encapsular blocos de código, entender quando e como usá-las corretamente pode melhorar a legibilidade e a organização do seu código. A função declarada é útil para funções reutilizáveis, enquanto a função anônima é ideal para situações pontuais, como callbacks ou como valores temporários em expressões.

O uso de funções declaradas e anônimas é um aspecto importante no desenvolvimento em JavaScript. Ambas têm suas aplicações e benefícios específicos, dependendo do tipo de código que você está escrevendo. As funções declaradas são mais apropriadas quando você precisa de uma função que será reutilizada em várias partes do código, enquanto funções anônimas podem ser mais eficientes para lógicas rápidas e callbacks. Ter um bom entendimento sobre essas diferenças ajudará você a escrever código mais modular, eficiente e mais fácil de manter.

Algumas aplicações:

  • Funções declaradas são ideais para bibliotecas e utilitários reutilizáveis em diferentes partes de um aplicativo.
  • Funções anônimas são úteis para callbacks, manipulação de eventos e funções passadas como argumento para outras funções.
  • Funções declaradas facilitam a leitura e o entendimento do código em projetos de longo prazo.
  • Funções anônimas são mais flexíveis quando usadas para funções temporárias ou inline, como em promessas ou quando se deseja criar funções específicas para um único uso.

Dicas para quem está começando

  • Use funções declaradas sempre que você precisar de uma função reutilizável.
  • Experimente funções anônimas em eventos ou quando precisar passar funções como parâmetros em outras funções.
  • Se estiver aprendendo, comece com funções declaradas para entender melhor como o fluxo de código funciona em JavaScript.
  • Não se esqueça de que funções anônimas não podem ser chamadas antes da definição.

Contribuições de Isabela Oliveira

Compartilhe este tutorial: Qual a diferença entre função declarada e função anônima?

Compartilhe este tutorial

Continue aprendendo:

O que é uma função em JavaScript?

Entenda o conceito de funções em JavaScript e aprenda como usá-las para organizar seu código e evitar repetições.

Tutorial anterior

O que são arrow functions (=>) e quando usá-las?

Entenda as arrow functions em JavaScript, como elas funcionam e as vantagens de utilizá-las em relação às funções tradicionais.

Próximo tutorial