Veja no Youtube:

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.

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:

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?

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 returnna 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 returnpara 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:

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:

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