Esta é uma revisão do que cobrimos nesse tutorial sobre funções.
Muitas vezes, queremos reexecutar blocos de código quando estamos escrevendo programas, sem ter que reescrever o mesmo trecho integralmente. Precisamos de um meio de agrupar o código e nomeá-lo, de forma que possamos chamar por esse nome mais tarde, e é disso que se trata uma função.
Para criar uma função, precisamos declará-la e nomeá-la, da mesma maneira que criamos uma variável. Em seguida, a identificamos com a palavra reservada "function":
var digaOi = function() {
};
Poderíamos colocar qualquer código dentro dessa função - um comando, vários comandos - depende do que queremos. Nessa função, poderíamos apenas mostrar uma mensagem em uma posição aleatória:
var digaOi = function() {
   text("Oiiiiii!", random(200), random(200));
};
Contudo, se apenas declararmos a função, nada acontecerá. A fim de que o programa execute o código que está dentro da função, precisamos efetivamente "chamar" a função, escrevendo seu nome seguido de parênteses vazios:
digaOi();
E aí poderíamos chamá-la quando quiséssemos, quantas vezes quiséssemos!
digaOi();
digaOi();
digaOi();
Frequentemente, queremos a possibilidade de personalizar funções, de dizer ao programa "bem, execute todo esse código, mas varie umas coisinhas no modo como você o faz". Assim, temos código que é reusável e flexível, o melhor de dois mundos. Podemos conseguir isso especificando "argumentos" para uma função, usando-os para modificar o comportamento dela e fornecendo-os quando formos chamar tal função.
Por exemplo, que tal especificar onde exatamente queremos que a mensagem seja mostrada, da mesma forma que podemos dizer exatamente onde queremos desenhar com rect() e ellipse()? Podemos pensar em fazer a chamada assim, para colocar a mensagem em duas coordenadas precisas:
digaOi(50, 100);
digaOi(150, 200);
Para isso funcionar, precisamos mudar a definição da nossa função digaOi de forma que ela saiba que irá receber 2 argumentos, e então usá-los dentro dela:
var digaOi = function(xPos, yPos) {
   text("Oiiii!", xPos, yPos);
};
Os argumentos passados basicamente se tornam variáveis dentro da definição de sua função, e seus nomes dependem de como você os define entre os parênteses. Podemos facilmente renomeá-los para algo menor:
var digaOi = function(x, y) {
   text("Oiiii!", x, y);
};
Nossas funções podem aceitar qualquer número de argumentos - zero, um, dois ou mais. Poderíamos ter decidido que nossa função aceitaria um nome para quem dizer oi:
var digaOi = function(nome) {
   text("Oiiii, " + nome, random(200), random(200));
};
Então, a chamada seria feita assim:
digaOi("Winston");
digaOi("Pamela");
Podemos combinar essas ideias e fazer com que a função aceite três argumentos, o nome e as posições:
var digaOi = function(nome, x, y) {
   text("Oiiii " + nome, x, y);
};
E depois chamá-la:
digaOi("Winston", 10, 100);
Realmente depende do que você quer que as funções façam e do quanto você quer customizar o que elas podem fazer. Você pode começar sem argumentos e depois adicioná-los conforme o necessário.
Ora, você tem usado funções esse tempo todo - é assim que você tem desenhado e feito animações - através de rect, ellipse, triangle, etc. Todas essas funções estão na biblioteca 'ProcessingJS' e nós a carregamos em todos os programas que você cria aqui, de modo que você possa sempre usá-las. Nós definimos as funções para você, porque pensamos que elas poderiam ser úteis, mas agora fica a seu critério decidir quais funções personalizadas você vai querer usar em seus próprios programas. Por exemplo, disponibilizamos a função ellipse, mas não a função gato - se seu programa inclui um monte de gatos em diferentes locais, talvez você deva criar sua própria função gato!
Há outra coisa importante que podemos fazer com funções - usá-las para receber alguns valores, calcular algo com eles e devolver um novo valor. Considere tudo que é possível fazer com uma calculadora - somar valores, subtrair, extrair a raiz quadrada, multiplicar, etc. Todas essas operações seriam feitas com funções que pegam a entrada e retornam o resultado. As funções recebem a entrada através de argumentos e devolvem o resultado usando um comando return. Eis aqui uma função que soma dois números e retorna o resultado:
var somaNumeros = function(num1, num2) {
  var resultado = num1 + num2;
  return resultado;
};

var soma = somaNumeros(5, 2);
text(soma, 200, 200); // Mostra o resultado "7"
O comando return faz duas coisas: devolve um valor a quem quer que o tenha chamado (o que explica como pudemos armazenar o resultado na variável soma) e imediatamente encerra a execução da função. Isso quer dizer que seria bobagem deixar a última linha no código a seguir, já que ela nunca seria executada:
var somaNumeros = function(num1, num2) {
  var resultado = num1 + num2;
  return resultado;
  resultado = resultado * 2; // bobagem!
};
Funções que retornam valores são bem úteis para manipular dados em programas e também podem ser combinadas em expressões:
var somaMaior = somaNumeros (2, 5) + somaNumeros (3, 2);
Você pode até mesmo chamar funções dentro de chamadas de funções, embora possa tornar a leitura difícil algumas vezes:
var enormeSoma = somaNumeros(somaNumeros(5, 2), somaNumeros(3, 7));
Agora que você sabe como criar funções que encapsulam blocos de código, precisamos trazer um conceito importante: variáveis locais versus variáveis globais.
Quando declaramos uma nova variável dentro de uma função, dizemos que ela é local àquela função. Isso porque a variável só é visível para aquela função - o restante do programa não consegue vê-la. Assim que sairmos da função, é como se a variável não existisse mais. Na função seguinte, resultadoLocal é uma variável local:
var somaNumeros = function(num1, num2) {
  var resultadoLocal = num1 + num2;
  println("O resultado local é: " + resultadoLocal);
  return resultadoLocal;
};
somaNumeros(5, 7);
println(resultadoLocal); // oh nao!
Quando rodarmos esse código, teremos um erro na linha final: "resultadoLocal is not defined" (resultadoLocal não está definida). A variável só está definida dentro da função, pois foi lá que a declaramos com a linha var resultadoLocal =, e não há definição dela fora da função.
Quando declaramos uma variável fora de nossas funções, dizemos que é uma variável global. Isso porque todas as funções são capazes de acessá-la e usá-la como bem entenderem.
var resultadoGlobal;

var somaNumeros = function(num1, num2) {
  resultadoGlobal = num1 + num2;
  println("O resultado global é: " + resultadoGlobal);
};
somaNumeros(5, 7);
println(resultadoGlobal);
Ao rodarmos o código acima, não receberemos um erro, pois declaramos resultadoGlobal fora da função, de modo a podermos acessá-la de onde quisermos.
Todas as linguagens de programação são diferentes, mas, com relação ao JavaScript, é importante saber que as variáveis têm "escopo de função" - uma função vê suas variáveis locais, declaradas dentro dela, e as variáveis globais, declaradas fora dela, mas não é capaz de ver variáveis locais de outras funções.
Carregando