Duvida sobre arrow function

As arrow functions, introduzidas no ES6 (ECMAScript 2015), são uma maneira mais concisa de escrever funções em JavaScript. Além de terem uma sintaxe mais curta, elas compartilham o mesmo contexto léxico do código ao redor, o que significa que o valor de this dentro de uma arrow function é o mesmo de fora dela. Isso é particularmente útil em cenários onde o contexto de this pode mudar, como em callbacks ou eventos.

Sintaxe Básica

A forma mais simples de uma arrow function é:

(param1, param2, ..., paramN) => { statements }

Se a função tiver apenas um parâmetro, você pode omitir os parênteses:

param => { statements }

Se a função executar uma única expressão, você pode omitir as chaves {} e o return é implícito:

param => expression

Exemplos

Função Tradicional:

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

Equivalente em Arrow Function:

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

Com Múltiplas Instruções:

Se você precisa de mais de uma instrução, use chaves e a palavra-chave return (se a função deve retornar algo):

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

Sem Parâmetros:

Para funções sem parâmetros, use parênteses vazios:

const helloWorld = () => "Olá, mundo!";

Como Ler uma Arrow Function

Uma arrow function pode ser lida como "parâmetros vão para uma ação". Por exemplo, (a, b) => a + b pode ser lido como "a e b vão para a soma de a e b".

this em Arrow Functions

Um dos benefícios mais significativos das arrow functions é o tratamento do this. Em funções tradicionais, this pode mudar dependendo de como a função é chamada. Arrow functions não têm seu próprio this. Em vez disso, elas capturam o valor de this do escopo onde foram criadas. Isso é útil, por exemplo, em callbacks, onde o contexto de this pode não ser o que você espera:

function Timer() {
  this.segundos = 0;
  setInterval(() => {
    this.segundos++;
    console.log(this.segundos);
  }, 1000);
}

new Timer();

Neste exemplo, a arrow function dentro de setInterval usa o this da função Timer, então this.segundos refere-se à propriedade segundos do objeto Timer.

As arrow functions simplificam a escrita de funções menores e ajudam a evitar problemas comuns relacionados ao this. Contudo, elas não são adequadas para todos os casos, especialmente quando você precisa de funções que utilizam bind, call, apply, ou que são usadas como métodos de um objeto.