Funções

O que são funções, como executa-las, o que são callbacks?

O que são

A palavra função tem muitos significados na programação e ela varia um pouco dependendo do contexto ou linguagem. Para o JavaScript consideramos como função uma serie de instruções (linhas de código) que podem ser executadas/invocadas uma ou mais vezes e que pode receber dados de entrada (inputs ou argumentos) e pode dar dados de saída (outputs ou valor de retorno).

Sintaxe Padrão

function nomeDaSuaFuncao(parametro) {
    // Seu codigo
    return dadoDeRetorno;
}

O exemplo acima é uma declaração de função, ou seja somente com esse trecho de código a função não é executada, apenas se torna disponível para ser executada. A associação do identificador nomeDaSuaFuncao e da função em si acontece antes da execução, quando declarada desta forma.

Outra forma possível de declarar uma função:

// Podemos usar const no lugar do let
let nomeDaSuaFuncao = function(parametro) {
    // Seu codigo
    return dadoDeRetorno;
};

Dessa forma a função é atribuída a variável nomaDaSuaFuncao em tempo de execução.

Note que as funções em JavaScript são variáveis normais e isso traz muita flexibilidade. Em muitas outras linguagens de programação, as funções são um tipo a parte, já no Javascript elas são valores como qualquer outro, ou seja, podemos reatribuir uma variável que era uma função com qualquer outro valor valido.

let nomeDaSuaFuncao = function(parametro) {
    // Seu codigo
    return dadoDeRetorno;
};

nomeDaSuaFuncao = "Agora sou uma string";

console.log(nomeDaSuaFuncao ); // "Agora sou uma string"

Executando uma função

function testeOla() {
    console.log("Eu sou um teste!");
}

// Ao ser executada "Eu sou um teste!" será imprimido
testeOla();

Para executar uma função (informalmente chamado de: rodar uma função) basta escrever seu nome e abrir e fechar parêntesis.

function testeOla() {
    console.log("Eu sou um teste!");
}

let numeroTeste = 42;

numeroTeste(); // Uncaught TypeError: numeroTeste is not a function

No exemplo acima tentamos rodar uma função usando uma variável que não é uma função, essa operação da erro. Certifique-se de rodar apenas variáveis que funções no seu código.

Valor de retorno

teste1() // tudo certo
teste2() // Uncaught ReferenceError: teste2 is not defined

function teste1(parametro) {
    // Seu codigo
    return dadoDeRetorno;
}

let teste2 = function(parametro) {
    // Seu codigo
    return dadoDeRetorno;
};

No trecho acima a função teste1 roda sem problemas, enquanto a teste2 da erro. Essa diferença é devida a forma de declarar a função. Para a teste1 a associação da função e seu identificador é feita antes da execução do código, enquanto para a teste2 é feito durante a execução do código, ou seja, na linha 2, a variável teste2 ainda não foi definida e a teste1 sim

Esse processo é chamado de hoisting (caso tenha curiosidade veja mais sobre ele aqui), _**_de maneira simplificada, é quando o Javascript leva algumas de suas variáveis para o topo do código para que você consiga ter acesso a elas mesmo antes da sua declaração

Parâmetros

function ola(nome) {
  console.log('Ola, ' + nome + '!');
}

ola("João");   // Ola João!

No trecho acima, nome é chamado de parâmetro, que atua como uma variável local que pode ser acessada de dentro da função.

Outro nome para a palavra parâmetro é argumento, os dois termos tem leve diferença, mas na pratica são usado como se fossem exatamente iguais.

Uma função pode ter nenhum, um ou mais parâmetros e seus valores são atribuídos em ordem posicional:

function matematica(a, b, c) {
  console.log(a + 2*b + 3*c)
}

matematica(1, 2, 3); // 14
matematica(3, 2, 1); // 10

Funções também podem retornar um valor, usando a keyword return:

function ola(nome) {
  return 'Ola, ' + nome + '!';
}

let msg = ola("João");


console.log(msg);   // Ola, João!

Você so pode retornar um único valor em uma função com o return, e todo código depois dele não é executado. Se quiser retornar mais de um valor você pode usar um objeto ou array (vamos explicar o que ele são posteriormente, não se preocupe!).

Mesmo quando o return não é chamado explicitamente no fim de uma função, ela retorna um valor padrão, que é undefined

É como se o Javascript adicionasse um return undefined; sempre que você não coloca ele explicitamente

// function ola(nome) {
//   console.log('Ola, ' + nome + '!');
//   return undefined;
// }

// A função abaixo e acima são equivalentes
function ola(nome) {
  console.log('Ola, ' + nome + '!');
}

let msg = ola("João"); // Ola, João!


console.log(msg); // undefined

Callbacks

As referencias de funções, independente de como foram declaradas, são variáveis e por isso podem ser passadas como argumento para outras funções.

No trecho abaixo a função rodarFuncao recebe 3 argumentos.

Ela tenta executar o primeiro argumento como uma função, já que uma função é uma variável como qualquer outra e se ele não for uma função vai dar erro.

O segundo e terceiro argumento da função rodarFuncao vão ser passados como parâmetros para a função que ela executa (o primeiro parâmetro)

function soma(a, b) {
  console.log('A soma é: 'a + b)
}

function rodarFuncao(fun, argA, argB) {
  fun(argA, argB)
}

rodarFuncao(soma, 10, 2) // A soma é: 12

callback é o nome de uma função que é passada como argumento para outra função De forma pratica um callback normalmente é usado em duas situações:

1. Quando queremos rodar uma função depois que outra coisa acabar

   function lerDoDisco(nomeDoArquivo, callback) {
     // Aqui vai o codigo para ler os dados do arquivo
     callback()
   }
   
   function aviso() {
     console.log('Fim da leitura do disco');
   }
   
   // Primeiro o codigo da função roda e depois a callback roda
   lerDoDisco('t1.js', aviso); // 'Fim da leitura do disco'

2. Sempre que algo acontece (um evento)

   • No exemplo abaixo quando o botão é clicado a função minhaFuncao roda (eventos serão explicados futuramente)

   function minhaFuncao() {
     console.log('Voce clicou no botao!');
   }
   
   botao.addEventListener('click', minhaFuncao);

Uma função pode receber mais um callback por parâmetro

function lerDoDisco(nomeDoArquivo, callbackSuccesso, callbackErro) {
  // Aqui vai o codigo para ler os dados do arquivo
  if (conseguiLer) {
      callbackSuccesso()
  }
  else {
      callbackErro()
  }
}

function aviso() {
  console.log('Fim da leitura do disco');
}

// Primeiro o codigo da função roda e depois a callback roda
lerDoDisco('t1.js', aviso); // 'Fim da leitura do disco'

Resumo

Neste capítulo vimos o básico de funções:

• Como declarar e rodar funções

  • Diferentes formas de declarar

• Valores de retorno

• Passando argumentos para funções

• O que são e como usar callbacks