Skip to main content

Property Getters & Setters

Object Properties Configuration: Property Getters & Setters

Can you explain what getters and setters are as it pertains to JavaScript?​

View Answer:
Interview Response: Accessor properties are represented by "getter" and "setter" methods. In an object literal, they are denoted by get and set in JavaScript. Getters and setters allow you to define Object Accessors (Computed Properties). There are some advantages. Getters and Setters are easier to read because of their simplistic syntax. They also allow similar syntax for properties and methods, can secure better data quality, and are particularly useful for doing things behind the scenes.

Code Example:

let obj = {
  get propName() {
    // getter, the code executed on getting obj.propName
  },

  set propName(value) {
    // setter, the code executed on setting obj.propName = value
  },
};

What is the difference between an accessor property and a property function?​

View Answer:
Interview Response: The main difference between a property function and an accessor property is the simple syntax of the accessor and the way you invoke the accessor.

Technical Response: The primary difference between a property function and an accessor property is the simple syntax of the accessor and the way you invoke the accessor. The accessor (getter setter) gets invoked without the parentheses compared to the property function. There are some advantages, Getters and Setters are easier to read. They also allow similar syntax for properties and methods, can secure better data quality, and are extremely useful in doing things behind the scenes.

Code Example:

// Function Property
let person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function () {
    // <--
    return this.firstName + ' ' + this.lastName;
  },
};

// Display data from the object using a method:
document.getElementById('demo').innerHTML = person.fullName();

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

// Display data from the object using a getter:
document.getElementById('demo').innerHTML = person.fullName;

Is there a difference between an accessor property and a data property in JavaScript?​

View Answer:
Interview Response: Yes, descriptors for accessor properties are different from those for data properties. There are no value or writable properties for accessor properties; instead, there are get and set functions. A named data property links a name to a value. This means you use the property to get and retrieve data directly as a public field on a class. A named accessor property associates a name with one or two accessor functions. We use accessor functions to store or retrieve a value associated with the property. This behavior means that you restrict the access to a specific value behind a get or/and set accessor property.

Code Example:

// Named Accessor Properties
let obj = {
  get prop() {
    return this._prop;
  },
  set prop(value) {
    console.log('Setter: ' + value);
    this._prop = value;
  },
};

obj.prop = '123';

// Named Data Properties
let obj = {
  prop: 123,
};

console.log(obj.prop); // 123
note

The first solution provides no encapsulation or control over how your data is accessed when comparing the two. The 2nd lets you specify if your value gets read 'get accessor', written 'set accessor', or both.

Can you use getters and setters as wrappers over real properties?​

View Answer:
Interview Response: Yes, Getters/setters can be used as wrappers over "real” property values to gain more control over operations with them. One example of this is a conditional statement used to check the validity of a value.

Code Example:

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      console.log('Name is too short, need at least 4 characters');
      return;
    }
    this._name = value;
  },
};

user.name = 'Pete';
console.log(user.name); // Pete

user.name = ''; // Name is too short...