0

ARROW FUNCTION - UM RESUMÃO

#JavaScript
Amanda Almeida
Amanda Almeida

# FUNÇÕES AVANCADAS DO ECMA6 - UM RESUMÃO

## ARROW FUNCTION

São funções anonymous!

Não posso usar como uma função construtora e não acontece o hoisting.

A arrow function se refere ao próprio contexto léxico e precisam ou estar atribuidas a uma variável, ou como parametro para outra função.


```js

// maneira classica de escrever uma função

function log(value) {

  console.log(value)

}

log('testando');


// funções anonimas, antes do ECMA6 precisavam estar ou atribuidas a uma variável, ou como parametro para outra função

// exemplo atribuidas a uma variável

var sum = function(a, b) {

  return a+b;

};

console.log(sum(5,5));


// formas de escrever arrow functions

 // return implícito

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


// return implício com apenas um parametro

var log2 = value => {

  console.log(value);

};


// return explícito

var sum2 = (a, b) => {

  return a + b;

}


// chaves {} também definem objetos literais

var createObj = () => ({ test: 123 });


// funções construtoras são outra forma de escrever objetos com js

function Car() {

  this.foo = 'bar'

}

console.log(new Car());

```


# Sintaxe

Sintaxe curta em relação a function expression. Basta remover a palavra chave function e adicionar a fat arrow => após os argumentos.


```js

const imgs = document.querySelectorAll("img");

imgs.forEach((item) => {

  console.log(item);

});

```


## Aplicação onde a Arrow function se sobresai

Antes das arrow functions era necessário armazenar o this em variáveis ou usar o .bind


```js

var obj = {

  showContent: function showContent() {

    this.log('teste'); // this referencia o proprio objeto


    setTimeout(function() {

      this.log('after 1000ms')

    }.bind(this), 1000); // .bind(this) fixa o contexto 

  },

  log: function log(value) {

    console.log(value);

  }

}

obj.showContent();

```


Como a arrow function tem uma propriedade de ter o contexto léxico igual ao codigo que a envolve. Passamos a escrever:


```js

var obj2 = {

  showContent: function showContent() {

    // this = obj


    setTimeout(() => {

      this.log('after 1000ms')

    }, 1000);

  },

  log: function log(value) {

    console.log(value);

  }

}

obj.showContent();

```




## Argumentos e Parênteses

É melhor utilizar os parênteses!


```js

const imgs = document.querySelectorAll("img");


// argumento único não precisa de parênteses

imgs.forEach((item) => {

  console.log(item);

});


// multiplos argumentos precisam de parênteses

imgs.forEach((item, index) => {

  console.log(item, index);

});


// sem argumentos precisa dos parênteses, mesmo vazio

let i = 0;

imgs.forEach(() => {

  console.log(i++);

});

```


## Return

É possível omitir as chaves {} para uma função que retorna uma linha e **não é permitido fechar a linha com ;**


```js

const imgs = document.querySelectorAll('img');


imgs.forEach(item => {

   console.log(item)

});

// é o mesmo que

imgs.forEach(item => console.log(item));

```

0
2

Comentários (2)

1
Vagner Bellacosa

Vagner Bellacosa

07/07/2021 18:15

Amanda, excelente dica, mandou bem.


Que venham mais artigos.

1
Ryam Alves

Ryam Alves

07/07/2021 17:13

Muito bom Amanda, parabéns!

Graduanda em Engenharia Mecanica | Desenvolvedora Web

Brasil