{"id":"l-js-5-2","courseId":"javascript-fundamentals","lang":"en","kind":"lesson","summary":"Define classes with a constructor, methods, getters and private fields, create independent instances with new, and avoid the classic lost-this bug when passing methods as callbacks.","html":"

Look at what Pocket’s code does with its expenses: a variable holds the array, and a dozen functions each take that array, do something, and return a result. The data and the operations on it are separate, so nothing stops a stray line of code from pushing a malformed expense straight into the array. A class bundles data with the functions allowed to work on it, and can make the data itself unreachable from outside.

\n

Defining a class

\n
JavaScript
class ExpenseStore {\n  #expenses = [];\n  #nextNumber = 1;\n\n  constructor(initial = []) {\n    for (const expense of initial) {\n      this.add(expense);\n    }\n  }\n\n  add({ label, amount, category = \"other\" }) {\n    const expense = { id: `exp-${this.#nextNumber++}`, label, amount, category };\n    this.#expenses.push(expense);\n    return expense;\n  }\n\n  remove(id) {\n    this.#expenses = this.#expenses.filter((e) => e.id !== id);\n  }\n\n  get total() {\n    return this.#expenses.reduce((sum, e) => sum + e.amount, 0);\n  }\n\n  list() {\n    return [...this.#expenses];\n  }\n}\n\nconst store = new ExpenseStore([{ label: \"Coffee\", amount: 450, category: \"food\" }]);\nstore.add({ label: \"Train\", amount: 1220, category: \"travel\" });\nconsole.log(store.total, store.list().map((e) => e.id));
\n

There is a lot here, so take it one piece at a time.

\n

#expenses = [] declares a private field. Every instance gets its own #expenses, and the # makes it private: only code inside the class body can read or write it. Outside, store.#expenses is a syntax error. Anyone who wants to change the list has to go through add and remove, which guarantee every expense gets an id and a category.

\n

constructor is a special method that runs when you write new ExpenseStore(...). Its job is to set the new object up. Here it adds any initial expenses through add, so they follow the same rules.

\n

add, remove and list are methods. Inside a method, this refers to the object the method was called on: in store.add(...), this is store.

\n

get total() is a getter. You read it like a property, store.total, without parentheses, but it runs code each time. A total stored in a field could go stale when an expense is removed; a getter is always computed from the current data.

\n

list() returns a copy, [...this.#expenses], not the array itself. Returning the real array would let callers push into it and undo all the protection.

\n

Instances: one blueprint, many objects

\n

new creates a fresh object, runs the constructor with this pointing at it, and returns it. Each instance has its own fields; the methods are defined once on the class and shared.

\n
\n The ExpenseStore class defines the methods add, remove, list and the total getter. Two instances, home and work, each have their own private expenses array, and both use the shared methods.\n \n class ExpenseStore\n add, remove, list\n get total\n \n home\n #expenses: 12 items\n \n work\n #expenses: 3 items\n \n \n new ExpenseStore()\n
One class, many instances with their own data
\n
JavaScript
class ExpenseStore {\n  #expenses = [];\n  add(expense) { this.#expenses.push(expense); }\n  get count() { return this.#expenses.length; }\n}\n\nconst home = new ExpenseStore();\nconst work = new ExpenseStore();\nhome.add({ label: \"Groceries\", amount: 6400 });\nconsole.log(home.count, work.count);
\n

If this reminds you of createBudget from the closures lesson, it should. A closure and a class with private fields solve the same problem, data that only certain functions can touch. Closures are lighter for a single function; classes are clearer when several operations share the same data.

\n

The lost this

\n

this is not fixed when you write a method. It is decided each time the function is called, by what is to the left of the dot. store.add(x) calls add with this set to store. But if you pass the method somewhere on its own, there is no dot when it is eventually called:

\n
JavaScript
class Greeter {\n  name = \"Pocket\";\n  hello() {\n    return `Hello from ${this.name}`;\n  }\n}\n\nconst g = new Greeter();\nconsole.log(g.hello());\n\nconst detached = g.hello;\ntry {\n  console.log(detached());\n} catch (error) {\n  console.log(\"Error:\", error.message);\n}\n\nconst wrapped = () => g.hello();\nconsole.log(wrapped());
\n

The first call works because g is to the left of the dot. detached() is called with nothing to the left of a dot, so inside it this is undefined (class bodies always run in strict mode), and reading this.name throws.

\n\n

Classes can also build on other classes with extends, inheriting their methods and adding new ones. You will use that once, in the next lesson, to make your own error type. Beyond that, a good default for application code is to prefer small classes and plain functions over deep inheritance chains, which tend to be hard to change.

\n\n

Your store now refuses bad changes from outside. The next lesson is about what happens when something goes wrong anyway: errors, how to throw and catch them on purpose, and how to hunt down bugs with the browser DevTools.

\n","toc":[{"id":"sec-1","text":"Defining a class","level":2},{"id":"sec-2","text":"Instances: one blueprint, many objects","level":2},{"id":"sec-3","text":"The lost this","level":2}],"takeaways":["A class is a blueprint; new ClassName(...) runs the constructor and returns a new instance with its own data.","Methods are shared by all instances, and inside them this is the instance the method was called on.","Private fields (#expenses) can only be read inside the class body, which protects an object’s data the way closures do.","A getter (get total()) is read like a property but computed each time, so derived values never go stale.","Passing store.add as a callback loses this; wrap it in an arrow function, (e) => store.add(e)."],"further":[{"title":"Classes (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes"},{"title":"Private elements (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_elements"},{"title":"this (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"}],"quiz":[{"q":"

What does this log?

\n
JavaScript
class Counter {\n  count = 0;\n  increment() { this.count++; }\n}\nconst a = new Counter();\nconst b = new Counter();\na.increment();\na.increment();\nconsole.log(a.count, b.count);
\n","options":[{"text":"2 2","why":"Fields are created per instance, so b has its own count that nobody incremented."},{"text":"1 1","why":"increment was called twice on a, and never on b."},{"text":"0 0","why":"this.count++ changes the instance it is called on, so a.count goes up."},{"text":"2 0","why":"Correct. Each new Counter() creates a separate object with its own count; the method is shared, the data is not."}],"answer":3},{"q":"

button.addEventListener("click", store.clear); makes clear throw a TypeError about the private field #expenses (“…from an object whose class did not declare it”) when the button is clicked. Why?

","options":[{"text":"Class methods cannot be used as event listeners.","why":"They can be, as long as they are called with the right this. The problem is how the method is passed."},{"text":"The method was passed on its own, so when the browser calls it, this is not store.","why":"Correct. this is decided by how a function is called, and the browser calls a listener with this set to the element, here the button. Write () => store.clear() so it is called on store."},{"text":"store was created with const and cannot be changed.","why":"const does not stop an object’s methods from changing its fields. The issue is the lost this."}],"answer":1},{"q":"

An ExpenseStore keeps its list in #expenses. What does store.#expenses written outside the class do?

","options":[{"text":"It is a syntax error; private fields can only be accessed inside the class body.","why":"Correct. The engine enforces privacy, so outside code has to use the public methods."},{"text":"It returns the array, because # is only a naming convention.","why":"The older _expenses convention was only a hint. # is real privacy enforced by the language."},{"text":"It returns undefined.","why":"It does not run at all. Using #expenses outside the class is rejected when the code is parsed."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Pocket's data, unprotected: any code can push anything into it.\nclass ExpenseStore {\n constructor() {\n this.expenses = [];\n }\n\n add(expense) {\n this.expenses.push(expense);\n }\n}\n\nconst store = new ExpenseStore();\nstore.add({ label: \"Coffee\", amount: 450, category: \"food\" });\nconsole.log(store.expenses);\n"},"solution":{"js":"class ExpenseStore {\n #expenses = [];\n #nextNumber = 1;\n\n add({ label, amount, category = \"other\" }) {\n const expense = { id: `exp-${this.#nextNumber++}`, label, amount, category };\n this.#expenses.push(expense);\n return expense;\n }\n\n remove(id) {\n this.#expenses = this.#expenses.filter((e) => e.id !== id);\n }\n\n list() {\n return [...this.#expenses];\n }\n\n get total() {\n return this.#expenses.reduce((sum, e) => sum + e.amount, 0);\n }\n\n totalFor(category) {\n return this.#expenses\n .filter((e) => e.category === category)\n .reduce((sum, e) => sum + e.amount, 0);\n }\n}\n\nconst store = new ExpenseStore();\nstore.add({ label: \"Coffee\", amount: 450, category: \"food\" });\nconsole.log(store.list(), store.total);\n"},"checks":[{"id":"add-returns","test":"const s = new ExpenseStore();\nconst a = s.add({ label: 'Coffee', amount: 450, category: 'food' });\nconst b = s.add({ label: 'Gift', amount: 5000 });\nreturn a && a.id === 'exp-1' && b.id === 'exp-2' && b.category === 'other' && a.label === 'Coffee' && a.amount === 450;\n"},{"id":"list-copy","test":"const s = new ExpenseStore();\ns.add({ label: 'Coffee', amount: 450, category: 'food' });\nconst l = s.list();\nl.push({ id: 'hack', label: 'x', amount: 1 });\nreturn Array.isArray(l) && s.list().length === 1;\n"},{"id":"private","test":"const s = new ExpenseStore();\ns.add({ label: 'Coffee', amount: 450, category: 'food' });\nreturn Object.keys(s).length === 0 && !Object.values(s).some(Array.isArray);\n"},{"id":"remove","test":"const s = new ExpenseStore();\ns.add({ label: 'A', amount: 1, category: 'x' });\nconst b = s.add({ label: 'B', amount: 2, category: 'x' });\ns.remove('exp-1');\nconst l = s.list();\nreturn l.length === 1 && l[0].id === b.id;\n"},{"id":"total-getter","test":"const s = new ExpenseStore();\ns.add({ label: 'A', amount: 450, category: 'food' });\ns.add({ label: 'B', amount: 1220, category: 'travel' });\nconst d = Object.getOwnPropertyDescriptor(ExpenseStore.prototype, 'total');\nconst before = s.total;\ns.remove('exp-1');\nreturn !!d && typeof d.get === 'function' && before === 1670 && s.total === 1220;\n"},{"id":"total-for","test":"const s = new ExpenseStore();\ns.add({ label: 'A', amount: 450, category: 'food' });\ns.add({ label: 'B', amount: 1220, category: 'travel' });\ns.add({ label: 'C', amount: 1350, category: 'food' });\nreturn s.totalFor('food') === 1800 && s.totalFor('fun') === 0;\n"},{"id":"independent","test":"const a = new ExpenseStore();\nconst b = new ExpenseStore();\na.add({ label: 'A', amount: 1 });\na.add({ label: 'B', amount: 2 });\nconst first = b.add({ label: 'C', amount: 3 });\nreturn b.list().length === 1 && first.id === 'exp-1' && a.total === 3;\n"}],"title":"A store that protects its data","prompt":"

Rewrite ExpenseStore so its data can only change through its methods:

\n\n","hints":["Declare fields at the top of the class body: #expenses = []; and #nextNumber = 1;. Inside methods, use this.#expenses.","Build the id with `exp-${this.#nextNumber++}`, and destructure the parameter with a default: add({ label, amount, category = "other" }).","get total() { return this.#expenses.reduce((sum, e) => sum + e.amount, 0); }. list() returns [...this.#expenses]."],"explanation":"

The private fields mean the only way to change the list is through add and remove, so every expense is guaranteed an id and a category, and outside code cannot slip a half-formed object in. Each new ExpenseStore() gets its own #expenses and #nextNumber, which is why two stores count ids independently. list() returns a copy, because handing out the real array would let callers mutate it and bypass the rules. total is a getter computed from the current data each time it is read, so it can never disagree with the list, even after a removal.

\n","checkLabels":{"add-returns":"add returns the new expense with an id and a default category","list-copy":"list returns a copy, so changing it does not change the store","private":"The store has no public data properties","remove":"remove deletes the expense with that id","total-getter":"total is a getter that stays up to date","total-for":"totalFor sums one category","independent":"Two stores keep separate data and id counters"}},"words":681,"readMinutes":3}