Checkpoint: Writing Real Programs

Five questions on this section. Answer all of them, then see your score and why each answer is right or wrong.

money.js contains export function formatMoney(cents) { … }. main.js contains import formatMoney from "./money.js";. What happens?

Loading fails: money.js has no default export. Write import { formatMoney } from "./money.js";.
It works, because the names match.
formatMoney is undefined until it is first called.
It works only if the file is renamed to money.mjs.

What does this log?

JavaScript

class Store {
  #items = [];
  add(x) { this.#items.push(x); }
  get size() { return this.#items.length; }
}
const s = new Store();
s.add(1);
console.log(s.size, s.items);

1 [1]
undefined undefined
It throws a SyntaxError.
1 undefined

Your loader catches every error in this block. A bug inside render now goes unnoticed. What is the better structure?

JavaScript

try {
  const data = JSON.parse(text);
  render(data);
} catch {
  render([]);
}

Keep it, and leave the catch block empty instead.
Wrap only JSON.parse in try/catch with a fallback, and call render outside it, so its bugs surface.
Wrap the whole app in one big try/catch at the top.
Remove the try entirely.

Pocket shows Total: $NaN after you add an expense. A breakpoint in totalCents shows the new expense has amount: undefined. Where do you look next?

The stylesheet, in case the total is hidden.
The reduce call inside totalCents.
The submit handler code that builds the new expense object.
The storage size limit.

In Pocket, the delete handler calls button.closest("li").remove(). Deleted expenses come back when the filter changes. Why?

remove() is asynchronous and had not finished.
The browser caches the list between renders.
The filter select reloads the page.
The handler changed the page but not state.expenses, so the next render draws the expense again.

5 questions unanswered