Arrow function

Oii Mitsuyoshi, tudo bem?

Diferenças Principais:

1. Sintaxe mais curta: Arrow functions têm uma sintaxe mais concisa. Por exemplo:

   • Função normal: function somar(a, b) { return a + b; }
   • Arrow function: const somar = (a, b) => a + b;

2. this vinculado lexicalmente: Em funções normais, o valor de this depende de como a função é chamada. Em arrow functions, this é definido no momento em que a função é criada, seguindo o contexto onde está inserida (contexto léxico).

3. Não podem ser usadas como construtores: Você não pode usar arrow functions com o operador new.

Utilização de Arrow Functions:

• Callbacks e funções que exigem this do contexto onde são criadas: Por exemplo, em métodos de manipulação de eventos ou em operações com arrays que utilizam métodos como map, filter, reduce, etc.
• Funções que necessitam de uma sintaxe concisa e clara.

No seu contexto específico, ao trabalhar com setInterval para criar um temporizador no projeto Fokus, a arrow function pode ser muito útil. Ela permite que você mantenha o contexto de this se precisar acessar propriedades do objeto dentro do callback do temporizador, além de proporcionar uma sintaxe mais limpa e direta.

Por exemplo, ao usar setInterval com uma arrow function, você garante que qualquer referência a this dentro da função aponte para o contexto desejado, evitando problemas comuns que ocorrem quando this é manipulado em funções tradicionais.

const iniciarContagem = () => {
  let segundos = 60;
  const intervalId = setInterval(() => {
    segundos--;
    console.log(segundos);
    if (segundos === 0) clearInterval(intervalId);
  }, 1000);
};

Neste exemplo, a arrow function dentro de setInterval permite que você use variáveis (segundos e intervalId) do escopo superior sem confusão sobre o que this se refere.

Um abraço e bons estudos.