Getter & Setter Accessors

1. Introduction

In Object-Oriented Programming, exposing class properties directly can lead to unintended mutations. JavaScript solves this using Getter & Setter Accessor Methods, allowing you to execute code when reading or writing to a property while presenting it as a standard object property from the outside.

2. Why It Matters

Accessors allow you to implement validation or calculate dynamic properties automatically. For example, you can validate that an email address is formatted correctly before saving it, or calculate a user's full name from separate first and last name fields dynamically.

3. Real-World Analogy

Think of a Thermostat Temperature Controller:

• Direct Access (Touching the furnace directly): If a visitor wants to change the room temperature, they walk to the furnace, turn the knobs, and adjust the pressure. If they make a mistake, they could overheat the building.
• Getter / Setter Accessors (Thermostat interface): You install a thermostat controller on the wall.
  1. When they check the temperature (getter), the thermostat displays the value on the screen.
  2. When they adjust the dial (setter), the thermostat validates the input: "If the setting is below 50 degrees or above 90 degrees, ignore the request (validation guard)". It sits between the user and the system, protecting the hardware.

4. Getters and Setters Syntax

Accessors are defined using the get and set keywords inside the class body. By convention, internal storage properties are prefixed with an underscore (_) or declared as private fields (#) to prevent recursion errors:

5. Architectural Details

• No Parentheses: Accessors are invoked like properties (e.g. user.fullName), not function calls (e.g. user.fullName()).
• Prototype Storage: Accessors are defined on the class's prototype object, making them available to all instances.
• Validation Barriers: Setters act as gatekeepers, validating inputs before writing them to internal fields.

6. Practical Example

This script demonstrates implementing validation inside a setter to restrict values to a specific range:

7. Common Mistakes

• Creating infinite recursion loops inside accessors: Naming your accessor method the exact same name as the internal property it reads or writes to (e.g. this.name = name inside set name(val)) causes the setter to call itself recursively, crashing with a RangeError (Maximum call stack size exceeded). Always use a separate internal storage key (like _name or #name).

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

class UserAccount {
  constructor(name) {
    this.name = name;
  }
get name() {
    return this.name; // Bug: recursive call!
  }
set name(val) {
    this.name = val; // Bug: recursive call stack overflow!
  }
}
const account = new UserAccount('Alice'); // crashes! Why?

class UserAccount {
  #name; // Private storage key

constructor(name) {
    this.name = name; // Calls setter
  }
get name() {
    return this.#name; // Reads from private storage
  }
set name(val) {
    this.#name = val; // Writes to private storage
  }
}

11. Interview Questions

12. Production Considerations

• • Avoid Heavy Operations: Accessors are expected to be fast because they are invoked like standard property lookups. Avoid writing heavy calculations, database queries, or network requests inside getters or setters. If a property requires heavy processing, define it as a standard method instead.