DEV Community

Cover image for Arrow function do JavaScript, feliz e simples?
Marco Bruno 🤡 for CollabCode

Posted on • Updated on

Arrow function do JavaScript, feliz e simples?

Quando vi a primeira vez a arrow function não fiquei muito feliz, principamente porque eu achava ela muito mais complicada de ler, quero te mostrar que o Marco do passado estava errado e que você pode ser muito feliz com a arrow function.

Ah! Estou considerando que você já sabe o que é uma function expression. Se não sabe, recomendo você dar uma lida sobre ela na MDN (Mozilla Developer Network): Function Expression na MDN

Como funciona a Arrow function?

A arrow function tem uma forma mais simples de escrita do que a function expression, por exemplo, se pegarmos a função a seguir que está com function expression.

function sum(number1, number2) {
  return number1 + number2;
}

console.log(sum(2, 2)); // saída: 4
Enter fullscreen mode Exit fullscreen mode

E transformar ela em uma arrow function, fica assim:

const sum = (number1, number2) => {
  return number1 + number2;
}

console.log(sum(2, 2)); // saída: 4
Enter fullscreen mode Exit fullscreen mode

O que conseguimos aprender observando os dois códigos, anteriores? Que a arrow function é por padrão uma função anônima, mas conseguimos definir um nome para ela, usando a const sum que recebeu a nossa arrow function. Isso é realmente importante, você não consegue definir um nome para uma arrow function como fazemos na function expression, onde informamos o nome da função usando sum antes dos parênteses.

Não tente isso, não funciona!!! Arrow functions são anônimas

sum(number1, number2) => {
  return number1 + number2;
}

console.log(sum(2, 2));

/* Erro que você receberá:
SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)
*/
Enter fullscreen mode Exit fullscreen mode

Outras variações da Arrow Function

A sintaxe que acabamos de ver da arrow function (a que funciona 😉), não é a única forma de usar ela, vamos ver outras variações a seguir.

Sem return mas retorna

Mesmo sem usar return dentro de uma arrow function conseguimos retorna a soma, para isso nós precisaremos retirar as duas chaves e return da nossa arrow function, deixando o código assim:

const sum = (number1, number2) => number1 + number2;

console.log(sum(2, 2)); // saída: 4
Enter fullscreen mode Exit fullscreen mode

É mais simples! Mas será que é mais legível? Para mim não foi no começo, mas agora que já me acostumei com a arrow function está realmente simples e feliz.

Sem parâmetros

Quando você não tem parâmetro na arrow function os parênteses permanecem:

() => "CollabCode";
Enter fullscreen mode Exit fullscreen mode

Se você quer dar um nome para uma arrow function é só criar a const como fizemos anteriormente:

const comunidade = () => "CollabCode";
Enter fullscreen mode Exit fullscreen mode

Só um parâmetro

Quando você tem apenas um parâmetro os parênteses se tornam opcionais:

const double = number => number * 2;
Enter fullscreen mode Exit fullscreen mode

Se você gosta muito dos parênteses não tem problema pode usar eles também:

const double = (number) => number * 2;
Enter fullscreen mode Exit fullscreen mode

Dois ou mais parâmetros

Quando temos dois ou mais parâmetros em uma arrow function o uso dos parênteses se tornam obrigatório:

const sum = (number1, number2) => number1 + number2;

console.log(sum(20, 20)); // saída: 40
Enter fullscreen mode Exit fullscreen mode

Arrow function com chaves

Toda vez que você usa as chaves em uma arrow function ela perde o poder de retornar algo sem a necessidade de escrever return:

const sum = (number1, number2) => { number1 + number2 };

console.log(sum(20, 20)); // saída: undefined
Enter fullscreen mode Exit fullscreen mode

Então, caso você tenha que usar as chaves na arrow function e também retornar algo, é necessário usar return, como no código a seguir:

const sum = (number1, number2) => { 
  return number1 + number2;
};

console.log(sum(20, 20)); // saída: 40
Enter fullscreen mode Exit fullscreen mode

Retornando um JSON sem return

Quando você quer retornar um JSON (JavaScript Object Notation) mas sem usar return é necessário você envolver o JSON por parênteses:

const getPessoa = () => ({name: 'Gabe', eye: 'blue'});

console.log(getPessoa()); // saída: Object { name: "Gabe", eye: "blue" }
Enter fullscreen mode Exit fullscreen mode

IIFE com arrow function

Quando queremos fechar o escopo de um arquivo, em alguns casos usamos uma função anônima que ela mesmo se executa apenas uma vez, chamamos isso de IIFE (Immediately-invoked function expression). Com a function expression podemos criar a IIFE de duas maneiras:

(function (){
// Seu código que não vazará o arquivo!!!
}());
Enter fullscreen mode Exit fullscreen mode

A segunda forma de gerar a IIFE é bem similar a primeira o que muda são os parênteses () no final.

(function (){
// Seu código que não vazará o arquivo!!!
})();
Enter fullscreen mode Exit fullscreen mode

Você também pode fazer isso usando arrow function, mas só tem uma forma de fazer isso:

(() => {
// Seu código que não vazará o arquivo!!!
})();
Enter fullscreen mode Exit fullscreen mode

A forma a seguir não funciona

(() => {
// Seu código que não vazará o arquivo!!!
}());

/* Erro que você recebe:
SyntaxError: missing ) in parenthetical
*/
Enter fullscreen mode Exit fullscreen mode

O this é muito mas muito mais simples

O this da arrow function é muito mais previsível do que o da function expression, acredito que essa é a coisa mais feliz dela.

A seguir tem uma function expression chamada Person (Pessoa) e dentro dela temos this.age (age é idade) que começa com 0, a cada 1 segundo ela ficará mais velha. Usamos o método setInterval que nós permite executar uma função a cada 1000 milesegundos (você pode mudar os milesegundos), o primeiro parâmentro da setInterval é a função que será executada e o segundo parâmetro é o tempo do intervalo.

function Person() {
  this.age = 0;

  setInterval(function () {
    this.age = this.age + 1; 
    console.log(this) // O this perde o escopo e referência Window
  }, 1000);
}

const person = new Person();
Enter fullscreen mode Exit fullscreen mode

Executando o código acima você receberá uma saída similar no seu console:

Window about:privatebrowsing
Window about:privatebrowsing
Window about:privatebrowsing
Window about:privatebrowsing
Window about:privatebrowsing
...
Enter fullscreen mode Exit fullscreen mode

Se você vem de outras linguagens você achará estranho esse comportamento do this no JavaScript, antes de existir a arrow function nós resolvimos esse tipo de problema criando uma variável chamada that e atribuímos a ela o this:

function Person() {
  const that = this;
  that.age = 0;

  setInterval(function () {
    that.age = that.age + 1; 
    console.log(that) // O this perde o escopo e referência Window
  }, 1000)
}

const person = new Person();
Enter fullscreen mode Exit fullscreen mode

Executando o código com o that você terá a seguinte saída no terminal:

Object { age: 1 }
Object { age: 2 }
Object { age: 3 }
Object { age: 4 }
...
Enter fullscreen mode Exit fullscreen mode

Aqui vem o momento feliz da sua vida, com a arrow function o comportamento do this fica mais previsível e o código muito mais simples, ela tem um this léxico, isso significa que o this não é alterado de forma dinâmica respeitando o escopo de onde ele foi criado:

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age = this.age + 1;
    console.log(this)
  }, 1000)
}

const person = new Person();
Enter fullscreen mode Exit fullscreen mode

Execute o código e você terá a seguinte saída:

Object { age: 1 }
Object { age: 2 }
Object { age: 3 }
Object { age: 4 }
...
Enter fullscreen mode Exit fullscreen mode

Se você sentiu falta de algum assunto no post ou discorda de algo que escrevi, não deixe de falar nos comentários, eu gosto muito de feedback, principalmente os negativos que nos fazem evoluir.

Ah! Caso você queira tirar dúvidas de JavaScript cola aí na comunidade CollabCode no Discord: Link do Discord da CollabCode

Referências de estudo:

Top comments (3)

Collapse
 
goufix profile image
Alifer de Medeiros Quevedo

Parabéns pelo conteúdo. Uma dúvida:

sobre IIFE com arrow function. Não seria possível, e mais fácil fazer assim?

() => { 
  // Seu código que não vazará o arquivo!!!
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
cirino profile image
Dagmar Cirino

Ficou muito bom mano. Uns exemplos que af que eu ainda não havia explorado. 👏🏽👏🏽

Collapse
 
marcobrunodev profile image
Marco Bruno 🤡

Show! Fico feliz que tenha gostado :-)