Proyecto: calculadora de propinas y FizzBuzz

Una cuenta de 84 con un 20 por ciento de propina dividida entre cuatro sale a 25.20 por persona. Esta unidad construye esa calculadora, y luego el clásico ejercicio FizzBuzz, con las piezas de las unidades anteriores.

De un problema a un programa

Escribir un programa empieza antes de cualquier código. Primero di con palabras sencillas qué entra, qué sale y qué pasa en medio. En una calculadora de propinas, las entradas son la cuenta, el porcentaje de propina y el número de personas. Las salidas son la propina, el total y lo que paga cada persona. En medio hay tres cálculos pequeños. Anotarlo convierte una tarea vaga en varias pequeñas, y cada una ya sabes hacerla.

Paso 1: el 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

Comprueba los números a mano antes de confiar en el código: el 20 por ciento de 84 es 16.8, el total es 100.8, y 100.8 entre 4 es 25.2. Probar con valores cuya respuesta ya conoces es la forma de atrapar errores como una tasa escrita como 20 en lugar de 0.2, que haría que la propina fuera 1680.

Paso 2: mostrar el dinero como corresponde

El dinero normalmente se muestra con dos decimales, e imprimir 25.2 se ve sin terminar. El método de los números toFixed(2) devuelve una cadena con exactamente dos decimales, así que each.toFixed(2) da "25.20". Recuerda de la unidad de números que los decimales pueden llevar pequeños errores de redondeo binario; toFixed también los oculta, y esa es otra razón para usarlo al mostrar resultados. Mantén los números como números mientras calculas y llama a toFixed solo al final, al imprimir.

Paso 3: meterlo en una función

Un cálculo que quizá vuelvas a hacer con otros números va en una función. La función de abajo devuelve un objeto, así que una sola llamada puede entregar los tres resultados con nombres claros. Los parámetros predeterminados hacen que el caso habitual sea corto de escribir.

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)}`);       // muestra Tip: 16.80
console.log(`Each: ${r.each.toFixed(2)}`);     // muestra Each: 25.20

La línea return { tip, total, each: total / people }; usa una forma abreviada: escribir tip solo dentro de un objeto significa tip: tip, una propiedad cuya clave y variable comparten nombre.

FizzBuzz

FizzBuzz es un juego de contar convertido en ejercicio de programación. Cuenta del 1 al 15. Para los múltiplos de 3 di Fizz, para los múltiplos de 5 di Buzz, para los múltiplos de los dos di FizzBuzz y, si no, di el número. Usa un bucle, el operador de residuo y una cadena de if, y tiene una trampa. El número 15 es múltiplo de 3, así que si pruebas primero el 3, el 15 imprime Fizz y nunca llega a la rama de FizzBuzz. La solución es la regla de la unidad de if: pon primero la condición más estrecha.

for (let i = 1; i <= 15; i++) {   // cuenta y decide
  if (i % 15 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

Probar i % 15 === 0 funciona porque un número divisible entre 3 y entre 5 es divisible entre 15. Escribir i % 3 === 0 && i % 5 === 0 dice lo mismo de forma más directa, y cualquiera de las dos sirve. Cuando tu versión funcione, compara su salida línea por línea con la lista esperada: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz.

Qué construir después

Ya tienes el núcleo del lenguaje: valores, variables, operadores, decisiones, bucles, arreglos, funciones y objetos. Casi todos los programas se construyen con estas piezas. Buenos pasos siguientes son reescribir FizzBuzz como una función que reciba el límite superior, hacer que la calculadora de propinas redondee hacia arriba lo que paga cada persona a unidades enteras de moneda con Math.ceil, o llevar una lista de gastos en un arreglo de objetos e imprimir un total por categoría. La guía de JavaScript de MDN, que sigue este curso, continúa con temas como colecciones, clases y trabajo con páginas web.