Getters & setters

Properties that run code

In the Property flags & descriptors lesson, a property held a stored value. It also had flags, like writable. We call this kind a data property.

JavaScript has a second kind, the accessor property. From the outside, it looks like any other property. But when you read it or write to it, JavaScript runs a function.

You saw getters and setters in classes in the Class basics lesson. This lesson goes further. You will learn:

• how to write them in plain objects, not just in classes
• what their descriptors look like
• how a setter can check a new value before it keeps it
• how a getter can work out a value once and save it
• how to keep an old property name working after you rename it

A getter or setter belongs to one property. A later lesson covers Proxy, a tool that can watch every property of an object at once.

Inside an object, write get name() for the function that runs on a read. Write set name(value) for the function that runs on a write. The value parameter gets the new value.

Code outside the object never calls them with brackets. It uses normal property code:

• Reading: user.fullName
• Writing: user.fullName = "Grace Hopper"

Step through the code below and watch which function runs.

1const user = {Run2  firstName: "Ada",3  lastName: "Lovelace",4  get fullName() {5    return this.firstName + " " + this.lastName;6  },7  set fullName(value) {8    const parts = value.split(" ");9    this.firstName = parts[0];10    this.lastName = parts[1];11  }12};13 14console.log(user.fullName);15user.fullName = "Grace Hopper";16console.log(user.firstName);17console.log(user.fullName);

Line 14 reads user.fullName. That runs the getter on lines 4 to 6. It joins firstName and lastName and prints Ada Lovelace.

Line 15 writes to user.fullName. That runs the setter on lines 7 to 11. It splits "Grace Hopper" at the space and stores the two parts in firstName and lastName.

So firstName and lastName are data properties. They hold the real text. fullName is the accessor property. It stores nothing itself. Line 17 reads it again, and the getter builds Grace Hopper from the new data.

A class can have getters and setters too. Here the real name is kept in a private field, #name. A private field is a property that only code inside the class can use.

class User {
  #name;
  constructor(name) {
    this.#name = name;
  }
  get name() {
    return this.#name;
  }
  set name(value) {
    this.#name = value.trim();
  }
}

const user = new User("Asha");
user.name = " Ben ";
console.log(user.name);
console.log("#name" in user);

The getter and setter for name look the same as in an object. JavaScript puts them on the class's prototype, the shared object every User uses. Line 15 runs the setter, which trims the spaces, so line 16 prints Ben.

Line 17 prints false. #name is not a normal property, so code outside the class can't see it or reach it, not even with user["#name"].

A descriptor is a plain object that describes one property. You get it with Object.getOwnPropertyDescriptor. The descriptor shows which kind of property you have:

• A data property has value and writable.
• An accessor property has get, set, or both.
• Both kinds have enumerable and configurable.

Read the table one row at a time. Each row asks a question and answers it for both kinds of property.

1const account = {2  firstName: "Ada",3  lastName: "Lovelace",4  get fullName() {5    return this.firstName + " " + this.lastName;6  }7};8 9const descriptor = Object.getOwnPropertyDescriptor(account, "fullName");10console.log(typeof descriptor.get);11console.log("value" in descriptor);12console.log("writable" in descriptor);13 14Object.defineProperty(account, "initials", {15  get() {16    return this.firstName[0] + this.lastName[0];17  },18  enumerable: true,19  configurable: true20});21console.log(account.initials);

Line 9 gets the descriptor of fullName. Line 10 prints function, because the descriptor has a get function. Lines 11 and 12 print false: there is no value and no writable.

Lines 14 to 20 add a new getter, initials, with Object.defineProperty. Its descriptor has a get function and two flags. Line 21 prints AL. One descriptor can't have both get and value. Pick one kind.

const user = {
  first: "Ada",
  last: "Lovelace",
  get fullName() {
    return this.first + " " + this.last;
  }
};

class Profile {
  constructor(name) {
    this.name = name;
  }
  get greeting() {
    return "Hello " + this.name;
  }
}

console.log(JSON.stringify(user));
console.log(JSON.stringify(new Profile("Asha")));

JSON.stringify turns an object into JSON text. It only includes properties that are both:

• own: on the object itself, not on its prototype
• enumerable: allowed to show up in lists

The getter in user is on the object itself, so line 18 runs it and includes "fullName":"Ada Lovelace". The class getter greeting is on the prototype, so line 19 leaves it out. Reading profile.greeting by name still works.

One more rule for Object.defineProperty: any flag you leave out is false. So a getter defined without enumerable: true still works when you read it. But it won't show up in Object.keys or in JSON. Set the flags you want on purpose.

Getters and setters each have one main job:

• A getter can give a computed value: one worked out from other values, like fullName from two names.
• A setter can validate a new value: check it before storing it. The code still looks like a plain assignment.

1const profile = {2  firstName: "Ada",3  lastName: "Lovelace",4  _celsius: 20,5  get fullName() {6    return this.firstName + " " + this.lastName;7  },8  set celsius(value) {9    if (value < -273.15) {10      throw new RangeError("Temperature cannot go below absolute zero.");11    }12    this._celsius = value;13  },14  get fahrenheit() {15    return this._celsius * 9 / 5 + 32;16  }17};

Try -500 in the Celsius box. Nothing can be colder than -273.15°C, so the setter refuses it. It throws a RangeError, an error for a value that is out of range, and stores nothing. Now change a name. The fullName getter shows the new name at once, because it reads the current names every time.

A getter runs on every read. It does not remember its last answer. Step through the code below and count how many times it runs.

1const meter = {Run2  calls: 0,3  _celsius: 20,4  get fahrenheit() {5    this.calls += 1;6    return this._celsius * 9 / 5 + 32;7  },8  set fahrenheit(value) {9    this._celsius = (value - 32) * 5 / 9;10  }11};12 13console.log(meter.fahrenheit);14console.log(meter.fahrenheit);15meter.fahrenheit = 68;16console.log(meter._celsius);17console.log(meter.calls);

Lines 13 and 14 read meter.fahrenheit twice, so the getter runs twice and calls becomes 2. Line 15 writes to the same name, so the setter runs instead. It turns 68°F into 20°C and stores it in _celsius.

A property can have a getter but no setter. Then assignment has nowhere to go. What happens depends on the mode:

• Sloppy mode, the normal rules when strict mode is off: JavaScript quietly ignores the assignment.
• Strict mode, the stricter rules turned on by "use strict": JavaScript throws a TypeError.

The code below shows both, as two separate programs.

1const settings = {2  get mode() {3    return "read-only";4  }5};6settings.mode = "edit";7console.log(settings.mode);8 9"use strict";10const settings = {11  get mode() {12    return "read-only";13  }14};15settings.mode = "edit";

In the first program, line 6 is ignored, so line 7 still prints read-only. In the second program, line 15 does the same thing in strict mode and throws a TypeError.

A common mistake is a setter that calls itself. Look at line 3 below. Inside set name(value), it runs this.name = value. That is a write to name, so it runs set name again. That run writes to name again, and so on.

1const person = {2  set name(value) {3    this.name = value;4  }5};6person.name = "Ada";

A function that calls itself is called recursion. Here it never stops on its own. Each call waits on the call stack, the list of functions that are still running. The list gets too long, and JavaScript stops with a RangeError.

The fix: store the value in a different property, like _name, or in a private field like #name.

A getter can also work out a value only once. This is called a lazy getter. On the first read, it works out the value. Then it uses Object.defineProperty to put a plain data property with that value in its own place. Later reads just return the stored value. The getter is gone, so it never runs again.

1const report = {Run2  title: "Weekly",3  get summary() {4    const value = this.title + " report";5    Object.defineProperty(this, "summary", {6      value,7      enumerable: true,8      configurable: true9    });10    return value;11  }12};13 14console.log(report.summary);15console.log(report.summary);16console.log(Object.getOwnPropertyDescriptor(report, "summary").value);

Line 4 builds "Weekly report". Lines 5 to 9 replace the getter with a data property that holds that text. Line 10 returns it for this first read. On line 15, the read gets the stored value, and the getter doesn't run.

Sometimes you rename a property that other code already uses. Say oldName becomes newName. Old code still uses oldName. A getter and setter called oldName can keep that code working. This is called a wrapper. It does two things:

• It prints a warning that oldName is out of date.
• It passes each read and write on to newName.

1const user = {2  newName: "Ada Lovelace",3  get oldName() {4    console.warn("oldName is deprecated; use newName");5    return this.newName;6  },7  set oldName(value) {8    console.warn("oldName is deprecated; use newName");9    this.newName = value;10  }11};12 13console.log(user.oldName);14user.oldName = "Grace Hopper";15console.log(user.newName);

Line 13 reads oldName. The getter warns, then returns newName. Line 14 writes to oldName. The setter warns, then stores "Grace Hopper" in newName. Line 15 prints Grace Hopper.

Use a wrapper only for a while. Tell people about the new name, warn them when they use the old one, and remove the wrapper once nobody uses oldName.

const account = {
  _email: "",
  set email(value) {
    this._email = value.trim().toLowerCase();
  },
  get email() {
    return this._email;
  }
};

account.email = " Asha@Example.COM ";
console.log(account.email);

The email setter removes the spaces at both ends with trim(). It makes every letter small with toLowerCase(). Then it stores the result in _email. So line 12 prints asha@example.com, and every email in the object has the same form.

The underscore in _email is only a habit that tells readers "don't use this directly". It doesn't hide anything. In a class, use a private field like #email when the value must stay hidden.

Where you'll use getters and setters

Use a getter or setter when a property name is the right shape, but you need a little code behind it:

• A display name, like user.fullName, built from two fields.
• One value shown in two units, like Celsius and Fahrenheit.
• A check when a value is assigned, like a range or an email format.
• An old property name that still works after a rename.
• A value that is slow to work out, so a lazy getter works it out once.
• A setter on a prototype. Assigning to an object can run a setter found on its prototype (see the Prototype chain lesson).

A profile form is a good place for a setter. account.email = input.value can clean up the email once, so every later part of the code gets the same form. A shopping cart can have a cart.total getter if adding up the items is quick. If the total needs tax from a server, use a method instead. Don't hide a network request behind a property read.

Check where a getter lives before you send an object as JSON. A getter on the object itself can show up in Object.keys and JSON.stringify. A class getter on the prototype usually won't. A property you can read is not always a property that gets sent, so test the JSON text.

Common misconceptions

• "A getter stores its result." No. It runs on every read, unless you save the result yourself, like a lazy getter does.
• "A setter stores the value under its own name." No. A setter just gets the new value. It stores it wherever its code says, like _celsius.
• "Properties that start with an underscore are private." No. _name is only a habit. Any code can still read and change it.
• "Writing to a getter-only property always throws." Only in strict mode. In sloppy mode, JavaScript ignores the write.
• "Getters and setters are the same as a Proxy." No. A Proxy watches a whole object. A getter or setter belongs to one property.
• "A getter is fine for any work." No. Slow or hidden work in a getter surprises people. Use a method for work they should know about.

Key takeaways

• Reading an accessor property runs its getter. Writing to it runs its setter.
• A getter's descriptor has get and set, not value and writable.
• A setter should check the value first, then store it in a different property, like _name. Writing to its own name makes it call itself.
• Keep getters quick, with no surprises. Use a method for work people should notice.
• A lazy getter works out a value once. A wrapper keeps an old name working for a while.

An accessor property is a property that runs a function when you read it, write to it, or both.

Up next: Freezing, sealing & immutability.