Além de um formato mais elegante na escrita de funções arrow function possui uma diferença importante sobre as funções tradicionais JavaScript.
Com EcmaScript 6 JavaScript, também conhecido como ES6 tivemos a adição de vários recursos, incluindo suporte para classes, módulos e arrow functions assunto que abordaremos nesse artigo.
O que é arrow function?
Primeiramente, se você não está familiarizado com arrow function, elas foram introduzidas na versão do EcmaScript 6 ou também conhecido EcmaScript 2015. Vamos comparar os dois formatos:
Formato tradicional
const saudacoes = function(nome) {
return `Olá, ${nome}`
}Code language: JavaScript (javascript)Arrow function
const saudacoes = nome => `Olá, ${nome}`;Code language: JavaScript (javascript)Mas as diferenças não são apenas na escrita, o arrow function também possui algumas particularidades, a primeira delas é que elas sempre são funções anónimas, além disso, o seu comportamento muda referente a função tradicional.
Valor this
Por muitos anos a chamada do valor this foi uma dor de cabeça para quem estava começando com JavaScript, pois o seu valor era dinâmico, e o que isso significa?
O contexto mudava de como a função era chamada. Criemos uma classe para entender esse ponto:
class Pessoa {
constructor(nome) {
this.nome = nome;
}
nomeComArrow() {
setTimeout(() => {
console.log(this.nome);
}, 100);
}
nomeComTradicional() {
setTimeout(function() {
console.log(this.nome);
}, 100);
}
}
const fellyph = new Pessoa('Fellyph');
fellyph.nomeComArrow();
fellyph.nomeComTradicional();Code language: JavaScript (javascript)Se executarmos o código acima com node, teremos um erro no método nome tradicional.
Como podemos ver a primeira chamada acontece, mas a segunda gera um erro porque o this é undefined, isso acontece pelo fato do escopo dinâmico, com arrow mantém o this como a classe Pessoa. Já a função tradicional é chamada na última linha fora da classe assim o this aponta para raiz da aplicação, caso esse código rode no navegador o this seria o window.
Uso de construtores
Com as funções tradicionais podemos utilizar a palavra-chave new para criar uma instância de um tipo que criamos via função:
function Cidade(nome) {
this.nome = nome;
}
const caruaru = new Cidade('Caruaru');
console.log(caruaru instanceof Cidade);Code language: JavaScript (javascript)Caso queiramos usar construtores em arrow-function, tiremos ter um erro: TypeError: Cidade is not a constructor.
Objeto de argumentos
Nas funções tradicionais temos um objeto onde são armazenados todos os argumentos passados para a função. Esse objeto pode ser acionado pela palavra-chave arguments.
function funcaoTradicional() {
console.log(arguments);
}
funcaoTradicional('a', [1, 2], fellyph); Code language: JavaScript (javascript)Mesmo sem especificar quais os argumentos foram passados para função, conseguimos acessar com a chamada do objeto arguments.
Já com a arrow function, não temos objeto atrelado a função, se executarmos o código em node, teremos o retorno dos argumentos da aplicação node e se utilizarmos o this teremos undefined como retorno.
const funcaoTradicional = () => {
console.log(this.arguments);
}
funcaoTradicional('a', [1, 2], fellyph); Code language: JavaScript (javascript)Return Implícito
Um dos recursos que simplificam ainda mais o uso de funções arrow é o uso do return implícito, no começo do tutorial utilizei um exemplo onde tinha a seguinte função:
const saudacoes = nome => `Olá, ${nome}`;
console.log(saudacoes('José'));Code language: JavaScript (javascript)Neste caso, a ausência das chaves, sinalizam que essa função retorna uma string com `Olá, ${nome}`. Isso pode ser utilizado para cálculos e retorno de valores.
Essas foram minhas considerações sobre as principais diferenças entro funções tradicionais e funções de arrow. Esse novo formato ajuda bastante na hora de escrever funções em JavaScript. Mas, ainda existem exceções que o formato tradicional é necessário.
Apesar de ser uma funcionalidade já a um bom tempo na especificação do JavaScript ainda tem muita gente que não usa os benefícios da arrow function. Muita gente tem receio por conta do suporte dos navegadores, um dos empecilhos era a falta de suporte pelo Internet Explorer 11 que foi descontinuado este ano.
Para aprender mais sobre JavaScript, continue lendo os posts sobre o assunto no blog.
Veja mais conteúdo relacionado:
Deixe um comentário