Fynd Academy

// Create an objectconst student = { firstName: "Alice", lastName: "Smith", language: "en", get lang() { return this.language; }};‍// Display data from the object using a getterdocument.getElementById("demo").innerHTML = student.lang;

JavaScript Setter (set Keyword)

A setter method allows you to define a property to set the value of another property.

Example

‍

const student = { firstName: "Alice", lastName: "Smith", language: "", set lang(value) { this.language = value; }};‍// Set an object property using a setterstudent.lang = "en";‍// Display data from the objectdocument.getElementById("demo").innerHTML = student.language;

JavaScript Function or Getter?

Here is a comparison between using a function and a getter to access properties.

Example 1: Using a Function

‍

const student = { firstName: "Alice", lastName: "Smith", fullName: function() { return this.firstName + " " + this.lastName; }};‍// Display data from the object using a methoddocument.getElementById("demo").innerHTML = student.fullName();

Example 2: Using a Getter

‍

const student = { firstName: "Alice", lastName: "Smith", get fullName() { return this.firstName + " " + this.lastName; }};‍// Display data from the object using a getterdocument.getElementById("demo").innerHTML = student.fullName;

In Example 1, fullName is accessed as a function: student.fullName(). In Example 2, fullName is accessed as a property: student.fullName. The getter provides a simpler syntax.

Data Quality

JavaScript can ensure better data quality using getters and setters.

Example

Using the lang property to get the value of the language property in uppercase:

‍

const student = { firstName: "Alice", lastName: "Smith", language: "en", get lang() { return this.language.toUpperCase(); }};‍// Display data from the object using a getterdocument.getElementById("demo").innerHTML = student.lang;

Using the lang property to set the language property in uppercase:

‍

const student = { firstName: "Alice", lastName: "Smith", language: "", set lang(value) { this.language = value.toUpperCase(); }};‍// Set an object property using a setterstudent.lang = "en";‍// Display data from the objectdocument.getElementById("demo").innerHTML = student.language;

Why Use Getters and Setters?

Simpler syntax
Equal syntax for properties and methods
Better data quality
Useful for behind-the-scenes operations

Object.defineProperty()

The Object.defineProperty() method can also be used to add getters and setters.

Example: Counter

‍

// Define object
const counterObj = { counter: 0 };

// Define setters and getters
Object.defineProperty(counterObj, "reset", {
  get() { this.counter = 0; }
});
Object.defineProperty(counterObj, "increment", {
  get() { this.counter++; }
});
Object.defineProperty(counterObj, "decrement", {
  get() { this.counter--; }
});
Object.defineProperty(counterObj, "add", {
  set(value) { this.counter += value; }
});
Object.defineProperty(counterObj, "subtract", {
  set(value) { this.counter -= value; }
});

// Play with the counter
counterObj.reset;
counterObj.add = 5;
counterObj.subtract = 1;
counterObj.increment;
counterObj.decrement;

With these methods, you can manage object properties more effectively, ensuring data integrity and simplifying the syntax for accessing and modifying properties.

‍

Take a look into your desired course