Create getters and setters in class syntax

Problem

You want to create getters and setters for a class in ES2015.

Ingredients

• 1 class
• the get and set keywords

Directions

1. Create a class with some properties.

   class Person {
     constructor(firstName, lastName) {
       this._firstName = firstName;
       this._lastName = lastName;
     }
   }

2. Add methods that return the properties.

   class Person {
     constructor(firstName, lastName) {
       this._firstName = firstName;
       this._lastName = lastName;
     }
     firstName() {
       return this._firstName;
     }
     lastName() {
       return this._lastName;
     }
   }

3. Define those methods as getters using the get keyword.

   class Person {
     constructor(firstName, lastName) {
       this._firstName = firstName;
       this._lastName = lastName;
     }
     get firstName() {
       return this._firstName;
     }
     get lastName() {
       return this._lastName;
     }
   }

4. Add methods that sets new values to the properties.

   class Person {
     constructor(firstName, lastName) {
       this._firstName = firstName;
       this._lastName = lastName;
     }
     firstName(value) {
       this._firstName = value;
     }
     get firstName() {
       return this._firstName;
     }
     lastName(value) {
       this._lastName = value;
     }
     get lastName() {
       return this._lastName;
     }
   }

5. Define those methods as setters using the set keyword.

   class Person {
     constructor(firstName, lastName) {
       this._firstName = firstName;
       this._lastName = lastName;
     }
     set firstName(value) {
       this._firstName = value;
     }
     get firstName() {
       return this._firstName;
     }
     set lastName(value) {
       this._lastName = value;
     }
     get lastName() {
       return this._lastName;
     }
   }

6. Voilá, there you got perfect getters and setters.

   let person = new Person('John', 'Doe');
   console.log(person.firstName);  // "John"
   console.log(person.lastName);   // "Doe"
   person.firstName = 'Jane';      // "Jane"
   console.log(person.lastName);   // "Doe"

Notes

• Note that you cannot use the same names for the internal properties (e.g., _firstName and _lastName) and for the accessor properties (e.g., firstName and lastName). Otherwise you will have an endless loop.

• Getters and setters does not prevent you from accessing the underlying properties directly:

  let person = new Person('John', 'Doe');
  console.log(person._firstName);  // "John"
  console.log(person._lastName);   // "Doe"
  person._firstName = 'Jane';      // "Jane"
  console.log(person.firstName);   // "Jane"

Served best

• Validation of property values

  class Person {
    ...
    set firstName(value) {
      if(typeof value !== 'string') {
        throw new TypeError('First name must be of type string.');
      }
      this._firstName = value;
    }
    ...
  }

• Emulate private properties

Alternative recipes

• Implement your own accessor methods (e.g., getFirstName(), setFirstName())