Mengakses Objek: Cara dan Contoh Codenya

Pengakses JavaScript (Getters dan Setter)

ECMAScript 5 pada tahun (2009) pertama kali memperkenalkan Getter and Setter.

Getters dan setter memungkinkan Anda untuk menentukan Object Accessors (Computed Properties).

Section Artikel

1 JavaScript Getter (Keyword get)
2 JavaScript Setter (Keyword set )
3 JavaScript Fungsi atau Getter?
4 Kualitas data
5 Mengapa Menggunakan Getter dan Setter?
6 Object.defineProperty()
7 Browser Support

JavaScript Getter (Keyword get)

Contoh ini menggunakan properti lang untuk mendapatkan nilai properti bahasa.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters dan Setter</h2>

<p> Getters dan setter memungkinkan Anda mendapatkan dan mengatur properti melalui metode. </p>
<p> Contoh ini menggunakan properti lang untuk mendapatkan nilai properti bahasa. </p>
<p id="demo"></p>

<script>
// Create an object:
var 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>

JavaScript Setter (Keyword set )

Contoh ini menggunakan properti lang untuk mengatur nilai properti bahasa.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters dan Setters</h2>

<p> Getters dan setter memungkinkan Anda mendapatkan dan menyetel properti melalui metode. </p>
<p> Contoh ini menggunakan properti lang untuk menyetel nilai properti bahasa. </p>
<p id="demo"></p>

<script>
// Create an object:
var 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>

JavaScript Fungsi atau Getter?

Apa perbedaan antara kedua contoh ini?

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Method</h2>

<p> Data objek dapat diakses menggunakan properti yang disimpan sebagai fungsi. </p>
<p id="demo"></p>

<script>
// Create an object:
var 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>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Method</h2>

<p> Data objek dapat diakses menggunakan getter. </p>
<p id="demo"></p>

<script>
// Create an object:
var 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;
</script>

</body>
</html>

Contoh 1 akses fullName sebagai fungsi: person.fullName ().

Contoh 2 akses fullName sebagai properti: person.fullName.

Contoh kedua memberikan sintaks yang lebih sederhana.

Kualitas data

JavaScript dapat mengamankan kualitas data yang lebih baik saat menggunakan getter dan setter.

Menggunakan properti lang, dalam contoh ini, mengembalikan nilai properti bahasa dalam huruf besar.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getter dan Setter</h2>

<p> Getters dan setter memungkinkan Anda mendapatkan dan menyetel properti melalui metode. </p>
<p id="demo"></p>

<script>
// Create an object:
var 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>

Menggunakan properti lang, dalam contoh ini, menyimpan nilai huruf besar di properti bahasa:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getter dan Setter</h2>

<p> Getters dan setter memungkinkan Anda mendapatkan dan menyetel properti melalui metode. </p>
<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// Set a property using set:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

Mengapa Menggunakan Getter dan Setter?

Membuat sintaks yang lebih sederhana
Memungkinkan membuat sintaks yang sama untuk properti dan metode
Dapat mengamankan kualitas data yang lebih baik
Berguna untuk melakukan hal-hal di balik layar

Object.defineProperty()

Metode Object.defineProperty() juga bisa digunakan untuk menambahkan Getter dan Setter:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getter dan Setter</h2>

<p> Sempurna untuk membuat penghitung: </p>
<p id="demo"></p>

<script>
// Define an object
var 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>

Browser Support

Getters dan Setter tidak didukung di Internet Explorer 8 atau versi sebelumnya:

Chrome	Edge	Firefox	Safari	Opera
Yes	9.0	Yes	Yes	Yes

javascript