Getters and Setters

Syntax

get propName() { return value; }
set propName(value) { }

Examples

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  get area() {
    return this.width * this.height; // computed, not stored
  }

  set width(value) {
    if (value <= 0) throw new Error("Width must be positive");
    this._width = value;
  }

  get width() {
    return this._width;
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.area); // 50 - accessed like a property, no parentheses
rect.width = 8;
console.log(rect.area); // 80 - automatically recalculated

const user = {
  firstName: "Alice",
  lastName: "Smith",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(value) {
    [this.firstName, this.lastName] = value.split(" ");
  }
};

console.log(user.fullName); // "Alice Smith"
user.fullName = "Bob Jones";
console.log(user.firstName); // "Bob"

Best practices

• Use getters for values that are computed from other properties, rather than storing and manually keeping a duplicate value in sync
• Use setters to validate or transform incoming values before they are stored
• Avoid heavy computation or side effects inside getters - since they look like simple property access, callers do not expect them to be expensive or to change state
• Prefix the underlying storage property with an underscore (like _width) by convention when a getter/setter shares a similar public name

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation