Funções e escopo

Uma função é um pedaço de código com nome. Você escreve uma vez e chama quando precisar. Neste capítulo a oficina ganha saudações e contas reutilizáveis. O exemplo está em exemplos/15-funcoes/.

Chamar é pedir a função para rodar. Os parênteses () fazem esse pedido.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

• Declarar function nome(parametros).
• Devolver um valor com return.
• Chamar a função com ().
• Entender que variável local some no fim.
• Conhecer de relance console e parseInt.

Nome, parâmetros e retorno

Parâmetro é um apelido para o valor que chega. return devolve o resultado para quem chamou.

function somarVagas(ocupadas, livres) {
  return ocupadas + livres;
}

const totalDaXilo = somarVagas(8, 4);
console.log(totalDaXilo);

A função somarVagas espera dois números. A chamada somarVagas(8, 4) envia 8 para ocupadas e 4 para livres. A ordem importa.

Sem (), o nome da função é só o nome. Nada corre. somarVagas não é somarVagas().

function montarSaudacao(visitante, oficina) {
  return `Olá, ${visitante}! Bem-vinda à ${oficina}.`;
}

console.log(montarSaudacao("Lia Mendes", "cerâmica"));
console.log(montarSaudacao("Caio Nunes", "xilogravura"));

A mesma receita serve para duas visitas. Você não copia a frase inteira de novo.

Pare e experimente. Chame montarSaudacao com "Ana Lima" e "serigrafia". Preveja a frase nova no console. Recarregue e confira.

Erro comum: esquecer o return. A função corre e devolve undefined. O log mostra undefined.

Escopo: o que nasce dentro some

Escopo é a área em que um nome existe. Cada chamada de função tem a sua. Quando a função termina, as variáveis locais são descartadas.

function contarCadeiras(quantidade) {
  const aviso = "Só a função vê este texto.";
  return quantidade + 2;
}

contarCadeiras(10);
console.log(aviso);

aviso não existe fora. O console aponta erro de variável não definida. Isso é esperado.

O mesmo vale para o i de um for declarado com let dentro do laço. Depois do laço, i já morreu.

function precoDaOficina(pessoas) {
  const precoPorPessoa = 40;
  return pessoas * precoPorPessoa;
}

console.log(precoDaOficina(3));

precoPorPessoa vive só dentro de precoDaOficina. Lá fora, use o número que a função devolveu.

Uma variável declarada fora, no arquivo, é global para aquele arquivo. A função pode lê-la. Prefira passar parâmetros. Assim o pedido fica visível na chamada.

Pare e experimente. Depois de precoDaOficina(3), tente console.log(precoPorPessoa). Preveja o erro. Recarregue e leia a mensagem.

Erro comum: declarar let total dentro da função e tentar usar total na linha seguinte, já fora das chaves.

Funções que o navegador já traz

Você não inventa tudo. O ambiente já oferece funções prontas. Chamamos isso de builtin: ferramenta de fábrica.

console.log é uma. Você já usa. console é o objeto; log é a função de dentro dele.

parseInt lê um texto e tenta devolver um número inteiro. "12" vira 12. Serve quando a tela da calculadora mostra texto e a conta precisa de número. O capítulo 20 volta a isso.

const textoDasVagas = "12";
const vagasComoNumero = parseInt(textoDasVagas, 10);

console.log(vagasComoNumero);
console.log(vagasComoNumero + 3);

O 10 no segundo argumento pede base decimal. Use-o. Ele explicita a base. Sem base informada, um prefixo 0x é interpretado como hexadecimal; zeros à esquerda, por si só, não mudam para octal.

Há outras prontas: Math.round, texto.toLowerCase(). Não decore a lista. Quando precisar, busque na MDN.

A figura resume entrada, saída e o nome que fica preso dentro.

Pare e experimente. Troque "12" por "12 cadeiras". Preveja parseInt pegar o 12 e parar no espaço. Recarregue e confira.

Erro comum: somar "8" + 4 sem parseInt. O resultado vira "84", porque + cola texto.

O arquivo do exemplo

exemplos/15-funcoes/oficina.js junta as funções deste capítulo. O HTML só carrega o script no fim do body, como na 13.

Leia uma função por vez. Mude um parâmetro. Preveja o return. Recarregue. Se o console falar de nome não definido, pergunte: esse nome nasceu dentro de quais chaves?

Não publique estas contas como preço real da oficina. Os números são de exercício.

Atividades

1. O que acontece se você escrever montarSaudacao sem ()?
2. Para que serve return?
3. Por que aviso não aparece depois de contarCadeiras?
4. Quando parseInt entra na história da calculadora?

Respostas comentadas

1. Nada corre. Você só mencionou o nome da função. Sem parênteses não há chamada.
2. Entrega o valor para quem chamou. Sem return, a chamada vale undefined.
3. aviso foi declarado dentro da função. No fim da chamada o escopo some e o nome some com ele.
4. O que vem da tela é texto. A conta precisa de número. parseInt("12", 10) faz essa troca. Você usa isso de verdade no capítulo 20.

Referências

• function
• return
• Escopo
• parseInt

O arquivo completo

Referência do exemplo 15-funcoes, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Funções</title>
<link href="lab.css" rel="stylesheet"/>
<style>body{overflow-wrap:anywhere}img,input,textarea,select,iframe{max-width:100%}img{height:auto}fieldset,.cartao{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}.atalho-conteudo{position:absolute;left:.5rem;top:-6rem;background:white;color:#172f50;padding:.5rem;z-index:999}.atalho-conteudo:focus{top:.5rem}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}</style></head>
<body><a class="atalho-conteudo" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Funções e escopo</h1>
<p>O console mostra saudações reutilizando a mesma função.</p>

</main><script src="oficina.js"></script></body>
</html>

oficina.js

function somarVagas(ocupadas, livres) {
  return ocupadas + livres;
}

const totalDaXilo = somarVagas(8, 4);
console.log(totalDaXilo);

function montarSaudacao(visitante, oficina) {
  return `Olá, ${visitante}! Bem-vinda à ${oficina}.`;
}

console.log(montarSaudacao("Lia Mendes", "cerâmica"));
console.log(montarSaudacao("Caio Nunes", "xilogravura"));

function contarCadeiras(quantidade) {
  const aviso = "Só a função vê este texto.";
  return quantidade + 2;
}

contarCadeiras(10);
// console.log(aviso); // Descomente para observar o erro de escopo.

function precoDaOficina(pessoas) {
  const precoPorPessoa = 40;
  return pessoas * precoPorPessoa;
}

console.log(precoDaOficina(3));

const textoDasVagas = "12";
const vagasComoNumero = parseInt(textoDasVagas, 10);

console.log(vagasComoNumero);
console.log(vagasComoNumero + 3);