Javascript Accessors & Mutators (Getters & Setters) Tutorial

What are accessors and mutators

Accessors and mutators allow us to hide implementation details from the instance object. As an example, think of a class that validates a user’s email address.

The class would encapsulate the inner workings of checking for symbols, valid domains, sending confirmation emails etc. We don’t need to worry about how it does that behind the scenes, all we want to do is instantiate the class, send it an email address to evaluate and receive a yes or no.

Encapsulation has the added benefit of providing us with some data protection.

Accessor (getter)

Let’s consider a simple example where we want the full name of a person.

<script>

  class Person {

    constructor(first_name, last_name) {

      this.first_name = first_name;
      this.last_name = last_name;
    }
  }

  p1 = new Person("John", "Doe");
  document.write(p1.first_name, " ", p1.last_name);

</script>

In the example above, we combine the first and last names when we want to print it to the page. We can use a getter method to get the first and last names and combine them.

To write a get method, we write the keyword get in front of the method name.

// getter definition
get method_name() {
  // body
}

// getter call
object_name.method_name;

When we invoke the getter method, we don’t include the open and close parentheses as we would with a regular function.

<script>

  class Person {

    constructor(first_name, last_name) {

      this.first_name = first_name;
      this.last_name = last_name;
    }

    get full_name() {

      return this.first_name + " " + this.last_name;
    }
  }

  p1 = new Person("Jane", "Doe");
  document.write( p1.full_name );

</script>

We could achieve the same result with a normal method.

<script>

  class Person {

    constructor(first_name, last_name) {

      this.first_name = first_name;
      this.last_name = last_name;
    }

    full_name() {

      return this.first_name + " " + this.last_name;
    }
  }

  p1 = new Person("Jane", "Doe");
  document.write( p1.full_name() );

</script>

The function in the example above does the exact same thing as the getter method. However, the getter method has slightly simpler syntax and it’s easier to recognize the purpose of the getter method at a glance.

Another benefit is that our data is protected. In this case we won’t be able to change the name, we can only get the values.

<script>

  class Person {

    constructor(first_name, last_name) {

      this.first_name = first_name;
      this.last_name = last_name;
    }

    get full_name() {

      return this.first_name + " " + this.last_name;
    }
  }

  p1 = new Person("Jane", "Doe");
  p1.full_name = "John Doe";

  document.write( p1.full_name );

</script>

In the example above, we try to change the name, but it doesn’t work. It still shows the name “Jane Doe”.

Mutator (setter)

A setter method is used to mutate the value of a class member.

In our previous example, there was no way for us to change a person’s name other than instantiating a new object. This provides us with class safety, but what if a person gets married and we need to change their last name.

Javascript allows us to change the value of a property by using a setter method. To write a setter method we use the set keyword in front of the method name. Set methods only allow a single parameter which is used to change the value of the property.

set method_name(parameter) {

  this.property = parameter;
}

<script>

  class Person {

    constructor(first_name, last_name) {

      this.first_name = first_name;
      this.last_name = last_name;
    }

    get full_name() {

      return this.first_name + " " + this.last_name;
    }

    set new_last_name(last_name) {

      this.last_name = last_name;
    }
  }

  p1 = new Person("Jane", "Doe");
  p1.new_last_name = "Porter";

  document.write( p1.full_name );

</script>

In the example above, we maintain class safety because the setter method will only change the last name, it can’t change anything else.

Summary: Points to remember

• Accessor and Mutator methods encapsulate our classes, keeping them safe by hiding unnecessary implementation details and only modifying certain values.
• Get and Set methods have a slightly simpler syntax and also allow us to recognize their purpose at a glance.
• To access a value, we use a get method.
• To mutate a value, we use a set method.
  • A set method may only contain a single parameter.