Проект: калькулятор чаевых и FizzBuzz

Счёт 84 с чаевыми 20 процентов на четверых даёт по 25.20 с каждого. В этом уроке мы соберём такой калькулятор, а затем классическое упражнение FizzBuzz из частей прошлых уроков.

От задачи к программе

Написание программы начинается ещё до кода. Сначала простыми словами скажи, что поступает на вход, что выходит и что происходит между ними. Для калькулятора чаевых входные данные: счёт, процент чаевых и число людей. Выходные: чаевые, итог и доля каждого. Между ними три маленьких вычисления. Если это записать, одна расплывчатая задача превращается в несколько маленьких, и каждую ты уже умеешь решать.

Шаг 1: вычисление

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

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

Проверь числа вручную, прежде чем доверять коду: 20 процентов от 84 равны 16.8, итог равен 100.8, а 100.8, делённое на 4, равно 25.2. Проверка на значениях, ответ для которых ты уже знаешь, помогает поймать ошибки вроде ставки 20 вместо 0.2, из-за которой чаевые стали бы 1680.

Шаг 2: правильный вид денег

Деньги обычно показывают с двумя знаками после точки, и 25.2 выглядит незаконченным. Метод чисел toFixed(2) возвращает строку ровно с двумя знаками после точки, так что each.toFixed(2) даёт "25.20". Вспомни из урока о числах, что в дробных числах бывают крошечные двоичные ошибки округления; toFixed скрывает и их, это ещё одна причина использовать его для показа. Пока считаешь, держи числа числами и вызывай toFixed только в самом конце, при печати.

Шаг 3: оберни в функцию

Вычисление, которое, возможно, понадобится повторить с другими числами, стоит поместить в функцию. Функция ниже возвращает объект, так что один вызов отдаёт все три результата под понятными именами. Параметры по умолчанию делают обычный случай коротким.

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

В строке return { tip, total, each: total / people }; есть сокращение: tip отдельно внутри объекта означает tip: tip, свойство, у которого ключ и переменная называются одинаково.

FizzBuzz

FizzBuzz представляет собой игру на счёт, превращённую в упражнение по программированию. Считай от 1 до 15. Для чисел, кратных 3, говори Fizz, для кратных 5 говори Buzz, для кратных обоим говори FizzBuzz, а иначе называй число. Здесь нужны цикл, оператор остатка и цепочка if, и есть одна ловушка. Число 15 кратно 3, так что если проверять 3 первым, для 15 напечатается Fizz и до ветки FizzBuzz дело не дойдёт. Исправление взято из урока об if: ставь самое узкое условие первым.

for (let i = 1; i <= 15; i++) {
  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);
  }
}

Проверка i % 15 === 0 работает, потому что число, которое делится и на 3, и на 5, делится на 15. Запись i % 3 === 0 && i % 5 === 0 говорит то же самое прямее, и подходит любая. Когда твоя версия заработает, сравни её вывод построчно с ожидаемым списком: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz.

Что делать дальше

Теперь у тебя есть ядро языка: значения, переменные, операторы, решения, циклы, массивы, функции и объекты. Почти любая программа собрана из этих частей. Хорошие следующие шаги: переписать FizzBuzz в виде функции, которая принимает верхнюю границу, научить калькулятор чаевых округлять каждую долю вверх до целых денежных единиц с помощью Math.ceil или вести список расходов в массиве объектов и печатать сумму по категориям. Руководство MDN по JavaScript, по которому построен этот курс, продолжается темами вроде коллекций, классов и работы с веб-страницами.