The Cafe Ticket

Everything you know, in one program

Every exercise so far handed you one new idea. This one hands you none: every line in the editor is something you have already written.

That is what a finished program is — not one clever trick, but ordinary ones arranged in the order the work happens. Here is this receipt, named piece by piece, with the exercise each part came from:

• console.log puts a line on the screen. Exercise 1.
• const and let put names on values — exercise 2 for const, exercise 5 for let.
• qty * price turns two numbers into an amount, and Math.floor keeps the service charge to whole rupees. Exercise 3.
• An if decides whether the service charge applies at all, and its braces decide which lines belong to it. Exercises 4 and 6.
• A template literal with padEnd and padStart lands the columns in a straight line. Exercise 7.
• An array and a for...of loop print the two notes at the bottom. Exercise 8.
• subtotal = subtotal + cost collects the order one item at a time, the same shape as the total = total + mm that collected a week of rainfall. Exercise 9.

Seven ideas, none of them new, all in one receipt.

Which names change, and which never do

JavaScript asks you to say, for every name you declare, whether it will ever point at something else. Read that decision off the page:

• subtotal, item, qty, price and cost are all let: the subtotal grows once per item, and each block writes the next item over the last.
• service is let for a quieter reason. It is set to 0 first, then replaced if the bill is big enough. A const declared inside the braces of the if would belong to those braces alone and be gone by the closing one.
• total and notes are const, each settled once and never touched again.

Reach for const first. Change it to let only when the program shows you it has to.

A worked example

A stationery stall rather than a cafe, so the receipt in the editor stays yours to finish:

let total = 0;

let item = "Notebook";
let cost = 45;
total = total + cost;
console.log(`${item.padEnd(10)}${String(cost).padStart(5)}`);

item = "Pen";
cost = 12;
total = total + cost;
console.log(`${item.padEnd(10)}${String(cost).padStart(5)}`);

const tenth = Math.floor(total / 10);

console.log("---------------");
console.log(`Charge${String(tenth).padStart(9)}`);
console.log(`TOTAL${String(total + tenth).padStart(10)}`);

Notebook     45
Pen          12
---------------
Charge        5
TOTAL        62

Nothing there is typed in but the two items and their prices: the total collects itself, and Math.floor turns a tenth of it, 5.7, into a whole 5. Change the 45 to 55 and the charge and the total both move, with nobody retyping either.

Your turn

Press Run before changing anything. Most of the receipt is already right: the header, the first two rows, the service charge, the notes at the bottom.

Two lines are marked. Both already run: they are wrong, not missing.

1. The cake's row still glues its four values together with plus signs, so the numbers land nowhere near the columns above. Rewrite it as a template literal matching the two finished rows; the widths you need are sitting on them.
2. total is 0, so the bottom of the receipt disagrees with the rest of it. Work it out from the two values the program already holds: the amount for the items, and the charge added on top.

Then change something — two slices of cake, a different price for the chai — and run it again. The row, the subtotal and the total all move together, and the service charge follows whenever the subtotal crosses into a new ten. That is a receipt worked out, not typed.

If something goes wrong

The likeliest slip is the total, and it announces itself: the TOTAL line still shows 0, or disagrees with the two numbers above it. Check that both names to the right of the = are spelled as they are further up, and that the line still sits below the if. JavaScript works down the page, so a total written just above the if adds a service charge that is still 0, and the receipt ends at 140.

If the cake row prints dollar signs and braces at you word for word, its quotes are still the ordinary kind and the row wants backticks. If it prints but sits out of line, count its widths against the rows above rather than guessing. And if the program stops on TypeError: Assignment to constant variable, something declared with const is being asked to change.

Nothing here can break. Change the order, run it again, and read your own receipt.