Until now an expense in Pocket was just a number. A real expense has several facts that belong together: what it was, how much, which category, when. Keeping those in separate arrays (labels[2], amounts[2], categories[2]) works until one array gets sorted and the others do not. You need one value that holds them all: an object.
An object is written with curly braces and contains properties, each a name and a value:
\nconst expense = {\n id: \"exp-1\",\n label: \"Coffee\",\n amount: 450,\n category: \"food\",\n};\n\nconsole.log(expense.label); // dot notation\nconsole.log(expense[\"amount\"]); // bracket notation\nconsole.log(expense.note); // missing property: undefinedDot notation is the everyday way to read a property. Brackets do the same job, but evaluate whatever is inside them, which you need when the property name is in a variable: const field = "category"; expense[field]. Reading a property that does not exist gives undefined, not an error.
You can add, change and remove properties after creation:
\nconst expense = { label: \"Coffee\", amount: 450 };\nexpense.category = \"food\"; // add\nexpense.amount = 500; // change\ndelete expense.category; // remove\nconsole.log(expense);\nconsole.log(Object.keys(expense), Object.values(expense));When a variable already has the name you want for a property, you can write it once. { label, amount } is shorthand for { label: label, amount: amount }, and you will see it constantly in real code:
const label = \"Bus\";\nconst amount = 270;\nconst expense = { label, amount, category: \"travel\" };\nconsole.log(expense);Object.keys and Object.values give you arrays of the names and the values, and Object.entries gives pairs, so for (const [key, value] of Object.entries(expense)) loops over every property.
Pocket’s data is now an array of objects, the most common shape of data in JavaScript, and everything from the last lesson still applies:
\nconst expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450, category: \"food\" },\n { id: \"exp-2\", label: \"Train\", amount: 1220, category: \"travel\" },\n { id: \"exp-3\", label: \"Lunch\", amount: 1350, category: \"food\" },\n];\nconst food = expenses.filter((e) => e.category === \"food\");\nconsole.log(food.map((e) => e.label));Here is the most important thing to understand about objects and arrays. A variable does not hold the object; it holds a reference to it, like an address. Copying the variable copies the address:
\nconst original = { label: \"Coffee\", amount: 450 };\nconst alias = original;\nalias.amount = 999;\nconsole.log(original.amount); // 999\nconsole.log(alias === original); // true: the same object\nconsole.log({ a: 1 } === { a: 1 }); // false: two different objects=== on objects compares references, not contents. Two objects that look identical are still two different objects.
This matters because functions receive references too. If a function changes an object it was given, the caller’s object changes:
\nfunction applyDiscount(expense) {\n expense.amount = Math.round(expense.amount * 0.9);\n return expense;\n}\n\nconst lunch = { label: \"Lunch\", amount: 1350 };\nconst discounted = applyDiscount(lunch);\nconsole.log(discounted.amount, lunch.amount); // both 1215The function looks as if it returns a discounted version, but it quietly rewrote the original as well. Somewhere else, a total that included lunch is now wrong, and nothing on screen says why. That is how bugs like “I only displayed the expenses, why did their amounts change?” happen. The fix is to build a new object instead of changing the one you were given, and spread makes that easy.
Spread syntax, three dots, copies all the properties of an object (or items of an array) into a new one:
\nconst expense = { id: \"exp-1\", label: \"Coffee\", amount: 450 };\nconst updated = { ...expense, amount: 500 };\nconsole.log(expense.amount, updated.amount);\n\nconst list = [expense];\nconst longer = [...list, { id: \"exp-2\", label: \"Bus\", amount: 270 }];\nconsole.log(list.length, longer.length);In { ...expense, amount: 500 }, properties are copied in order and the later amount overwrites the copied one. You get a new object, and the original is untouched. Combined with map, this is the standard way to change one item in a list without mutating anything:
const expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450 },\n { id: \"exp-2\", label: \"Bus\", amount: 270 },\n];\nconst fixed = expenses.map((e) => (e.id === \"exp-2\" ? { ...e, amount: 300 } : e));\nconsole.log(fixed[1].amount, expenses[1].amount);Destructuring pulls properties out of an object into variables of the same name:
\nconst expense = { label: \"Train\", amount: 1220, category: \"travel\" };\nconst { label, amount, note = \"no note\" } = expense;\nconsole.log(label, amount, note);\n\nconst [first, second] = [\"food\", \"travel\", \"fun\"];\nconsole.log(first, second);The = "no note" is a default, used when the property is missing or undefined. For arrays, destructuring goes by position instead of name.
Destructuring is most useful in function parameters, where it documents exactly which properties a function needs:
\nfunction describe({ label, amount, category = \"other\" }) {\n return `${label}: $${(amount / 100).toFixed(2)} (${category})`;\n}\nconsole.log(describe({ label: \"Train\", amount: 1220 }));Compare it with the version without destructuring, which repeats expense. on every line and hides which properties matter until you read the whole body. With destructuring, the first line of the function is its contract: give me something with a label, an amount, and optionally a category. Callers can pass a full expense object with ten other properties; the function simply ignores the rest.
The ... also works in reverse, as rest: const { id, ...details } = expense puts id in its own variable and every other property in a new object called details. It is a neat way to drop a property without mutating the original: everything you did not name ends up in the new object.
Pocket now has realistic data. Next you summarise it: totals per category, and lists sorted by amount.
\n","toc":[{"id":"sec-1","text":"Objects: named values together","level":2},{"id":"sec-2","text":"References: two names, one object","level":2},{"id":"sec-3","text":"Spread: copy and update without mutating","level":2},{"id":"sec-4","text":"Destructuring: unpacking into variables","level":2}],"takeaways":["An object groups named values (properties); read them with dot notation, or with brackets when the property name is in a variable.","Objects and arrays are shared by reference, so two names can point at the same object and a change through one is visible through the other.","Spread ({ ...expense, amount: 500 }, [...list, item]) makes a new, shallow copy, which is how you update data without mutating it.","Destructuring (const { label, amount } = expense) pulls properties into variables, and works in function parameters with defaults."],"further":[{"title":"Working with objects (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects"},{"title":"Destructuring (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring"},{"title":"Spread syntax (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax"}],"quiz":[{"q":"What does this log?
\nconst a = { label: \"Coffee\", amount: 450 };\nconst b = a;\nb.amount = 500;\nconsole.log(a.amount);500, because a and b point at the same object.","why":"Correct. There is only one object. Changing it through b is visible through a."},{"text":"450, because b is a copy of a.","why":"Assigning an object to another name copies the reference, not the object. Both names point at the same object."},{"text":"A TypeError, because a is a const.","why":"const stops a from being re-pointed. Changing a property of the object it points at is allowed."}],"answer":0},{"q":"const updated = { ...expense, amount: 500 }; What is true afterwards?
expense.amount is now 500.","why":"Spread builds a brand-new object. The original is not touched."},{"text":"updated is the same object as expense.","why":"{ ... } always creates a new object, so updated === expense is false."},{"text":"updated has every property of expense, with amount replaced by 500.","why":"Correct. Properties are copied in order, and a later amount overwrites the copied one."}],"answer":2},{"q":"Given const expense = { label: "Bus", amount: 270 };, what does const { label, category = "other" } = expense; give you?
label is “Bus” and category is “other”.","why":"Correct. label is copied from the object, and category does not exist on it, so the default is used."},{"text":"label is “Bus” and category is undefined.","why":"That would be true without the default. = "other" applies when the property is missing."},{"text":"It throws, because category is not a property of expense.","why":"Destructuring a missing property never throws; it gives undefined, or the default if you supplied one."}],"answer":0},{"q":"You have const key = "category";. How do you read expense.category using key?
expense.key","why":"Dot notation uses the literal name after the dot, so this looks for a property called “key”."},{"text":"expense[key]","why":"Correct. Brackets evaluate the expression inside, so expense[key] reads the property named by the value of key."},{"text":"expense["key"]","why":"The quotes make it the literal string “key”, the same as expense.key."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450, category: \"food\" },\n { id: \"exp-2\", label: \"Train\", amount: 1220, category: \"travel\" },\n];\n\n// Return a NEW array with the expense added at the end\nfunction addExpense(list, expense) {\n list.push(expense);\n return list;\n}\n\n// Return a NEW array where the expense with this id has the new amount\nfunction updateAmount(list, id, amount) {\n const found = list.find((e) => e.id === id);\n found.amount = amount;\n return list;\n}\n\n// \"Train: $12.20 (travel)\"; category defaults to \"other\"\nfunction describe(expense) {\n return expense.label;\n}\n\nconsole.log(describe(expenses[1]));\n"},"solution":{"js":"const expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450, category: \"food\" },\n { id: \"exp-2\", label: \"Train\", amount: 1220, category: \"travel\" },\n];\n\nfunction addExpense(list, expense) {\n return [...list, expense];\n}\n\nfunction updateAmount(list, id, amount) {\n return list.map((e) => (e.id === id ? { ...e, amount } : e));\n}\n\nfunction describe({ label, amount, category = \"other\" }) {\n return `${label}: $${(amount / 100).toFixed(2)} (${category})`;\n}\n\nconsole.log(describe(expenses[1]));\n"},"checks":[{"id":"add","test":"const list = [{ id: 'a', label: 'A', amount: 1 }];\nconst item = { id: 'b', label: 'B', amount: 2 };\nconst out = addExpense(list, item);\nreturn Array.isArray(out) && out.length === 2 && out[1] === item && out[0] === list[0];\n"},{"id":"add-pure","test":"const list = [{ id: 'a', label: 'A', amount: 1 }];\nconst out = addExpense(list, { id: 'b', label: 'B', amount: 2 });\nreturn list.length === 1 && out !== list;\n"},{"id":"update","test":"const list = [{ id: 'a', label: 'A', amount: 1 }, { id: 'b', label: 'B', amount: 2 }];\nconst out = updateAmount(list, 'b', 300);\nreturn Array.isArray(out) && out.length === 2 && out[1].amount === 300 && out[1].label === 'B' && out[1].id === 'b' && out[0].amount === 1;\n"},{"id":"update-pure","test":"const list = [{ id: 'a', label: 'A', amount: 1 }, { id: 'b', label: 'B', amount: 2 }];\nconst out = updateAmount(list, 'b', 300);\nreturn list[1].amount === 2 && out !== list && out[1] !== list[1];\n"},{"id":"describe","test":"return describe({ label: 'Train', amount: 1220, category: 'travel' }) === 'Train: $12.20 (travel)' && describe({ label: 'Gift', amount: 5000 }) === 'Gift: $50.00 (other)';\n"}],"title":"Update expenses without mutating them","prompt":"The starter’s functions change the arrays and objects they are given, so the caller’s data changes behind its back. Rewrite them to return new values instead:
\naddExpense(list, expense) returns a new array with expense at the end.updateAmount(list, id, amount) returns a new array in which the expense with that id is a new object with the new amount. Other expenses stay as they are, and nothing in list changes.describe(expense) returns a string like "Train: $12.20 (travel)", using "other" when there is no category. Destructure the parameter.[...list, expense].","For the update, map over the list and return either { ...e, amount } or e unchanged, depending on whether e.id === id.","Destructure with a default in the parameter list: function describe({ label, amount, category = "other" })."],"explanation":"[...list, expense] copies the references of the existing items into a new array and adds one more, so the caller’s array keeps its length. In updateAmount, map already builds a new array; for the matching item you return { ...e, amount }, a new object with every property of e and the new amount (the shorthand amount means amount: amount). Unchanged items are returned as they are, which is safe because nothing modifies them. In describe, destructuring in the parameter list documents the three properties the function needs, and the default covers expenses without a category.
addExpense returns the list with the new expense at the end","add-pure":"addExpense leaves the original array unchanged","update":"updateAmount changes the amount of the matching expense","update-pure":"updateAmount leaves the original array and objects unchanged","describe":"describe formats the expense, defaulting the category to “other”"}},"words":718,"readMinutes":3}