
Arrow Functions em JavaScript e sua Importância
Introduzidas no ECMAScript 6 (ES6), as arrow functions são uma forma mais concisa e moderna de declarar funções em JavaScript. Elas são representadas pela sintaxe ( ) => { } e trazem diversas vantagens, especialmente no contexto de desenvolvimento contemporâneo.
Uma das principais características das arrow functions é a sua simplicidade sintática. Ao invés de usar a palavra-chave function, as arrow functions permitem criar funções com menos código, o que contribui para uma maior legibilidade. Isso é particularmente útil ao trabalhar com funções curtas ou callbacks, como os utilizados em métodos de arrays, como map(), filter() e reduce().
Além disso, arrow functions possuem um comportamento único em relação ao contexto do this. Diferente das funções tradicionais, que definem o this com base em como são chamadas, as arrow functions não têm o próprio this. Elas herdam o contexto do local onde foram definidas. Essa característica elimina a necessidade de usar métodos como .bind() ou truques com variáveis auxiliares (como const self = this) em certos cenários. Isso torna as arrow functions particularmente úteis em programação assíncrona e em manipulação de eventos.
Outro ponto relevante é que arrow functions ajudam a evitar armadilhas relacionadas à complexidade do escopo em JavaScript. Ao herdar o contexto lexical do this, elas reduzem erros comuns em projetos que envolvem múltiplos níveis de callbacks ou métodos em classes.
No entanto, é importante observar que as arrow functions têm limitações. Elas não podem ser usadas como construtores e não possuem acesso a arguments, sendo mais adequadas para funções utilitárias e callbacks.
Em suma, as arrow functions são uma ferramenta poderosa que simplifica o código e ajuda a evitar problemas relacionados ao escopo. Sua adoção reflete o avanço da linguagem, tornando o JavaScript mais legível e eficiente.
1. Função Simples Sem Parâmetros
function digaOi(){
return "OI";
}
console.log( digaOi() );
const digaOi2 = () => "OI";
console.log( digaOi2() );
2. Função com Um Parâmetro
function dobrarNumero(num){
return num * 2 ;
}
console.log( dobrarNumero(5) );
const dobrarNumero2 = num => num * 2
console.log( dobrarNumero2(6) );
3. Função com Vários Parâmetros
function somar(a, b){
return a + b;
}
console.log( somar(9,7) );
const somar2 = (a, b) => a + b;
console.log( somar2(9,10) );
4. Função com Corpo Mais Extenso
function calcularArea(base, altura){
const area = base * altura;
return area / 2;
}
console.log( calcularArea(5, 10) );
const calcularArea2 = (base, altura) => {
const area = base * altura;
return area / 2;
}
console.log( calcularArea2(5, 10) );
5. Retornando um Objeto
function criarPessoa(nome, idade){
return { nome:nome, idade:idade};
}
console.log( criarPessoa("João", 30) );
const criarPessoa2 = (nome, idade) => ({ nome:nome, idade:idade });
console.log( criarPessoa2("Maria", 25) );
6. Arrow Function com map
const numeros = [ 1,2,3,4,5 ];
const dobrados = numeros.map( function(num){
return num * 2;
});
console.log(dobrados);
const dobrados2 = numeros.map( num => num * 2 );
console.log(dobrados2);
7. Arrow Function com filter
const numeros = [10,15,20,25,30];
const maioresQueVinte = numeros.filter( function(num){
return num > 20;
})
console.log( maioresQueVinte);
const maioresQueVinte2 = numeros.filter( num => num > 20 );
console.log( maioresQueVinte2);
8. Arrow Function com reduce
const numeros = [1,2,3,4,5];
const soma = numeros.reduce( function( acumulador, num) {
return acumulador + num },0);
console.log(soma);
const soma2 = numeros.reduce( (acumulador, num) => acumulador + num, 100);
console.log(soma2);

https://go.hotmart.com/V89811082M?dp=1
https://go.hotmart.com/X90111663X?dp=1

