Real data has holes. Some expenses have a note and some do not. Some have a receipt attached. A setting the user never changed is not saved at all. Pocket must handle all of these without crashing, and without mistaking “nothing” for a real value such as zero.
\nReading a property of an object that is not there is fine; you get undefined. Reading a property of undefined is not:
const expense = { label: \"Coffee\", amount: 450 };\nconsole.log(expense.receipt); // undefined: fine\n\ntry {\n console.log(expense.receipt.url); // reading .url of undefined\n} catch (error) {\n console.log(error.message);\n}TypeError: Cannot read properties of undefined (reading 'url') is probably the most common error in all of JavaScript. (The try/catch here only lets the example keep running so you can read the message; section 5 explains it properly.) The message tells you exactly what happened: something before .url was undefined.
Before reaching for a fix, remember the difference between the two “empty” values. undefined usually means “never set”: a missing property, a parameter nobody passed, a variable without a value. null is set on purpose to mean “deliberately empty”. Pocket might store receipt: null for an expense where the user chose not to attach one.
The ?. operator reads a property only if the thing on its left is not null or undefined. If it is, the whole expression stops and gives undefined instead of throwing:
const withReceipt = { label: \"Train\", receipt: { url: \"/r/88.png\" } };\nconst withoutReceipt = { label: \"Coffee\" };\n\nconsole.log(withReceipt.receipt?.url);\nconsole.log(withoutReceipt.receipt?.url);\nconsole.log(withoutReceipt.tags?.[0]); // works with brackets\nconsole.log(withoutReceipt.format?.()); // and with callsPut ?. right after the part that may be missing. In expense.receipt?.url, you are saying “expense must exist, receipt might not”.
?. gives you undefined, and usually you want a fallback value. You met || for defaults in section 2, along with its flaw: it falls back for every falsy value, including 0 and "". The nullish coalescing operator ?? falls back only for null and undefined:
const settings = { dailyLimit: 0, nickname: \"\" };\n\nconsole.log(settings.dailyLimit || 5000); // 5000: the user's 0 is lost\nconsole.log(settings.dailyLimit ?? 5000); // 0: kept\nconsole.log(settings.nickname ?? \"friend\"); // \"\": kept\nconsole.log(settings.currency ?? \"USD\"); // missing: default usedUse ?? for defaults. Use || only when you really do want empty strings and zeros replaced too. They combine naturally with ?.:
const expense = { label: \"Coffee\" };\nconst receiptUrl = expense.receipt?.url ?? \"No receipt\";\nconsole.log(receiptUrl);There is also an assignment form, settings.currency ??= "USD", which sets the property only if it is currently null or undefined.
In the last lesson you used a plain object to total categories. Objects work well for records with known property names. For a collection that grows with data, keyed by values you do not know in advance, JavaScript has a dedicated structure, Map:
\nconst counts = new Map();\nfor (const category of [\"food\", \"travel\", \"food\", \"fun\", \"food\"]) {\n counts.set(category, (counts.get(category) ?? 0) + 1);\n}\n\nconsole.log(counts.get(\"food\"), counts.has(\"rent\"), counts.size);\nfor (const [category, count] of counts) {\n console.log(`${category}: ${count}`);\n}set(key, value) stores, get(key) reads (or gives undefined), has(key) checks, delete(key) removes and size counts entries. A for...of loop gives you [key, value] pairs in the order they were first added.
Why not always use an object? A Map accepts any value as a key, including numbers and objects, where an object turns every key into a string. It has a real size. And it has no inherited properties to trip over: an object keyed by user-typed text can collide with built-in names such as constructor. A good default: objects for records with fixed fields, Maps for lookup tables built from data.
A Set is a collection where every value appears at most once. Adding a value that is already there does nothing:
\nconst categories = [\"food\", \"travel\", \"food\", \"fun\", \"travel\"];\nconst unique = new Set(categories);\n\nconsole.log(unique.size, unique.has(\"fun\"));\nunique.add(\"food\"); // already there: no change\nconsole.log([...unique]); // back to an array, in first-seen order[...new Set(list)] is the standard one-line way to remove duplicates from an array. has is also much faster than includes on a large array, because a Set does not search item by item. Recent versions of JavaScript added set operations such as union and intersection, available in all current browsers.
That completes Pocket’s data toolkit: arrays, objects, Maps and Sets, and the operators for missing values. In section 4, all of it goes onto a real web page.
\n","toc":[{"id":"sec-1","text":"The error you will see most","level":2},{"id":"sec-2","text":"Optional chaining: ?.","level":2},{"id":"sec-3","text":"Defaults with ??","level":2},{"id":"sec-4","text":"Map: lookups with any key","level":2},{"id":"sec-5","text":"Set: each value once","level":2}],"takeaways":["Reading a property ofundefined or null throws a TypeError; ?. stops and returns undefined instead.","?? supplies a default only for null and undefined, so real values like 0 and "" survive, unlike with ||.","Use ?. only where data is genuinely optional; spreading it everywhere hides real bugs.","A Map stores key-value pairs with any type of key, keeps insertion order, and has get, set, has and size.","A Set stores each value at most once, so [...new Set(list)] removes duplicates."],"further":[{"title":"Optional chaining (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining"},{"title":"Nullish coalescing operator (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing"},{"title":"Map (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"},{"title":"Set (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set"}],"quiz":[{"q":"An expense may or may not have a receipt object. Which expression reads the receipt’s url without ever throwing?
expense.receipt.url","why":"When receipt is undefined, reading .url from it throws “Cannot read properties of undefined”."},{"text":"expense?.receipt.url","why":"The ?. protects against expense being missing, but receipt is the optional part here, and .url on it still throws."},{"text":"expense.receipt?.url","why":"Correct. If receipt is null or undefined, the whole expression stops and evaluates to undefined."}],"answer":2},{"q":"A user’s saved tip percentage is 0. What does const tip = saved.tip ?? 15; give?
0","why":"Correct. ?? only falls back for null and undefined, and 0 is neither."},{"text":"15","why":"That is what || would give, because 0 is falsy. Avoiding exactly that is why ?? exists."},{"text":"undefined","why":"The left side has a real value, 0, so ?? returns it."}],"answer":0},{"q":"You need to count how many expenses each category has, and later list categories in the order they first appeared. Which fits best?
","options":[{"text":"An array of category names, usingindexOf to find each one.","why":"Searching an array for every expense gets slow and the counts need a second array kept in sync."},{"text":"A Set of category names.","why":"A Set records that a value exists, but it cannot store a count next to it."},{"text":"A Map from category to count.","why":"Correct. get/set update counts directly, and a Map remembers insertion order when you loop over it."},{"text":"A string with categories joined by commas.","why":"Strings are immutable and must be split and searched every time; they are not built for lookups."}],"answer":2},{"q":"What does new Set(["food", "travel", "food", "fun"]).size return?
4","why":"A Set ignores values it already contains, so the second “food” is not added."},{"text":"3","why":"Correct. The Set holds “food”, “travel” and “fun”, each once."},{"text":"2","why":"Only the duplicate “food” is dropped; “travel” and “fun” each appear once and both stay."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const expenses = [\n { label: \"Coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\", receipt: { url: \"/r/88.png\" } },\n { label: \"Lunch\", amount: 1350, category: \"food\", receipt: null },\n { label: \"Gift\", amount: 5000 },\n];\n\n// The receipt's url, or \"No receipt\" (receipt may be missing or null)\nfunction receiptLabel(expense) {\n return expense.receipt.url;\n}\n\n// settings may be undefined; a saved limit of 0 is a real choice\nfunction dailyLimit(settings) {\n return settings.dailyLimit || 5000;\n}\n\n// A Map from category to how many expenses have it;\n// expenses without a category count as \"other\"\nfunction countByCategory(expenses) {\n}\n\n// Each category once, in the order first seen (missing ones as \"other\")\nfunction uniqueCategories(expenses) {\n return expenses.map((e) => e.category);\n}\n\nconsole.log(receiptLabel(expenses[1]), dailyLimit({ dailyLimit: 0 }));\n"},"solution":{"js":"const expenses = [\n { label: \"Coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\", receipt: { url: \"/r/88.png\" } },\n { label: \"Lunch\", amount: 1350, category: \"food\", receipt: null },\n { label: \"Gift\", amount: 5000 },\n];\n\nfunction receiptLabel(expense) {\n return expense.receipt?.url ?? \"No receipt\";\n}\n\nfunction dailyLimit(settings) {\n return settings?.dailyLimit ?? 5000;\n}\n\nfunction countByCategory(expenses) {\n const counts = new Map();\n for (const e of expenses) {\n const category = e.category ?? \"other\";\n counts.set(category, (counts.get(category) ?? 0) + 1);\n }\n return counts;\n}\n\nfunction uniqueCategories(expenses) {\n return [...new Set(expenses.map((e) => e.category ?? \"other\"))];\n}\n\nconsole.log(receiptLabel(expenses[1]), dailyLimit({ dailyLimit: 0 }));\n"},"checks":[{"id":"receipt","test":"return receiptLabel(expenses[1]) === '/r/88.png' && receiptLabel(expenses[0]) === 'No receipt' && receiptLabel(expenses[2]) === 'No receipt';\n"},{"id":"limit","test":"return dailyLimit({ dailyLimit: 0 }) === 0 && dailyLimit({ dailyLimit: 2500 }) === 2500 && dailyLimit({}) === 5000 && dailyLimit(undefined) === 5000;\n"},{"id":"counts-map","test":"const m = countByCategory(expenses);\nreturn m instanceof Map && m.get('food') === 2 && m.get('travel') === 1 && m.get('other') === 1 && m.size === 3;\n"},{"id":"unique","test":"const u = uniqueCategories(expenses);\nreturn Array.isArray(u) && u.join() === 'food,travel,other';\n"}],"title":"Handle missing data safely","prompt":"Some of Pocket’s data is incomplete. Fill in four functions:
\nreceiptLabel(expense) returns the receipt’s url, or "No receipt" when receipt is missing or null.dailyLimit(settings) returns settings.dailyLimit, or 5000 when there is no limit. settings itself may be undefined, and a saved limit of 0 must be kept.countByCategory(expenses) returns a Map from category to the number of expenses in it. Expenses without a category count as "other".uniqueCategories(expenses) returns an array with each category once, in the order first seen (missing ones as "other").?. right after the part that may be missing, and ?? after that for the fallback: expense.receipt?.url ?? "No receipt".","|| loses the 0. settings?.dailyLimit ?? 5000 keeps it and also survives settings being undefined.","Count with counts.set(category, (counts.get(category) ?? 0) + 1). For unique values, build a Set from the mapped categories and spread it back into an array."],"explanation":"?. stops reading as soon as it meets null or undefined and produces undefined, which ?? then replaces with the fallback. Because ?? only reacts to null and undefined, a limit of 0 passes through untouched, which || would have discarded. The Map counts each category with get and set, and ?? 0 handles a category’s first appearance. new Set(...) drops repeated categories while keeping first-seen order, and spreading it with [...set] turns it back into an array.
receiptLabel returns the url or “No receipt”","limit":"dailyLimit keeps 0, defaults to 5000, and survives missing settings","counts-map":"countByCategory returns a Map of counts, with “other” for missing categories","unique":"uniqueCategories lists each category once, in first-seen order"}},"words":699,"readMinutes":3}