Artigo original: https://www.freecodecamp.org/news/when-to-use-a-function-declarations-vs-a-function-expression-70f15152a0a0/
Série expressões em tecnologia
Provavelmente, você já saber como escrever funções das duas maneiras em JavaScript. function fazerAlgo() {} e () => {} são coisas que escrevemos todos os dias. No entanto, qual é a diferença entre elas e por que usar uma ao invés da outra?
Observação: os exemplos neste artigo, estão em JavaScript.
A primeira diferença: um nome
Ao criar uma função com um nome, temos uma declaração de função. O nome pode ser omitido em expressões de função, tornando a função "anônima".
Declaração de função:
function fazerAlgo() {};Expressão de função:
const fazerAlgo = function() {}Geralmente, vemos funções anônimas usadas com a sintaxe do ES6, assim:
const fazerAlgo = () => {}Hoisting
Hoisting (algo como "içamento" em português) se refere à disponibilidade das funções e variáveis desde "o início" do código, em vez de apenas no local onde são criadas no código. Os objetos são inicializados no momento da compilação e estão disponíveis em qualquer local do seu arquivo.
As declarações de função sofrem hoisting, o que não acontece com as expressões de função.
Fica mais fácil entendermos isso com um exemplo:
fazerAlgo();
function fazerAlgo() {};O código acima não lança um erro. Já o código abaixo, sim:
fazerAlgo();
const doStuff = () => {};Por que usarmos expressões de função
Pode parecer que as declarações de função, com sua capacidade de sofrer hoisting, seja melhor que as expressões de função em termos de utilidade. No entanto, a seleção de uma em vez da outra requer pensar quando e onde a função é necessária. Basicamente, é preciso entender quem precisa saber sobre a função?
As expressões de função são chamadas para evitar a poluição do escopo global. Em vez de seu programa estar ciente de muitas funções diferentes ao mesmo tempo, ao manter as funções anônimas, elas são usadas e esquecidas imediatamente.
IIFE
O nome — que vem do inglês, Immediately Invoked Function Expressions (expressões de função invocadas imediatamente) — já diz tudo. Quando uma função é criada no mesmo momento em que é chamada, é possível usar uma IIFE, que tem esta aparência:
(function() => {})()ou ainda esta:
(() => {})()Para uma visão detalhada das IIFEs, confira este artigo bastante explicativo (texto em inglês).
Callbacks
Uma função que é passada para outra função é normalmente chamada de "função de callback" em JavaScript. Aqui temos um exemplo:
function mapearAcao(item) {
// fazer algo com um item
}
array.map(mapearAcao)O problema aqui está no fato de que mapearAcao estará disponível na aplicação inteira — isso não é necessário. Se essa função de callback for uma expressão de função, ela não estará disponível fora da função que a utiliza:
array.map(item => { //fazer algo com um item })ou
const mapearAcao = function(item) {
// fazer algo com um item
}
array.map(mapearAcao)mapearAcao, porém, estará disponível no código abaixo de sua inicialização.
Resumo
Para resumir, use as declarações de função quando quiser criar uma função no escopo global e torná-la disponível em todo o código. Use expressões de função para limitar o local em que a função estará disponível, manter o escopo global mais leve e fazer a manutenção de uma sintaxe limpa.
Referências
- Declaração de função, documentação da MDN.
- Expressão de função, documentação da MDN.
- Hoisting, glossário da MDN.
Série expressões em tecnologia
Existem muitas expressões que ouvimos por aí, nos encontros e conferências sobre tecnologias. Chega a parecer que estamos todos familiarizados e que concordamos em usar essas expressões da área. Eu, geralmente, não entendo e preciso de explicações. É bem normal alguns desenvolvedores parecerem surpresos que eu não tenha determinado conhecimento.
A verdade é que, frequentemente, o que eu não sei é a palavra certa a ser utilizada. Como seres humanos – em especial, seres humanos desenvolvedores, há uma inclinação a pensar que aqueles que não conhecem o jargão simplesmente não sabem tanto assim. Esta série tem a ver com auxiliar a fornecer ao leitor um entendimento sólido de conceitos de programação que alguém possa dizer que o leitor "deve conhecer".
Este é o segundo artigo da série. O primeiro foi sobre funções de ordem superior (texto em inglês). Procure pelos outros. À medida que eu for frequentando os encontros e conferências sobre tecnologias e fingindo que sei o que meus colegas em tecnologia estão dizendo, mas, depois, quando voltar para casa, eu precisar procurar no Google, fique certo de que haverá outros artigos como este.