freeCodeCamp/guide/portuguese/javascript/es6/arrow-functions/index.md

1.5 KiB

title localeTitle
Arrow Functions Funções de seta

Funções de seta

Funções no ES6 mudaram um pouco. Quero dizer a sintaxe.

// Old Syntax 
 function oldOne() { 
 console.log("Hello World..!"); 
 } 
 
 // New Syntax 
 var newOne = () => { 
 console.log("Hello World..!"); 
 } 

A nova sintaxe pode ser um pouco confusa. Mas vou tentar explicar a sintaxe. Existem duas partes da sintaxe.

  1. var newOne = ()
  2. => {}

A primeira parte é apenas declarar uma variável e atribuir a função (ie) () a ela. Apenas diz que a variável é na verdade uma função.

Então a segunda parte está declarando a parte do corpo da função. A parte da seta com as chaves indica a parte do corpo.

Outro exemplo com parâmetros:

let NewOneWithParameters = (a, b) => { 
 console.log(a+b); // 30 
 } 
 NewOneWithParameters(10, 20); 

Parênteses são opcionais quando há apenas um nome de parâmetro:

let newOneWithOneParam = a => { 
 console.log(a); 
 } 

Uma vantagem incrível da função de setas é que você não pode religar uma função de seta. Sempre será chamado com o contexto em que foi definido. Apenas use uma função normal.

// Old Syntax 
 axios.get(url).then(function(response) { 
  this.data = response.data; 
 }).bind(this); 
 
 // New Syntax 
 axios.get(url).then(response => { 
  this.data = response.data; 
 }); 

Eu não acho que eu precise dar uma explicação para isso. É simples.