Functions em JS
Tags: javascript, womenintech
Published: 2020-08-27 03:49:11

Oi sumidos, olha eu de volta depois de um tempo praticando a "Solitude"(Quem nunca hahaha) resolvi voltar com tudo trazendo um artigo quentinho sobre javascript.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kjzym4h8c5q4m4woml46.gif)

Dessa vez vamos falar de Functions, as famosas funções em javascript. Vamos aprender o que são, onde vivem e do que se alimentam.

Na orientação a objetos podemos chamar as funções de métodos que consistem em um objeto que traz um código executável podendo conter parâmetros. 
Todas as definições que implementamos dentro de uma função não conseguem ser acessadas fora dessa função, ou seja, fora do escopo.

Vamos declarar uma função na prática e ver como funciona:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/phhsdtyvxmk7xo90dzrd.PNG)

Temos uma função que foi declarada com a palavra reservada que é própria do javascript **function** e atribuímos a ela o nome de **myFunction**. 
Dentro dos parenteses() atribuimos um argumento que usaremos no escopo(Escopo é o 'Corpo' da função, guardem esse segredinho),
e dentro da nossa função, chamamos retorno do nosso argumento passado por parâmetro. 
Então, ao executarmos a nossa função, teremos o seguinte resultado:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jcegcblpdm30f4egpb9m.PNG)

Qualquer argumento que passarmos no parâmetro será retornado na função

Vamos praticar mais um pouquinho, agora com uma operação?
Dentro de uma função podemos executar operações, condições, exibir contextos e mais uma infinidade de possibilidades. No exemplo a seguir vamos fazer uma operação:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hg2czciwys9fa50d18xu.PNG)

Na função criada chamada soma, passamos duas variaveís como parâmetro e no retorno realizamos a soma desses parâmetros. Podemos realizar diversas operações dentro de uma função, soma, multiplicação, divisão, subtração, verificações condicionais e por ai vai. 
Ao executar nossa função o usuário deve passar dois números no parâmetro. Ao chamá-la teremos o seguinte resultado:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bfpoajq95qp8eecju2yp.PNG)

E ai curtiu? Tente praticar agora um pouquinho, bora colocar a mão na massa e testar com diversas formas e depois volte aqui para aprender mais um pouquinho hehe!!!

![Alt Text](https://media.giphy.com/media/43VhxnrEOQ44U/giphy.gif)

**Arrow Functions**

Funções do tipo Arrow Function surgiram com o ES6 e vieram para economizar tempo dos desenvolvedores e simplificar o escopo da função. Estas expressões de funções são melhor aplicadas para funções que não sejam métodos, e elas não podem ser usadas como construtoras (constructor).
As funções arrow functions tem return implícito, ou seja, se a sua função for simples, basta terminá-la com com o retorno esperado, como no exemplo a seguir: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u0a5up2jv5850k6zc887.PNG)

Caso a sua função seja mais extensa, com maiores especifições, ai sim você pode chamar o return:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3mlwenxzuih54rngsgqr.PNG)


**Filter, Map e Reduce**

Funções do tipo Filter, Map e reduce nos permitem executar operações sem alterar nossos objetos / arrays, de acordo com as nossas necessidades de forma limpa e organizada. Vamos conhecê-las:
Para implementar nossas funções, vamos criar um objeto: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6nis3ivmdr8g65mzziva.PNG)

##### Filter:
A função do tipo _Filter_ tem nada menos que o papel de filtrar, ou seja, gerar um retorno de acordo com a condição passada.
Vamos criar uma const chamando o nosso objeto e com a função filter vamos retornar a apenas os homens do objeto pessoas:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k1vogh7uj5c9h10ktq6g.PNG)

Ao executar  nosso código, o retorno será esse:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5wjgyyuz2esbs26yro57.PNG)

##### Map:
A função do tipo _Map_ posibilita a criação de um novo objeto com base no já existente: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wwfhmr0ov0j0lzq5le6y.PNG)

Executando, esse será o retorno com o curso acrescentado no objeto:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l7tjr3bbttcudu6bghzj.PNG)

##### Reduce:

Entre as funções _Filter_, o _Map, o _Reduce_ é a função que exige maior atenção devido a sua complexidade. O _Reduce_ nos permite realizar transformar o tipo do nosso objeto.
No exemplo, vamos somar as idades de todoas pessoas do objeto com o _Reduce_. 
O primeiro parâmetro **age** é a variável que irá armazenar a nossa soma, ou seja o valor que o totalIdades terá. O parâmetro person representa o item que estamos iterando dentro do nosso objeto. Todo esse escopo é o primeira parâmetro que carrega o escopo do nosso totalIdades, que chama a propriedade idade de dentro do nosso objeto e realiza a soma ao passar por cada item e depois retorna o valor da propriedade. O segundo parâmetro zero, é o valor inicial : 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d78s67j4xqdcqzjg7udp.PNG)

Esse será o nosso resultado:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pkuiq1w4ioqxlyjcozgi.PNG)

Alguns anos atrás eu vi a melhor definição ilustrada do _Filter_ _Map_ e _Reduce_ no [Global Nerd](http://www.globalnerdy.com/2016/06/23/map-filter-and-reduce-explained-using-emoji/), olhem só que bacana: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g1v2iqbxqos7htb6qg1s.png)

Se você chegou até aqui, P-A-R-A-B-É-N-S, aprendemos juntos o monte de coisas legais que podemos fazer com as funções. Espero que tenham gostado. Tem algo que quer acrescentar, ou até corrigir? É só deixar seu recadinho. Até breve...

![Alt Text](https://media.giphy.com/media/l3vRbyZfZkTv1GzbG/giphy.gif)