JavaScript Object Accessors

Getters and setters allow you to define Object Accessors (Computed Properties).

JavaScript Getters and Setters

Getters and setters allow you to define Object Accessors (Computed Properties).

JavaScript Getter (The get Keyword)

This example uses a lang property to get the value of the language property.

Example

Example Code

javascript

Try it Yourself

// Create an object:

const person = {

  firstName: "John",

  lastName: "Doe",

  language: "en",

  get lang() {

    return this.language;

    }
};

// Display data from the object using a getter:

document.getElementById("demo").innerHTML = person.lang;

JavaScript Setter (The set Keyword)

This example uses a lang property to set the value of the language property.

Example

Example Code

javascript

Try it Yourself

const person = {

  firstName: "John",

  lastName: "Doe",

  language: "",

    set lang(lang) {

    this.language = lang;

    }
};

// Set an object
property using a setter:

person.lang = "en";

// Display data from the object:

document.getElementById("demo").innerHTML = person.language;

JavaScript Function or Getter?

What is the differences between these two examples?

Example 1

Example Code

javascript

Try it Yourself

const 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();

Example 2

Example Code

javascript

Try it Yourself

const 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;

Example 1 access fullName as a function: person.fullName().

Example 2 access fullName as a property: person.fullName.

The second example provides a simpler syntax.

Data Quality

JavaScript can secure better data quality when using getters and setters.

Using the lang property, in this example, returns the value of the language property in upper case:

Example

Example Code

javascript

Try it Yourself

// Create an object:

const person = {

  firstName: "John",

  lastName: "Doe",

  language: "en",

  get lang() {

    return this.language.toUpperCase();

    }
};

// Display data from the object using a getter:

document.getElementById("demo").innerHTML = person.lang;

Using the lang property, in this example, stores an upper case value in the language property:

Example

Example Code

javascript

Try it Yourself

const person = {

  firstName: "John",

  lastName: "Doe",

  language: "",

  set lang(lang) {

      this.language = lang.toUpperCase();

    }
};

// Set an object
property using a setter:

person.lang = "en";

// Display data from the object:

document.getElementById("demo").innerHTML = person.language;

Why Using Getters and Setters?

It gives simpler syntax
It allows equal syntax for properties and methods
It can secure better data quality
It is useful for doing things behind-the-scenes

Avoid getters or setters if you only need simple values (prevents overuse).

Object.defineProperty()

The Object.defineProperty() method can also be used to add Getters and Setters:

A Counter Example

Example Code

javascript

Try it Yourself

// Define object

const obj = {counter : 0};

// Define setters and getters

Object.defineProperty(obj, "reset", {

  get : function () {this.counter = 0;}
});

Object.defineProperty(obj, "increment", {

  get : function () {this.counter++;}
});

Object.defineProperty(obj, "decrement", {

  get : function () {this.counter--;}
});

Object.defineProperty(obj, "add", {

  set : function (value) {this.counter += value;}
});

Object.defineProperty(obj, "subtract", {

  set : function (value) {this.counter -= value;}
});

// Play with the counter:

obj.reset;

obj.add = 5;

obj.subtract = 1;

obj.increment;

obj.decrement;

Advanced Chapters: > JavaScript Object Definitions > JavaScript Object Advanced this > JavaScript Object Iterations > JavaScript Object Getters & Setters > JavaScript Object Management > JavaScript Object Protection > JavaScript Object Prototypes > JavaScript Object Reference