JavaScript JS Tutorial JS Objects JS Functions JS Classes JS Async JS HTML DOM JS Browser BOM JS Web APIs JS AJAX JS JSON JS vs jQuery JS Graphics



Object Accessors

Object accessors are a powerful feature in JavaScript that allow you to define custom behavior when accessing or modifying object properties. They are also known as getters and setters, and they provide a way to control how your objects are accessed and manipulated.

When you define an object property, you can specify a getter and/or a setter function. The getter function is called when the property is accessed, and the setter function is called when the property is modified. This allows you to add custom logic to your object properties, such as validation or computation.

Here is an example of defining a getter and a setter for a property:


let person = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },
  set fullName(name) {
    let parts = name.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(person.fullName); // "John Doe"

person.fullName = "Jane Smith";
console.log(person.firstName); // "Jane"
console.log(person.lastName); // "Smith"

In this example, we define a person object with a firstName and lastName property, as well as a fullName getter and setter. The getter returns the concatenation of the firstName and lastName properties, while the setter splits the input string into first and last name parts and assigns them to the corresponding properties.

Object accessors can also be used to create virtual properties, which are not backed by a real property but are computed on the fly. Here is an example:


let circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  },
  get circumference() {
    return this.diameter * Math.PI;
  },
  get area() {
    return this.radius * this.radius * Math.PI;
  }
};

console.log(circle.diameter); // 10
console.log(circle.circumference); // 31.41592653589793
console.log(circle.area); // 78.53981633974483

In this example, we define a circle object with a radius property and three virtual properties: diameter, circumference, and area. The diameter property is computed based on the radius property, while the circumference and area properties are computed based on the diameter property.

Object accessors can also be used to hide or protect object properties. By defining a getter but not a setter, you can make a property read-only:


let person = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName); // "John Doe"

person.fullName = "Jane Smith";
console.log(person.fullName); // "John Doe"

In this example, we define a person object with a firstName and lastName property, as well as a fullName getter. Since we did not define a setter for the fullName property, it is read-only and cannot be modified.

Object accessors are a powerful feature in JavaScript that allow you to define custom behavior when accessing or modifying object properties. They provide a way to control how your objects are accessed and manipulated, and can be used to create virtual properties, hide or protect object properties, and add custom logic to your object properties.

References

Activity