Funções

Criando e usando funções personalizadas

Inicialmente, pense em funções como caixinhas mágicas: você joga coisas dentro, algo acontece e você recebe de volta uma transformação do que foi colocado. Por exemplo: imagine uma caixinha em que você coloca dois números: 3 e 5 e a caixa te devolve 8.

Os números 3 e 5 que colocamos dentro da caixa iremos chamar de argumentos e o 8 que recebemos, iremos chamar de retorno.

Nem sempre uma função terá argumentos e nem sempre terá um retorno, mas certamente ela irá realizar alguma coisa de nosso interesse, seja mudar a cor de algum elemento, abrir uma janela popup, ou qualquer uma das outras coisas que a linguagem JavaScript pode fazer.

As linguagens de programação já possuem algumas funções pré-definidas para nos ajudar. Da linguagem JavaScript podemos citar: open()(usada para abrir janelas popup), parseInt() (usada para converter um número ou string em inteiro), encodeURI() (codifica uma cadeia de caracteres em um URI válido)...

Resolvendo problemas

Sempre que estivermos programando em qualquer linguagem, temos que ter em mente uma coisa muito importante: "o melhor jeito de resolver um problema grande é dividi-lo em problemas menores", cada um desses "problemas menores" serão resolvidos por funções pequenas, assim juntando as várias pequenas funções, teremos resolvido "o todo".

Apesar de ser possível escrever todo o código que resolve o problema grande numa única função gigante, não fazemos isso. Pois isso tornaria muito complexo nosso código, dificultaria uma futura manutenção e impossibilitaria o reaproveitamento de pequenas rotinas. Por isso preferimos dividir e depois criar uma função grande que utilize nossas outras funções pequenas, do que escrever tudo num só lugar.

Declarando

A declaração de uma função é quando construimos a caixa mágica.

function foo() {
  //corpo
}

foo é o nome da função e o código entre as chaves {}, é o corpo da nossa função. A palavra function é a forma da linguagem JavaScript indicar que estamos declarando uma função (criando a caixa mágica).

Invocando

Após construirmos a caixa, ela por si só não faz absolutamente nada até a chamarmos. A invocação consiste em colocar o nome da função seguido pelos parênteses. Isso faz com que o código dentro do corpo da nossa função seja executado.

foo();

Experimente salvar um arquivo .html e abrir com o seu navegador, contendo o seguinte código:

<script>
function bar() {
  alert('Hello World');
}
</script>

Após abrir o arquivo com qualquer navegador, você irá notar que não irá acontecer absolutamente nada. Sim, nada. Pois ainda não invocamos a função. Apenas a declaramos. Para invocar, o arquivo ficaria com o seguinte conteúdo:

<script>
// declarando
function bar() {
  alert('Hello World');
}

// invocando
bar();
</script>

Exemplo de função com argumentos e retorno

Lembram que eu iniciei o texto falando de uma caixa mágica que recebia 2 números e devolvia a soma deles ? Essa função ficaria assim:

function somar(x, y) {
  return x + y;
}

E para invocar essa função somar() podemos passar quaisquer dois números:

somar(3, 5);
somar(1, 2);
somar(10, 32);

Só que não vermos nada, pois não direcionamos o return para lugar nenhum.

<p id="resultado"></p>
<p id="resultado2"></p>
<script>
alert(somar(3, 5));
document.getElementById('resultado').innerHTML = somar(1, 2);
document.getElementById('resultado2').innerHTML = somar(10, 32);
</script>