Arrow Functions – Declaração, Funcionamento, Escopos e Contexto (this)

O ECMAScript 6 (ES6) trouxe uma nova forma de se declarar funções. Quando elas são declaradas neste modelo, recebem o nome de Arrow Functions.

As Arrow Functions são muito mais do que apenas uma forma diferente de se escrever uma função. Mas vamos começar vendo as nuâncias na sintaxe.

Teremos, como ponto de partida, uma função declarada do jeito tradicional.

let multiplica = function(num1, num2) {
	return num1 * num2;
}

console.log(multiplica(2, 5));

Ela se torna Arrow Function com a inclusão da seta => e remoção da palavra function.

let multiplica = (num1, num2) => {
	return num1 * num2;
}

console.log(multiplica(2, 5));

Quando você tem uma única instrução no corpo da Arrow Function, pode omitir a sintaxe de bloco, ou seja, as chaves {}. Além disso, deve remover a palavra chave return porque, nesse caso, o retorno será feito de maneira implícita.

let multiplica = (num1, num2) => num1 * num2;

console.log(multiplica(2, 5));

Um corpo sem as chaves e o return é chamado de corpo conciso, "concise body".

Não há problema em quebrar a linha após a seta =>, pois nessa situação, não se aplica o ASI (Automatic Semicolon Insertion, ou Inserção Automática do Ponto-e-Vírgula).

let multiplica = (num1, num2) =>
num1 * num2;

console.log(multiplica(2, 5));

Se você estiver passando somente um parâmetro para a função, também pode retirar os parênteses que o envolvem.

let quadrado = num => num * num;

console.log(quadrado(2));

Contexto (this)

O principal motivo para as Arrow Functions terem sido tão aguardadas pelos desenvolvedores, é a forma como lidam com o this.

Caso você ainda não esteja familiarizado com o this, vou lhe indicar um artigo que me ajudou a entendê-lo.

Antes das Arrow Functions, toda função em JavaScript definia seu próprio contexto, baseado na forma como a função era chamada.

Esse comportamento dificultava um pouco na hora de programar usando o paradigma de Orientação à Objetos.

O this fora de qualquer função, refere-se ao objeto global, que no navegador é Window e em Node, Global.

Contexto global do navegador.

Já o this de uma função tradicional, é o contexto de evocação da mesma.

Com o objetivo de visualizar este comportamento, iremos criar uma função denominada obterThis() que, ao ser chamada, retornará o contexto.

Ao invocar essa função no contexto global do navegador, devemos receber como resposta: Window.

Contexto this de função tradicional.

Na sequência, criaremos uma classe denominada Video, que receberá nossa função obterThis como parâmetro em seu construtor. Essa classe também terá o método play() que, ao ser invocado, executará a função obterThis, recebida pelo construtor de Video.

Nesse caso, como a função será executada no contexto de Video, seu this será exatamente Video.

Contexto dinâmico de função tradicional.

Por outro lado, nas Arrow Functions, o this é sempre o ambiente no qual for declarada a função. Esse é o comportamento esperado na maioria das vezes em que manipulamos o contexto no paradigma Orientado a Objetos.

Sendo assim, ao substituir nossa função tradicional por uma arrow, não importa a partir de qual objeto a chamamos, seu contexto nunca muda. Ele permanece sempre o de onde a função foi declarada.

Ao trocar a sintaxe da função que estamos utilizando de exemplo para arrow, mesmo ela sendo chamada no contexto de Video seu this permanece Window, conexto onde a função foi declarada.

Contexto léxico de Arrow Functions.

Artigos Relacionados

Ir para o topo