3
respostas

Quando usar e não usar? Arrow-function x function

Boa noite a todos,

Gostaria de saber se existe algum momentos que eu não devo usar arrow-function? Quando não é indicado e/ou quando é indicado?

Att. Vinicius

3 respostas

Oi Vinicius, beleza?

Quando você não quer herdar o this e sim definir um novo valor para o this então é necessário usar a notação de function.

Um exemplo bem raso, mas que ajuda na compreensão de sua pergunta, é caso você esteja trabalhando dentro do console do browser onde o this referência o objeto Window. Se você usar arrow functions corre o risco de sobrescrever alguma propriedade do objeto Window, por que as arrow functions não tem seuthis próprio. Já usando a notação defunction poderá trabalhar tranquilamente por que um novo this será criado no contexto dessa função.

Acabou duplicando a resposta aqui.

A Arrow Function não possui o seu próprio contexto de execução.

Por exemplo:

const button = document.querySelector('#click_here');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

Esse código não funcionaria corretamente pois o this não referencia o document. Nesse contexto o certo seria utilizar function(), Veja o exemplo:

const button = document.querySelector('#click_here');
button.addEventListener('click', function() => {
  this.classList.toggle('on');
});

Concluindo: A utilização da Arrow Function, vai depender de como você quer utilizar o this.

Você pode se aprofundar mais, lendo a documentação em: MDN Web Docs