Projeto: calculadora de gorjeta e FizzBuzz

Uma conta de 84 com 20 por cento de gorjeta dividida por quatro dá 25.20 para cada um. Esta unidade constrói essa calculadora, e depois o clássico exercício FizzBuzz, com as peças das unidades anteriores.

De um problema a um programa

Escrever um programa começa antes de qualquer código. Primeiro diga em palavras simples o que entra, o que sai e o que acontece no meio. Numa calculadora de gorjeta, as entradas são a conta, a taxa da gorjeta e o número de pessoas. As saídas são a gorjeta, o total e a parte de cada pessoa. No meio há três cálculos pequenos. Pôr isso por escrito transforma uma tarefa vaga em várias tarefas pequenas, e você já sabe fazer cada uma delas.

Passo 1: o cálculo

const bill = 84;
const rate = 0.2;
const people = 4;

const tip = bill * rate;          // vale 16.8
const total = bill + tip;         // vale 100.8
const each = total / people;      // vale 25.2

Confira os números à mão antes de confiar no código: 20 por cento de 84 é 16.8, o total é 100.8 e 100.8 dividido por 4 dá 25.2. Testar com valores cuja resposta você já sabe é como se pegam erros como uma taxa digitada como 20 em vez de 0.2, que deixaria a gorjeta em 1680.

Passo 2: mostrando dinheiro direito

Dinheiro costuma aparecer com duas casas decimais, e mostrar 25.2 parece inacabado. O método de número toFixed(2) devolve uma string com exatamente duas casas decimais, então each.toFixed(2) dá "25.20". Lembre da unidade de números: decimais podem trazer pequenos erros de arredondamento binário; o toFixed também os esconde, o que é mais um motivo para usá-lo na exibição. Mantenha os números como números enquanto calcula e chame toFixed só no fim, ao mostrar.

Passo 3: embrulhe tudo numa função

Um cálculo que você pode rodar de novo com outros números deve ficar numa função. A função abaixo devolve um objeto, então uma única chamada pode entregar os três resultados com nomes claros. Os parâmetros padrão deixam o caso mais comum curto de escrever.

function splitBill(bill, rate = 0.15, people = 1) {
  const tip = bill * rate;
  const total = bill + tip;
  return { tip, total, each: total / people };
}

const r = splitBill(84, 0.2, 4);
console.log(`Tip: ${r.tip.toFixed(2)}`);       // mostra Tip: 16.80
console.log(`Each: ${r.each.toFixed(2)}`);     // mostra Each: 25.20

A linha return { tip, total, each: total / people }; usa uma forma curta: escrever tip sozinho dentro de um objeto quer dizer tip: tip, uma propriedade cuja chave e cuja variável têm o mesmo nome.

FizzBuzz

FizzBuzz é uma brincadeira de contar que virou exercício de programação. Conte de 1 a 15. Para múltiplos de 3 diga Fizz, para múltiplos de 5 diga Buzz, para múltiplos dos dois diga FizzBuzz e, nos outros casos, diga o número. Ele usa um laço, o operador de resto e uma cadeia de if, e tem uma armadilha. O número 15 é múltiplo de 3, então, se você testar o 3 primeiro, 15 mostra Fizz e nunca chega ao ramo FizzBuzz. A solução é a regra da unidade do if: ponha a condição mais estreita primeiro.

for (let i = 1; i <= 15; i++) {
  if (i % 15 === 0) {          // múltiplo dos dois
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

Testar i % 15 === 0 funciona porque um número divisível por 3 e por 5 é divisível por 15. Escrever i % 3 === 0 && i % 5 === 0 diz a mesma coisa de forma mais direta, e qualquer um dos dois serve. Quando a sua versão rodar, compare a saída linha por linha com a lista esperada: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz.

O que construir em seguida

Agora você tem o núcleo da linguagem: valores, variáveis, operadores, decisões, laços, arrays, funções e objetos. Quase todo programa é construído com essas peças. Bons próximos passos são reescrever o FizzBuzz como uma função que recebe o limite superior, fazer a calculadora de gorjeta arredondar a parte de cada um para cima, em unidades inteiras da moeda, com Math.ceil, ou guardar uma lista de despesas num array de objetos e mostrar o total por categoria. O Guia de JavaScript do MDN, que este curso segue, continua com temas como coleções, classes e trabalho com páginas web.