Loops, and where your data lives

INPUT · Slides

Tidying up the output

01 / 03

After "it works" comes "it reads"

In the last lesson you got as far as adding things up and showing them.

But numbers just sitting in a row do not tell the reader anything. From here you will tidy the output up until it is fit to show someone.

02 / 03

The tools for tidying

No new syntax needed. You can do it all with the tools you already have.

  • show a heading line once, first
  • add numbers (${i + 1})
  • mix units and marks into the template literal (yen, x, /)
  • slip in a separator line (a string like "---")
  • give the case of zero entries a display of its own
const menu = ["curry", "udon"];console.log("MENU");for (let i = 0; i < menu.length; i++) {  console.log(`${i + 1}. ${menu[i]}`);}

Result

MENU
1. curry
2. udon

03 / 03

Keep the data and the display apart

What matters is changing only how it looks, never the data itself.

Leave what is in the array or the object alone, and put your effort only into building the string you hand to console.log. Do that and when you want to change the display later, you never have to touch the data.

Ten questions to finish. Off we go.