9

Como usar Arrow functions

#JavaScript
Anna Maria
Anna Maria

Entenda como funciona as Arrow Functions


Primeiro vamos ver exemplos sem utilizar Arrow Functions:

var Soma = function(a, b){
    return a + b;
};

console.log(soma(5, 20)); //25


Agora Usando Arrow Functions:

var soma = (a, b) => a + b;

console.log(soma(5, 20)); //25


Como podemos ver sem utilizar Arrow Functions temos um código de 4 linhas e utilizando Arrow Functions esse mesmo código passa a ter duas linhas.


Oque mudou na sintaxe?

As palavras chaves "function" e "return" foram substituídas por uma seta "=>" e não foi preciso usar as chaves " { "


Caso tenha apenas um parâmetro conseguimos simplificar ainda mais, assim:

var sum2 = a => a + 5;

console.log(sum2(1)); //6

Nesse caso só temos um parâmetro ( a) então não precisamos usar os parênteses "(" diferente dos primeiros exemplos onde tem dois parâmetros (a + b)


Nesses primeiros exemplos não é utilizado as chaves "{".

Porém, caso tenha mais de uma expressão dentro da função temos que utilizar as chaves.

EX:

var suma = (a, b) => {
    var resultado = a + b;

    if(resultado > 10){
        return "Maior que 10";
    }
    else{
        return "Menor que 10";
    }
}

Nesse exemplo para verificar se a soma de dois números é ou não maior que 10, é obrigatório o uso de chaves pois tem mais de uma expressão, ao contrário dos primeiros exemplo que só tinha uma expressão "a + b" e "a + 5"


Usando Arrow Functions pra retornar objetos


Para retornar um objeto de forma explícita (com o corpo da função, e o return), nós faríamos assim:

const person = () => {
  return {
    name: 'John',
    surname: 'Doe',
    age: 30
  }
}


De forma implícita:

const person = () => ({
  name: 'John',
  surname: 'Doe',
  age: 30
})


Espero ter ajudado 💞

Meu artigo anterior ensinando a ter um servidor e um domínio GRÁTIS com GitHub Pages 👈
Meu artigo falando sobre funções para manipular Arrays 👈

______________________________________________________________________________________

Olá, meu nome é Anna Maria eu sou uma desenvolvedora Front-End.

Me desafiei a postar um ou dois artigos por dia aqui na DIO, com assunto diversos, mas principalmente coisas que eu tive/tenho dificuldade.

Então decidi compartilhar com vocês.


📌Me siga para ver mais artigos

📌 Curta

📌 Comente o que achou


Se ficar com alguma dúvida pode me contatar 📧

✨Discord: imnotannamaria#1935

✨LinkedIn: www.linkedin.com/in/anna-maria-573801191/

✨Email: aannamariabr@outlook.com


_Anna Maria

4
107

Comentários (4)

1
Marlei Silva

Marlei Silva

22/12/2020 10:02

Parabéns Anna! muito bom.

1
Clovis Costa

Clovis Costa

17/12/2020 12:55

Espetacular a simplicidade. Arrow Functions sempre me incomodaram. Ficou muito mais claro. Obrigado e parabéns pelo artigo.

1
Aluizio Junior

Aluizio Junior

17/12/2020 03:36

Fera.


1
Antônio Sena

Antônio Sena

16/12/2020 19:48

Excelente iniciativa, parabéns pelo o artigo, está bem escrito e de fácil entendimento.

Desenvolvedora Front-End | JavaScript | CSS | HTML

Brasil