Funções

1. Anatomia de uma função

Função = bloco de código com nome. Escreve uma vez, chama quantas vezes quiser. Todo tratar... do caderno é uma função.

function somar(x, y) {   // x, y: PARÂMETROS (o que a função recebe)
  return x + y;          // return: devolve o resultado e encerra
}

somar(2, 5);             // chamada; 2 e 5 são os ARGUMENTOS -> 7

Parâmetro sem argumento vale undefined (não dá erro). Teste com calcular(n1, n2):

Código: js/funcoes.js, seção 1.

2. Três jeitos de escrever

// Declaração: a mais comum
function somar(x, y) {
  return x + y;
}

// Expressão: a função fica guardada numa variável
const somar = function (x, y) {
  return x + y;
};

// Arrow function: a forma curta (=>)
const somar = (x, y) => x + y;

• Arrow: com uma linha, sem { } e sem return. Com um parâmetro, sem parênteses: x => x * 2.
• Maiúscula importa: definir Soma e chamar soma(10, 2) dá o erro soma is not defined.

Código: js/funcoes.js, seção 2.

3. Escopo: o que nasce dentro, fica dentro

function addQuadrado(a, b) {
  function quadrado(x) {      // só existe dentro de addQuadrado
    return x * x;
  }
  return quadrado(a) + quadrado(b);
}

addQuadrado(3, 4);            // 9 + 16 = 25
quadrado(3);                  // ERRO: quadrado não existe aqui fora

Vale para variáveis também: o const soma criado dentro de somar() não existe dentro de subtrair().

Código: js/funcoes.js, seção 3.

4. Calculadora: do jeito simples ao jeito das empresas

Jeito simples: uma função por botão, ligada no HTML.

<input type="button" value="Somar" onclick="somar()">

function somar() {
  const n1 = Number(document.getElementById("n1").value);
  const n2 = Number(document.getElementById("n2").value);
  document.getElementById("resultado").innerHTML = "O resultado é " + (n1 + n2);
}
// subtrair(), multiplicar() e dividir(): as mesmas 3 linhas, só muda a conta

Como se faz nas empresas: contas separadas da tela, sem repetir.

// a) As contas: pequenas, só recebem e devolvem
const somar = (a, b) => a + b;
const subtrair = (a, b) => a - b;

// b) UMA função cuida da tela (lê, valida, mostra)
function mostrarConta(conta, simbolo) {
  const n1 = lerNumero(campoN1);
  const n2 = lerNumero(campoN2);
  saida.textContent = `${n1} ${simbolo} ${n2} = ${conta(n1, n2)}`;
}

// c) O botão é ligado no JS, não no HTML
botaoSomar.addEventListener("click", () => mostrarConta(somar, "+"));

Novidade: mostrarConta(somar, "+") passa uma função como argumento. Em JS, função é um valor como outro qualquer.

Código: js/funcoes.js, seção 4.

5. Pouco usadas hoje (para reconhecer)

Caem em prova e aparecem em código antigo. No dia a dia, quase não se usam.

// new Function: o corpo vai como TEXTO. Evite (mesmo risco do eval).
const somar = new Function("x", "y", "return x + y");

// Função construtora: cria objetos com new (nome com maiúscula)
function Pessoa(nome, sobrenome) {
  this.nome = nome;               // this = o objeto que está nascendo
  this.sobrenome = sobrenome;
}
const teste = new Pessoa("Natália", "Oliveira");

// Hoje se escreve com class (faz o mesmo):
class Pessoa {
  constructor(nome, sobrenome) {
    this.nome = nome;
    this.sobrenome = sobrenome;
  }
}

Geradora: a função que pausa

function* testandoGeradora() {   // o * marca a geradora
  yield 1;                       // pausa e entrega 1
  yield 2;
  yield 3;
}

const funcaoGeradora = testandoGeradora();
funcaoGeradora.next();   // { value: 1, done: false }
// ... depois do 3: { value: undefined, done: true }

for (let item of testandoGeradora()) { }   // o for...of chama o next() sozinho

Código: js/funcoes.js, seção 5.

O que usar no dia a dia

Boas práticas: nome com verbo (somar, calcularMedia), uma tarefa por função e sem repetir código.