Object Accessors

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Object Accessors

JavaScript Accessors (Getters and Setters)

ECMAScript 5 (ES5 2009) introduced Getter and Setters.

Getters and setters enable you to specify the Object Accessors (Computed Properties).

JavaScript Getter (The get Keyword)

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set object properties via methods.</p>

<p>This example uses a lang property to get the value of the language property:</p>

<p id=”demo”></p>

<script>

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

</script>

</body>

</html>

Output

JavaScript Getters and Setters

Getters and setters allow you to get and set object properties via methods.

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

en

JavaScript Setter (The set Keyword)

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example uses a lang property to set the value of the language property.</p>

<p id=”demo”></p>

<script>

// Create an object:

const person = {

  firstName: “John”,

  lastName: “Doe”,

  language: “NO”,

  set lang(value) {

    this.language = value;

  }

};

// Set a property using set:

person.lang = “en”;

// Display data from the object:

document.getElementById(“demo”).innerHTML = person.language;

</script>

</body>

</html>

Output

JavaScript Getters and Setters

Getters and setters allow you to get and set properties via methods.

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

en

JavaScript Function or Getter?

What are the differences between these two examples?

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Methods</h2>

<p>Object data can be accessed using property stored as a function.</p>

<p id=”demo”></p>

<script>

// Create an object:

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

</script>

</body>

</html>

Output

JavaScript Object Methods

Object data can be accessed using property stored as a function.

John Doe

Data Quality

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

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

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p id=”demo”></p>

<script>

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

</script>

</body>

</html>

Output

JavaScript Getters and Setters

Getters and setters allow you to get and set properties via methods.

EN

Why Using Getters and Setters?

  • It provides a simpler syntax.
  • It enables equal syntax for properties and methods.
  • It can secure better data quality.
  • It is useful for doing things behind the scenes.

Object.defineProperty()

The Object.defineProperty() method adds Getters and Setters:

A Counter Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Getters and Setters</h2>

<p>Perfect for creating counters:</p>

<p id=”demo”></p>

<script>

// Define an 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 counter:

obj.reset;

obj.add = 5;

obj.subtract = 1;

obj.increment;

obj.decrement;

document.getElementById(“demo”).innerHTML = obj.counter;

</script>

</body>

</html>

 

Output

JavaScript Getters and Setters

Perfect for creating counters: