O que são Arrow Functions e como usar no JavaScript

Por: Angelo Luis Ferreira | 22/04/2020 Acessos: 4.152

Neste tutorial vamos mostrar de forma bem prática como usar a expressão arrow function na programação JavaScript.

Arrow Function é uma nova forma de criar funções usando o operador "=>" que foi introduzida a partir da versão ES6 do JavaScript. Esta nova forma tem uma estrutura mais reduzida quando comparada com a sintaxe de uma expressão de função (fuction expression) - Criando funções através de uma Expressão de Função.

Observações:

a) Arrow function nada mais é do que uma forma de escrever funções mais compacta.

b) A expressão arrow function é compatível com a maioria dos navegadores atuais e é muito utilizado atualmente.

c) Arrow funcions são melhor aplicadas para funções que não sejam métodos, e elas não podem ser usadas como construtoras (constructors). No link a seguir, veja quando você  nunca deve utilizar arrow functions  - Quando não usar arrow function.

d) Portanto, como vimos anteriormente, não é recomendado aplicar arrow functions quando utilizamos "this" em um método. Leia para saber mais sobre o "this" em objetos: Criando objetos e o uso do "this" no JavaScript  

Formas de criar funções no JavaScript

1. Antes da versão ES6 (ES2015) existia basicamente duas formas para definir funções em JavaScript, sendo elas:

1.1. Declaração de Função

function somar(a, b) {
	return a + b
}

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

1.2. Expressão de Função

let somar = function(a,b) {
	return a + b
}

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

1.2.1. Para saber mais sobre expressão de função veja o artigo: Criando funções através de uma Expressão de Função

1.2.2. Para nomear uma expressão de função utilizamos uma variável. No exemplo acima a variável somar recebe a função anônima, caracterizando-se como uma expressão de função.

1.2.3. Ao contrario da declaração de função (function declarations), expressão de função (function expressions) não podem ser invocadas antes de sua definição no código. Teste isso no Squids Editor

Arrow Functions

2. A versão ES6 (ES2015) do JavaScript trouxe uma nova forma mais compacta de escrever uma função, a expressão array function.

2.1. Arrow Function - padrão

const somar = (a,b) => {
	return a + b
}

 Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

2.1.1. Comparando-se a expressão arrow function com uma expressão de função (function expressions), podemos verificar que:

2.1.1.1. Não há necessidade da palavra-chave function

2.1.1.2. Há um novo operador => (arrow ou flecha em português). Veja na imagem abaixo a forma padrão do arroy function:

2.1.3. Ambas expressões não podem ser invocadas antes da definição do código.

2.1.4. Ambas expressões são anônimas, e para nomeá-las é necessário a utilização de uma variável (let) ou uma constante (const).

2.2. Arrow function - com apenas uma linha no corpo

const somar = (a,b) => a + b

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

2.2.1. Neste caso, existindo somente uma linha, podemos eliminar as chaves {} e a palavra-chave return, deixando a expressão mais compacta ainda.

const somar = a => a + 3

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

2.2.1. Neste caso, os parêntesis também tornam-se opcionais.

Usando "this" com a estrutura Arrow Function como método

3.1. Como já mencionamos anteriormente, arrow functions não devem ser aplicadas quando utilizamos "this" dentro de métodos em um objeto. Veja no exemplo a seguir onde utilizamos um método com uma expressão de função e o mesmo método com arrow function:

HTML

<button onclick="cliente.mostrar()">Expressão de Função</button>
<button onclick="cliente.arrow()">Arrow Function</button>
<p id="aqui"></p>

JavaScript

let cliente = {
	nome: "Pedro",
    sobrenome: "Filho",
    mostrar: function() {
    	document.querySelector('#aqui').innerHTML = `Nome Cliente: ${this.nome} ${this.sobrenome}`
    },
    arrow: () => {
    	document.querySelector('#aqui').innerHTML = `Nome Cliente: ${this.nome} ${this.sobrenome}`
    }           
}

  Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

3.3.1. Usando a estrutura expressão de função como método, this.nome e this.sobrenome retornam os valores de nome e sobrenome do objeto.

3.1.2. Usando a estrutura arrow function como método, this.nome e this.sobrenome retornam undefined. Isto ocorre porque arrow functions não possuem o próprio "this".

Obs.: Caso não se utilize o "this" no método, a estrutura arrow function poderá ser utilizada normalmente.

Documentação Oficial

1. [arrow functions] » Sobre a estrutura arrow function - MDN Web Docs.

2. [funções] » Sobre como definir funções - MDN Web Docs.

3. [functions] » Funções em JavaScript - MDN Web Docs.