Na lição anterior, você aprendeu como trabalhar com funções, que são pedaços reutilizáveis de código que ajudam a tornar seu código mais modular, mais fácil de manter e mais eficiente. Todos os exemplos anteriores usaram a sintaxe regular de função, assim:

function greetings(name) {
  console.log("Hello, " + name + "!");
}

Mas outra forma de escrever funções em JavaScript é criar uma expressão de função arrow. Aqui está como você pode refatorar o exemplo anterior para usar a sintaxe de arrow function:

const greetings = (name) => {
  console.log("Hello, " + name + "!");
};

Neste exemplo revisado, estamos criando uma variável const chamada greetings e atribuindo a ela uma função anônima. A maior parte da sintaxe parecerá familiar para você, exceto pela ausência da palavra-chave function e pela adição da seta (=>) entre o parâmetro name e o corpo da função. Se sua lista de parâmetros tiver apenas um parâmetro, você pode remover os parênteses assim:

const greetings = name => {
  console.log("Hello, " + name + "!");
};

Se a sua função arrow não tiver parâmetros, então você deve usar os parênteses assim:

const greetings = () => {
  console.log("Hello");
};

Ao aprender sobre funções pela primeira vez, você teve que envolver o corpo da função em chaves. Mas se o corpo da sua função contiver apenas uma única linha de código, você pode remover as chaves assim:

const greetings = name => console.log("Hello, " + name + "!");

É importante notar que remover os parênteses e as chaves para a sintaxe de função regular não funcionará. Você receberá erros se tentar fazer algo assim:

// This will produce syntax errors 
function greetings name console.log("Hello, " + name + "!");

Esses tipos de funções de uma linha só funcionam se você estiver usando a sintaxe de função arrow. Outro conceito chave é a declaração return. Aqui está um exemplo de uso da sintaxe de função arrow para calcular a área:

const calculateArea = (width, height) => {
  const area = width * height;
  return area;
};

console.log(calculateArea(5, 3)); // 15

Estamos criando uma variável dentro da função chamada area e então retornando essa variável. Mas poderíamos limpar um pouco nosso código e retornar o próprio cálculo:

const calculateArea = (width, height) => {
  return width * height;
}; 

console.log(calculateArea(5, 3)); // 15

Se você tentou remover as chaves e colocar o cálculo na mesma linha, então você receberia uma mensagem Uncaught SyntaxError: Unexpected token 'return':

const calculateArea = (width, height) => return width * height;

A razão pela qual você está recebendo esse erro é porque você precisa remover a declaração return. Quando você remover aquela declaração return, o erro desaparecerá e a função ainda retornará implicitamente o cálculo.

const calculateArea = (width, height) => width * height;

Então, quando você deve usar a sintaxe de função arrow? Bem, depende. Muitos desenvolvedores o utilizam consistentemente em seus projetos pessoais. No entanto, ao trabalhar em equipe, a escolha geralmente depende se a base de código existente usa funções regulares ou funções arrow. In future lessons, we'll cover when to use arrow functions and when to avoid them.