3.5 Objects and Properties

Step 1 — Trace the code line by line: The object literal creates car with two properties: make: "Toyota" and year: 2019.

Step 2 — The assignment car.color = "blue";: Assigning to a property that does not yet exist creates it. So after this line, car has three properties.

Step 3 — The first print: car.color now exists and holds "blue", so the console shows blue.

Step 4 — The second print: Reading a property that is not there is not an error — it gives undefined. There is no model property, so the console shows undefined.

Answer: It prints blue then undefined. The second line is not an error because reading a missing property returns undefined; only reading an undeclared variable throws a ReferenceError.

Step 1 — Evaluate item.key: Dot notation looks for a property literally named key. The object { price: 10 } has no such property, so the result is undefined.

Step 2 — Evaluate item[key]: Square brackets evaluate the expression inside first. Here key is the variable holding "price", so JavaScript fetches the property named "price" and gets 10.

Answer: item.key gives undefined (it looks for a property literally named key); item[key] gives 10 (brackets work out the name from the variable first).

Step 1 — word.toUpperCase without parentheses: A method is just a property whose value is a function. Without parentheses you get the function value itself — nothing runs.

Step 2 — word.toUpperCase() with parentheses: The parentheses call the function, so you get its return value, e.g. "JAVASCRIPT" for word = "javascript".

Answer: word.toUpperCase is the function value itself; word.toUpperCase() calls it and gives the result string. The parentheses are what make the call happen.

Step 1 — Destructure the object: const { cost, title } = item; unpacks properties into variables matched by property name: cost becomes 2 and title becomes "Pen".

Step 2 — Print: console.log(title + " costs " + cost) uses those variables in whatever order we like, producing Pen costs 2.

Step 3 — Why order does not matter: Object destructuring matches by name, not position — the pattern { cost, title } says "take the property called cost" wherever it lives in the object. (Array destructuring is the opposite: it matches by position.)

Answer: It prints Pen costs 2. Order in the pattern is irrelevant because object destructuring matches variables to properties by name.

Step 1 — Match by position: Array destructuring pairs variables with elements by index: first takes index 0 (10) and second takes index 1 (20).

Step 2 — Compare with objects: Objects match by property name ({ title } grabs the property called title, regardless of where it sits); arrays match purely by position.

Answer: second is 20. Array destructuring matches by position, whereas object destructuring matches by property name.

Step 1 — Create the object literal: Group the related facts under one name with braces and key: value pairs:

▶ Press Run to see the output…

Step 2 — Change the price: Assignment to an existing property overwrites it:

▶ Press Run to see the output…

Step 3 — Add inStock: Assigning to a property that does not exist creates it:

▶ Press Run to see the output…

Step 4 — Print the whole object:

▶ Press Run to see the output…

Output:

{"brand":"Pixel","price":549,"inStock":true}

Answer: The final object is { brand: "Pixel", price: 549, inStock: true }, printed as shown above.

Step 1 — Get the key names: Object.keys(obj) returns an array of the object's keys, which a loop can walk through.

Step 2 — Fetch each value with brackets: Inside the loop, the key is held in a variable, so dot notation cannot reach it — square brackets are required.

▶ Press Run to see the output…

Output:

a: 1
b: 2
c: 3

Answer: The loop above prints a: 1, b: 2, c: 3 — one line per key/value pair.

Step 1 — What happens with a misspelled variable: An undeclared variable throws a ReferenceError immediately when read — loud and impossible to miss.

Step 2 — What happens with a misspelled property: Reading a property that does not exist simply returns undefined. No error is raised at the point of the typo.

Step 3 — Why that is dangerous: The program keeps running, and the undefined travels onward until it causes trouble somewhere else entirely — often far from the actual mistake. You must trace back from the crash site to find the typo.

Answer: A misspelled variable fails immediately with a ReferenceError, but a misspelled property silently yields undefined, letting the bug surface later and far away from its cause.

Step 1 — Loop over the array of objects: Use an index loop so we can pick one record at a time with cart[i].

Step 2 — Compute the total per item: For each item, multiply price by quantity and print alongside the name.

▶ Press Run to see the output…

Output:

Notebook: 12
Pen: 15

Answer: The code prints Notebook: 12 and Pen: 15.

Step 1 — Write the linear search: Walk the array with an index loop; compare each element's name property against the wanted name using ===; return the whole object on a match.

Step 2 — Handle "not found": If the loop finishes without returning, return null.

▶ Press Run to see the output…

Step 3 — Why null beats undefined: undefined is also what you get from a typo or a missing property, so seeing it tells you nothing about why the value is absent. null is a deliberate value meaning "we looked and found nothing" — it distinguishes an intentional empty result from an accidental one.

Answer: The function above returns the matching student object or null; null is preferred because it explicitly signals "not found", whereas undefined could equally indicate a typo or missing property.

Step 1 — Take one options object parameter: Every input arrives named, so the call site reads clearly and argument order cannot cause bugs.

Step 2 — Build the label conditionally: Start the string with text and size, append , bold only when options.bold is true, then close the parenthesis.

▶ Press Run to see the output…

Output:

HELLO (14px, bold)
HELLO (14px)

Answer: The function above returns "HELLO (14px, bold)" when bold is true and "HELLO (14px)" when it is false.

Step 1 — Move the destructuring into the parameter list: Replace options with the pattern { text, size, bold }, which unpacks the three properties into variables of those names the moment the function is called.

Step 2 — Shorten the body: With local variables available, drop every options. prefix.

▶ Press Run to see the output…

Output:

HELLO (14px, bold)
HELLO (14px)

Answer: The rewritten function destructures in its parameter list and uses bare text, size, and bold throughout — identical behaviour, cleaner body, and the parameter list now documents exactly which properties are expected.

Step 1 — Identify the failure mode of positional arguments: With four positional arguments such as (width, height, depth, color), a caller can swap two numbers and get no error — just silently wrong output, since all values are valid types.

Step 2 — How the options object fixes it: Passing { width: 10, height: 4, depth: 6, color: "red" } means each value carries its own name. Keys decide what goes where, not order, so swapping them in the literal changes nothing.

Answer: One reason: an options object makes each argument self-describing, so the swap bug of positional arguments cannot happen — the keys, not their order, determine which value goes to which use.

Step 1 — Reading it: The key contains a space, so dot notation cannot express it (obj.due date is invalid). Square brackets take a string, so they work:

▶ Press Run to see the output…

Step 2 — Changing it: Same rule on assignment — brackets with the quoted key:

▶ Press Run to see the output…

Answer: Read it with task["due date"] and change it with task["due date"] = "Friday"; — any key that is not a simple word must be reached with square brackets.