JavaScript Summary & Next Steps

This page adds no new syntax. It puts the whole course on one order: drink tea, size regular. The line you should be able to explain is tea / regular.

Where that line came from

The accessibility page wrote it with a real <button type="button">. A mouse click, Enter, and Space all run that click. aria-live="polite" speaks the new text after the current sentence. When size is missing, button.disabled is true and the button stays on the page. Focus stays on the button.

Two earlier lines

Debugging looked up order.cup on { drink: "tea", size: "regular" }. The object has size, not cup. The fix reads size. console.error does not throw, so the script continues. That page ended on fixed / tea / regular.
The errors page did stop the function. throw new Error("missing size") halts label before return. catch reads error.message, which is missing size. error.name is Error. finally runs either way. That page ended on caught / missing size.

Seven rows, one order

Each row is a piece of the same order. Open the matching session only if that result feels thin.

The map is a reminder. It is not a second course, and it has no questions.

Values and decisions

You store tea and regular, compare them, and repeat. if chooses one path. A loop walks extras such as mint and lemon. break leaves the loop. continue skips one item and keeps going.

Functions

A function receives the order and returns tea / regular. Parameters can default. An arrow function is a shorter function. Scope decides which name is visible. A closure still sees a binding after the outer function has returned.

Objects, JSON, and arrays

order.drink is tea and order.size is regular. JSON.parse turns text into an object. An array holds the extras. map builds a new array. find returns one match. Spread copies the order. Rest gathers what you did not name. A copy is shallow.

The page

querySelector finds the button. textContent writes the line. The click runs for the mouse, Enter, and Space. Form fields are read from the form. setTimeout runs later and does not replace the button.

Waiting

A callback runs when the wait ends. A Promise settles fulfilled or rejected. await pauses only that async function. The page keeps going. An async function always returns a Promise. fetch sends the request and resolves to a Response, not to a parsed body. response.json() parses the body and returns another Promise. An HTTP 404 usually does not reject fetch. Check response.ok before you read the body. A network failure can reject.

Newer syntax

Destructuring takes drink and size by name. A missing nested object can throw. A template literal keeps line breaks and fills ${...} when it runs. A module keeps its names off window, and the browser loads it over HTTP. A class builds the object in constructor, uses this, and calls super before this in a child. A private field stays inside the class.

When the order is wrong

Read size, not a property that is not there. console.error marks the failure and the next line still runs. throw stops the function, and only catch continues. Use a button for the action. Leave the focus outline visible.

What is next

The next page is a short to-do list: add an item, mark it done, and remove it, with the DOM and click handling from this course. That page is still part of the core path.
After it, optional pages cover strict mode, Map and Set, regular expressions, web storage, cookies, and class inheritance. They are not required to finish the core path.

Say these five lines

• The button writes tea / regular, and aria-live polite announces it
• console.error does not throw; the debugging line was fixed / tea / regular
• throw stops label; catch reads missing size; that line was caught / missing size
• fetch resolves to a Response; check response.ok before response.json()
• The next page is the to-do list