ARROW FUNCTION
Blog

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


Leave a Reply

Your email address will not be published. Required fields are marked *