What are getters and setters for in ECMAScript 6 classes?

Question

I am confused as to what the point of getters and setters are in ECMAScript 6 classes. What is the purpose? Below is an example I am referring to:

class Employee {

    constructor(name) {
        this._name = name;
    }

    doWork() {
        return `${this._name} is working`;
    }

    get name() {
        return this._name.toUpperCase();
    }

    set name(newName){
        if(newName){ 
            this._name = newName;
        }
    }
}

Answer 1

These setter and getter allow you to use the properties directly (without using the parenthesis)

var emp = new Employee("TruMan1");

if (emp.name) { 
  // uses the get method in the background
}

emp.name = "New name"; // uses the setter in the background

This is only to set and get the value of the property.

Answer 2

Getters and setters in ES6 serve the same purpose that they do in other languages... including ES5. ES5 already allows getters and setters via Object.defineProperty, though they're less clean and more cumbersome to use.

Effectively, getters and setters allow you to use standard property access notation for reads and writes while still having the ability to customize how the property is retrieved and mutated without needed explicit getter and setter methods.

In the Employee class above, this would mean you could access the name property like this:

console.log(someEmployee.name);

It would look like a normal property access, but it would actually call toUpperCase on the name before returning it. Similarly, doing this:

someEmployee.name = null;

would access the setter, and it would not modify the internal _name property because of the guard clause introduced in name's setter.

See also the general question Why use getters and setters? for more information about why being able to modify the functionality of member access is useful.

Answer 3

class Employee {

    constructor(name) {
      this._name = name;
    }

    doWork() {
      return `${this._name} is working`;
    }

    get name() {
      // when you get this by employeeInstance.name
      // the code below will be triggered
      // and you can do some logic here
      // just like `console.log` something you want
      console.log('get triggered!')
      return this._name.toUpperCase();
    }

    set name(newName) {
      // the same as `get`
      // when you employeeInstance.mame = 'xxx'
      // the code below will be trigged
      // and you can also do some logic 
      // like here is a `console.log` and `if check`
      console.log('set triggered!')
      if (newName) {
        this._name = newName;
      }
    }
  }

  const employeeInstance = new Employee('mike')
  employeeInstance.name
  employeeInstance.name = '' // this won't be successful, because the `if check`
  console.log(employeeInstance.name)

  // => 
  // get triggered
  // set triggered
  // get triggered
  // MIKE

Anyway the getter and setter is just like a spy. It spies the property of an object, so that you can do something, every time you get or set the value of the property.

Answer 4

ES6 getters and setters have a substantially different motivation than similar concepts in Java.

In Java, getters and setters allow a class to define a JavaBean. The point of getters and setters is that it allows the bean to have a completely orthogonal "interface" from that implied by public fields. So I can have a field "name" that is is NOT a JavaBean property, and I can have a JavaBean property "address" that is NOT a field.

JavaBean properties are also "discoverable" by thousands of frameworks (Hibernate for example) via Java reflection. Thus, getters and setters are part of a standard method for "exposing" bean properties.

Getters and setters, being functions, also have the value that they "abstract" the implementation. It can be EITHER a field or a computed ("synthetic") value. So if I have a bean property called "zipcode", that starts out as stored string. Now suppose I want to change it to be a value computed from address/city/state?

If I use a field, this code breaks:

      String zipcode = address.zipcode();

But if I use a getter, this does not break:

      String zipcode = address.getZipcode();

JavaScript doesn't have anything like JavaBeans. So far as I've read, the intended value of GET and SET is limited to the aforementions "synthetic" (computed) properties.

But it's somewhat better than java in that while Java doesn't allow you to compatibly convert a "field" to a method, ES6 GET and SET allows that.

That is, if I have:

       var zipcode = address.zipcode;

If I change zipcode from being a standard object property to a getter, the above code now calls the GET function.

Note that if I didn't include GET in the definition, this would NOT invoke the zipcode GET method. Instead, it would merely assign the function zipcode to the var.

So I think these are some important distinctions to understand betweeen Java and JavaScript ES6 getters and setters.