Ajuda em Javascript | Funções normais VS Funções Anônimas ( function() {} e () => {} )
Galera, quando eu devo criar uma função normal e quando eu crio uma anônima? Ex:
function somar(n1, n2) {
return n1 + n2
}
VS
const somar = (n1, n2) => {
return n1 + n2
}
Minha dúvida é que basicamente as duas são a mesma coisa, mas quando eu faço usando a palavra-chave function, e quando eu faço usando const? Se você sabe, me ajude por favor! :) Obrigado!
Tem casos em que tanto faz, mas há algumas diferenças.
Primeiramente, vale notar que no primeiro caso vc declarou uma função usando function, e no segundo vc criou uma arrow function (a sintaxe (argumentos) => { etc }). Só isso já faz com que não sejam iguais, pois há várias diferenças entre arrow functions e funções definidas com function: veja aqui e aqui para mais detalhes.
Dito isso, mesmo que vc usasse function expression em vez de uma arrow function:
const somar = function (n1, n2) {
return n1 + n2;
}
Ainda sim seria diferente.
Por exemplo, sabia que isso aqui funciona?
console.log(somar(1, 2)); // 3
function somar(n1, n2) {
return n1 + n2;
}
Pois é, eu posso chamar uma função antes dela ser definida. Isso acontece por causa do hoisting, que é basicamente um mecanismo que move as declarações de funções (entre outras coisas, veja o link) para o topo do escopo, antes do código ser executado.
Porém, com arrow function ou com function expression não funciona:
console.log(somar(1, 2)); // erro!
const somar = function (n1, n2) {
return n1 + n2;
}
console.log(somar(1, 2)); // erro!
const somar = (n1, n2) => {
return n1 + n2;
}
Ambos os códigos acima dão erro. No Chrome, a mensagem foi:
Uncaught ReferenceError: somar is not defined
E no Node foi:
ReferenceError: Cannot access 'somar' before initialization
Isso porque o que temos aqui é uma declaração de variável (const somar), cujo valor é a função anônima. Mas como estamos tentando usá-la antes da atribuição, dá erro.
Para mais detalhes, veja aqui, aqui e aqui.
Outra diferença é que uma função "normal" pode ser "re-declarada":
function somar(n1, n2) {
return n1 + n2;
}
function somar(n1, n2) {
return n1 - n2;
}
console.log(somar(1, 2)); // -1
Ou seja, o que acaba valendo é a última versão dela, por isso o código acima imprime -1 em vez de 3.
Agora se eu fizer isso:
const somar = function (n1, n2) {
return n1 + n2;
}
somar = function (n1, n2) {
return n1 - n2;
}
console.log(somar(1, 2));
Aí dá erro na segunda atribuição:
TypeError: Assignment to constant variable
Isso porque a variável foi declarada como const, ou seja, não posso atribuir um novo valor a ela. Claro que se ela tivesse sido declarada com var ou let, aí seria possível alterá-la, mas enfim, esta é outra diferença (e este comportamento seria o mesmo se eu usasse arrow function).
Tem Esse post aqui no Tabnews.
Sempre é bom pesquisar antes, porque a maioria das dúvidas de iniciantes já foram respondidas aqui no Tabnews ou em algum outro lugar. Temos a barra de pesquisa daqui exatamente para isso.
Cara, acredito que no final isso é um gosto pessoal, por mais das diferenças que ja foram mencionadas nos demais comentários.
Eu honestamente gosto de usar as expressões de acordo com o 'objetivo' que aquela função vai fazer.
Para algo mais 'simples' eu normalmente uso uma arrow function
const algoSimples = () => {
// ...
}
E para coisas mais 'complexas' como um submit por exemplo, eu gosto de usar function
function submit(){
// ...
}
No final das contas a diferença é mais pessoal do que funcional, na minha opnião.