Diferença entre Arrow function e traditional function

Chatbots com Whatsapp e Cielo integrados – Nesse curso, eu vou te mostrar como o consumidor poder realizar um pagamento por dentro do aplicativo do WhatsApp, aonde o seu cliente vai entrar numa conversa como entraria numa conversa com qualquer pessoa ou com a sua empresa, navegar entre os produtos/serviços em menus simples enviados pelo chatbot, adicionar esses produtos/serviços no carrinho de compras, e num determinado ponto do chat, um link exclusivo é enviado para o cliente preencher os dados do cartão de crédito. No final, a análise é devolvida para o Whatsapp no qual a conversa foi iniciada. Inscreva-se.

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.

Leia também:

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.

Testando Arrow function javascript

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.

Testando o 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.

Suporte as funções de arrow pelos principais navegadores é de mais de 96%

Para aprender mais sobre JavaScript, continue lendo os posts sobre o assunto no blog.

Veja mais conteúdo relacionado:

Trabalhando com Promises JavaScript Tipos de componente React Padrões de código JavaScript no WordPress

Você vai gostar também:

Como Aprender a programar – Um guia completo.

Eventos das comunidades de TI

As vantagens de escrever artigos para o site

Ramos da Informática – Comunidade Dev

A armadilha dos argumentos com valores padrão