Funções
Published: 2021-03-05 16:12:23

# Veja no Youtube:
[![VIDEO](http://img.youtube.com/vi/urZqf_nlzzk/0.jpg)](https://youtu.be/urZqf_nlzzk)

# Objetivos

1. Aprender a usar uma função
2. Entender o objetivo de uma função
3. Outra forma de criar uma mesma função

# Bora lá...

Quando falamos em funções no JavaScript estamos falando em criar um escopo para executar um determinado código e podemos ter funções de que retornam algum valor final e as que não retornam e nesse artigo vamos aprender um pouco sobre elas. 

```jsx
function calculo(numero) {
  return numero * numero;
}

calculo(argumento)
```

Nas nossas funções podemos ter parâmetros para serem passados pelo desenvolvedor esses parâmetros são passados dentro dos parênteses, no exemplo acima temos um único parâmetros chamado `numero`, mas não se preocupe porque podemos passar vários parâmetros  se precisarmos e esses parâmetros são usados apenas dentro do escopo da função.

Para essa função ser executada chamamos ela como `calculo(argumento)` e onde é o argumento dela passamos o parametro que ela espera. 

Sempre chamamos uma função usando o nome que criamos e seguido por parênteses para que o Javascript entenda que se trata de uma função.

# Function com retorno / `return`

Uma função com retorno tem no final da sua execução um `return` e em seguida é passado o valor que var ser retornado, podendo ser qualquer tipo de dado, vamos ver e analisar um exemplo:

```jsx
function calculo(numero) {
  return numero * numero;
}

calculo(2)

// Output: 4
```

Note que para que a função seja executada precisamos chamar ela (o que as vezes chamamos de invocar a função) usando o parênteses após seu nome para que o JavaScript entenda que é uma função e dentro do parênteses passar o valor que vamos usar dentro dela, no caso desse exemplo um `number`.

Mas e se eu passar um valor não esperado ou mais de um argumento para o parâmetro? 

```jsx
function calculo(numero) {
  return numero * numero;
}

calculo("Diego")

//Output: NaN
```

No exemplo de cima pedimos para que ela realize um calculo usando uma string e o resultado é `NaN` (Not a Number), como o return espera um numeral para realizar um calculo ela retorna `NaN`.

# Function sem retorno  / `void`

Como vimos a cima podemos ter um `return`na nossa função, mas em que momento usamos sem retorno?

Bora para um caso de uso aqui:

Vamos imaginar que nossa função apenas precise enviar um dado para ser salvo em um banco de dados ou até mesmo criar um arquivo com ele, não precisamos de um `return`para isso, vamos precisar que ela simplesmente execute a tarefa e pronto, sem a necessidade de retorno algum.

# Uso da Arrow function

Uma outra forma de criar funções que veio com o ES6 (ECMAScript6) é com o uso das Arrow Functions que faz com que fique mais direta nossas declarações de funções, aqui teremos um exemplo de como ela é e em seguida comentamos como ela funciona:

```jsx
const calculo = (numero) => {
  return numero * numero;
}

calculo(2)

//Output: 4
```

No exemplo acima devemos atribuir a função para uma variável ou usar ela imediatamente temos o uso do `=>` que nos permite identificar com facilidade uma Arrow Function e mais uma característica é que podemos ter seu retorno implícito isso significa que não precisamos necessariamente usar o `return` pois ele já diz que o retorno será o que vem após ela ficando dessa forma o mesmo código:

```jsx
const calculo = (numero) => numero * numero

calculo(2)

//Output: 4
```

## Conclusão

Podemos usar functions para criar escopos de códigos reaproveitáveis e isso economiza bastante tempo e linhas de código.

além de permitir que a gente utilize mais funções ou métodos dentro das mesmas