Sei que não é o direcionamento da aula, porém nunca conseguir compreender como elas funcionam, como se lê uma arrow function, gostaria de saber como ela funciona
Sei que não é o direcionamento da aula, porém nunca conseguir compreender como elas funcionam, como se lê uma arrow function, gostaria de saber como ela funciona
As arrow functions, introduzidas no ES6 (ECMAScript 2015), são uma maneira mais concisa de escrever funções em JavaScript. Além de terem uma sintaxe mais curta, elas compartilham o mesmo contexto léxico do código ao redor, o que significa que o valor de this
dentro de uma arrow function é o mesmo de fora dela. Isso é particularmente útil em cenários onde o contexto de this
pode mudar, como em callbacks ou eventos.
A forma mais simples de uma arrow function é:
(param1, param2, ..., paramN) => { statements }
Se a função tiver apenas um parâmetro, você pode omitir os parênteses:
param => { statements }
Se a função executar uma única expressão, você pode omitir as chaves {}
e o return
é implícito:
param => expression
Função Tradicional:
function somar(a, b) {
return a + b;
}
Equivalente em Arrow Function:
const somar = (a, b) => a + b;
Com Múltiplas Instruções:
Se você precisa de mais de uma instrução, use chaves e a palavra-chave return
(se a função deve retornar algo):
const somar = (a, b) => {
const resultado = a + b;
return resultado;
};
Sem Parâmetros:
Para funções sem parâmetros, use parênteses vazios:
const helloWorld = () => "Olá, mundo!";
Uma arrow function pode ser lida como "parâmetros vão para uma ação". Por exemplo, (a, b) => a + b
pode ser lido como "a e b vão para a soma de a e b".
this
em Arrow FunctionsUm dos benefícios mais significativos das arrow functions é o tratamento do this
. Em funções tradicionais, this
pode mudar dependendo de como a função é chamada. Arrow functions não têm seu próprio this
. Em vez disso, elas capturam o valor de this
do escopo onde foram criadas. Isso é útil, por exemplo, em callbacks, onde o contexto de this
pode não ser o que você espera:
function Timer() {
this.segundos = 0;
setInterval(() => {
this.segundos++;
console.log(this.segundos);
}, 1000);
}
new Timer();
Neste exemplo, a arrow function dentro de setInterval
usa o this
da função Timer
, então this.segundos
refere-se à propriedade segundos
do objeto Timer
.
As arrow functions simplificam a escrita de funções menores e ajudam a evitar problemas comuns relacionados ao this
. Contudo, elas não são adequadas para todos os casos, especialmente quando você precisa de funções que utilizam bind
, call
, apply
, ou que são usadas como métodos de um objeto.