Funções de seta, o básico

Há outra sintaxe muito simples e concisa para criar funções, que geralmente é melhor que Expressões de Função.

É chamada de “funções de seta”, porque se parece com isto:

 deixe func = (arg1, arg2, ..., argN) => expressão;

Isso cria uma função func que aceita argumentos arg1..argN , então avalia a expression do lado direito com seu uso e retorna seu resultado.

Em outras palavras, é a versão mais curta de:

 deixe func = função(arg1, arg2, ..., argN) {
  expressão de retorno;
};

Vejamos um exemplo concreto:

 seja soma = (a, b) => a + b;

/* Esta função de seta é uma forma mais curta de:

deixe soma = função (a, b) {
  retornar a + b;
};
*/

alerta(soma(1, 2) ); //3

Como você pode ver, (a, b) => a + b significa uma função que aceita dois argumentos chamados a e b . Na execução, avalia a expressão a + b e retorna o resultado.

• Se tivermos apenas um argumento, os parênteses em torno dos parâmetros poderão ser omitidos, tornando-o ainda mais curto.

  Por exemplo:

   seja duplo = n => n * 2;
  // aproximadamente o mesmo que: let double = function(n) { return n * 2 }
  
  alerta(duplo(3) ); //6

• Se não houver argumentos, os parênteses ficam vazios, mas devem estar presentes:

   deixe dizerOi = () => alert("Olá!");
  
  digaOi();

As funções de seta podem ser usadas da mesma forma que as expressões de função.

Por exemplo, para criar uma função dinamicamente:

 deixe idade = prompt("Qual é a sua idade?", 18);

seja bem-vindo = (idade <18) ?
  () => alerta('Olá!') :
  () => alerta("Saudações!");

Bem-vindo();

As funções das setas podem parecer estranhas e pouco legíveis no início, mas isso muda rapidamente à medida que os olhos se acostumam com a estrutura.

Eles são muito convenientes para ações simples de uma linha, quando temos preguiça de escrever muitas palavras.

Funções de seta multilinha

As funções das setas que vimos até agora eram muito simples. Eles pegaram argumentos à esquerda de => , avaliaram e retornaram a expressão do lado direito com eles.

Às vezes precisamos de uma função mais complexa, com múltiplas expressões e instruções. Nesse caso, podemos colocá-los entre chaves. A principal diferença é que as chaves exigem um return dentro delas para retornar um valor (assim como uma função normal faz).

Assim:

 let sum = (a, b) => { // a chave abre uma função multilinha
  deixe resultado = a + b;
  resultado de retorno; // se usarmos chaves, então precisamos de um "retorno" explícito
};

alerta(soma(1, 2) ); //3

Mais por vir

Aqui elogiamos as funções das setas pela brevidade. Mas isso não é tudo!

As funções de seta possuem outros recursos interessantes.

Para estudá-los em profundidade, primeiro precisamos conhecer alguns outros aspectos do JavaScript, por isso retornaremos às funções de seta posteriormente no capítulo Funções de seta revisitadas.

Por enquanto, já podemos usar funções de seta para ações e retornos de chamada de uma linha.

Resumo

As funções de seta são úteis para ações simples, especialmente para one-liners. Eles vêm em dois sabores:

1. Sem chaves: (...args) => expression – o lado direito é uma expressão: a função a avalia e retorna o resultado. Os parênteses podem ser omitidos se houver apenas um único argumento, por exemplo, n => n*2 .

2. Com chaves: (...args) => { body } – colchetes nos permitem escrever múltiplas instruções dentro da função, mas precisamos de um return explícito para retornar algo.

Tarefas

Reescrever com funções de seta

Substitua Expressões de Função por funções de seta no código abaixo:

 function perguntar(pergunta, sim, não) {
  if (confirme(pergunta)) sim();
  senão não();
}

perguntar(
  "Você concorda?",
  function() { alert("Você concordou."); },
  function() { alert("Você cancelou a execução."); }
);

solução

 function perguntar(pergunta, sim, não) {
  if (confirme(pergunta)) sim();
  senão não();
}

perguntar(
  "Você concorda?",
  () => alerta("Você concordou."),
  () => alert("Você cancelou a execução.")
);

Parece curto e limpo, certo?