Mengakses Nilai Dalam Object

View Categories

Mengakses Nilai Dalam Object

JavaScript Accessor adalah cara untuk mengakses nilai properti dalam object dengan menggunakan getter dan setter. Accessor adalah suatu properti yang nilainya bisa didapatkan dari suatu proses atau perhitungan. Accessor terdiri dari dua jenis, pertama getter dan kedua setter.

Getter (keyword get)

Getter digunakan untuk mendapatkan nilai properti dari object. Contoh di bawah memperlihatkan getter dengan nama lang(). Getter ini digunakan untuk mendapatkan nilai properti language.

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

Jalankan Contoh

Setter (Keyword set)

Setter digunakan untuk memberikan nilai properti pada object. Contoh di bawah memperlihatkan setter dengan nama lang() yang mempunyai parameter lang. Setter ini digunakan untuk memberikan nilai pada properti language.

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

Jalankan Contoh

Beda Fungsi Dan Accessor

Kelebihan memakai accessor adalah penulisan yang lebih sederhana dibandingkan dengan memakai fungsi.

Contoh di bawah ini memperlihatkan fungsi fullName. Fungsi fullName digunakan untuk mendapatkan nilai firstName ditambahkan dengan lastName pada object person.

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

Jalankan Contoh

Contoh di bawah ini memperlihatkan getter fullName. Getter fullName digunakan untuk mendapatkan nilai firstName ditambahkan dengan lastName pada object person. Penulisan dengan memakai accessor lebih sederhana dan singkat dibanding memakai fungsi.

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;

Jalankan Contoh

Beda Properti Dan Accessor

Accessor diakses seperti mengakses suatu properti, tapi dalam accessor kita dapat melakukan suatu proses atau perhitungan. Contoh di bawah ini memperlihatkan accessor getter dengan nama lang. Dalam accessor getter lang kita melakukan proses pengubahan properti language menjadi huruf besar.

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

Jalankan Contoh

Contoh di bawah ini memperlihatkan accessor setter lang. Accessor setter ini melakukan proses pengubahan parameter lang menjadi huruf besar dan memberikan nilai kepada properti language.

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

Jalankan Contoh

// Define object
var obj = {counter : 0};

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

Jalankan Contoh

Tutorial sebelumnya : Mencetak Nilai Object
Tutorial setelahnya : Constructor Pada Object
Semua Tutorial JavaScript : Tutorial JavaScript 

Tinggalkan Balasan