JavaScript – Tentang JavaScript Object [Bag. 2]

Setelah kita berdiskusi mengenai obyek, tipe data, constructor, dan cara untuk membuat obyek, pada bagian ini kita akan membahas lebih lanjut mengenai obyek JavaScript. Untuk yang belum membaca bagian pertama, dapat langsung menuju ke sini.

Practical Pattern dalam Pembuatan Object

Untuk obyek sederhana yang mungkin hanya digunakan sekali pada aplikasi, kedua metode di atas sudah cukup untuk membuat obyek.

Bayangkan jika kamu memiliki sebuah aplikasi untuk menampilkan buah-buahan beserta detail informasinya. Semua obyek buah pada aplikasimu memiliki beberapa property: color, shape, sweetness, cost, dan method showName. Akan sangat melelahkan untuk mengetik atau membuat ulang obyek tersebut tiap kali kamu ingin membuat obyek buah baru.

var mangoFruit = {
  color: "yellow",
  sweetness: 8,
  fruitName: "Mango",
  nativeToLand: ["South America", "Central America"],

  showName: function() {
    console.log("This is " + this.fruitName);
  },
  nativeTo: function() {
  this.nativeToLand.forEach(function (eachCountry) {
      console.log("Grown in:" + eachCountry);
    });
  }
}

Kode di atas adalah contoh membuat satu obyek buah. Jika kamu memiliki 10 buah, kamu akan menulis kode yang sama sebanyak 10 kali. Dan bagaimana jika ada perubahan di method nativeTo? Kamu harus menulis perubahan tersebut di 10 tempat yang berbeda. Cara seperti itu bukanlah cara yang ideal untuk membuat obyek, terutama saat mengembangkan aplikasi skala besar.

Untuk memecahkan masalah itu, para software engineer telah menemukan pola (solusi) untuk membuat aplikasi yang lebih efisien.

Terdapat dua pola umum untuk membuat obyek.

1. Pola constructor

   function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) {
     this.color = theColor;
     this.sweetness = theSweetness;
     this.fruitName = theFruitName;
     this.nativeToLand = theNativeToLand;
   
     this.showName = function() {
       console.log("This is a " + this.fruitName);
     }
   
     this.nativeTo = function() {
       this.nativeToLand.forEach(function(eachCountry)  {
         console.log("Grown in:" + eachCountry);
       });
     }
   }

   Dengan pola seperti di atas, akan sangat mudah untuk membuat semua obyek buah yang diinginkan. Dapat dilakukan seperti:

   var mangoFruit = new Fruit ("Yellow", 8, "Mango", ["South America", "Central America", "West Africa"]);
   mangoFruit.showName(); // “This is a Mango”.
   mangoFruit.nativeTo();
   // “Grown in:South America”
   // “Grown in:Central America”
   // “Grown in:West Africa”
   
   var pineappleFruit = new Fruit("Brown", 5, "Pineapple", ["United States"]);
   pineappleFruit.showName(); // “This is a Pineapple”.

   Jika kamu ingin mengubah method fruitName, kamu hanya perlu mengubah di satu lokasi saja. Dengan pola ini, kita cukup membuat satu membuat obyek Fruit dengan keyword new yang telah berisi semua fungsionalitas dari fungsi Fruit yang sudah didefinisikan sebelumnya.

2. Pola prototype

   function Fruit() {}
   
   Fruit.prototype.color = "Yellow";
   Fruit.prototype.sweetness = 7;
   Fruit.prototype.fruitName = "Generic Fruit";
   Fruit.prototype.nativeToLand = "USA";
   
   Fruit.prototype.showName = function() {
     console.log("This is a " + this.fruitName);
   }
   
   Fruit.prototype.nativeTo = function() {
     console.log("Grown in:" + this.nativeToLand);
   }

   Dengan pola seperti di atas, berikut adalah cara kita memanggil constructor obyek Fruit.

   var mangoFruit = new Fruit();
   mangoFruit.showName();
   mangoFruit.nativeTo();
   // “This is a Generic Fruit”
   // “Grown in:USA”

Cara Mengakses Properties pada Obyek

Dua cara utama untuk mengakses properties dari obyek adalah dengan menggunakan dot notation dan bracket notation.

1. Dot Notation
   

   // Pada bagian pertama sudah diberikan contoh mengenai dot notation. Berikut adalah contoh lengkapnya:
   var book = {title: "Ways to Go", pages: 280, bookMark1:"Page 20"};
   
   // Lakukan ini untuk mengakses properties obyek menggunakan dot notation:
   console.log(book.title); // “Ways to Go”
   console.log(book.pages); // “280”

2. Bracket Notation
   

   // Untuk mengakses obyek menggunakan bracket notation, berikut adalah contohnya:
   console.log(book["title"]); // “Ways to Go”
   console.log(book["pages"]); // “280”
   
   // Atau, kamu bisa memasukkan nama property ke variabel:
   var bookTitle = "title";
   console.log(book[bookTitle]); // “Ways to Go”
   console.log(book["bookMark" + 1]); // “Page 20”

Mengakses property dari obyek yang tidak ada akan menghasilkan undefined.

Own dan Inherited Properties

Obyek memiliki inherited properties dan own properties. Own properties adalah propertiy yang didefinisikan di dalam obyek, sedangkan inherited properties adalah property yang didapatkan dari Prototype object.

Untuk mencari tahu apakah suatu property itu terdapat pada obyek atau tidak (baik inherited atau own properties), kamu bisa menggunakan operator in.

// Buat obyek school dengan property schoolName
var school = {schoolName: "MIT"};

// “true”, karena property schoolName terdapat pada obyek
console.log("schoolName" in school); // “true”

// “false”, karena tidak terdapat property schoolType, baik itu own ataupun inherited properties.
console.log("schoolType" in school);  // “false”
 
// “true”, karena property toString termasuk inherited proeprties dari Object.prototype. 
console.log("toString" in school);  // “true”

hasOwnProperty

Untuk mencari tahu apakah obyek tersebut memiliki suatu spesifik property atau tidak, kamu dapat menggunakan method hasOwnProperty. Method ini sangar berguna karena dari waktu ke waktu kamu butuh untuk memilah isi dari obyek dan kamu hanya butuh own properties, bukan yang inherited.

// Buat obyek school dengan property schoolName
var school = {schoolName: "MIT"};

// “true”, karena property schoolName terdapat pada obyek
console.log(school.hasOwnProperty("schoolName"));  // “true“
 
// “false”, karena obyek school memiliki inherited properties toString, sedangkan toString bukan own properties.
console.log(school.hasOwnProperty("toString"));  // “false“

Mengakses dan Memilah Properties pada Obyek

Untuk mengakses enumerable (own dan inherited) properties pada obyek, kamu bisa menggunakan looping for/in atau hanya looping for.

// Buat obyek school dengan 3 own properties: schoolName, schoolAccredited, and schoolLocation.
var school = {schoolName: "MIT", schoolAccredited: true, schoolLocation: "Massachusetts"};

// Menggunakan looping for/in untuk mengakses proeprties pada obyek school.
for (var eachItem in school) {
   console.log(eachItem); // “schoolName”, “schoolAccredited”, “schoolLocation”
}

Mengakses Inherited Properties

Inherited properties yang dari Object.prototype tidak termasuk enumerable, jadi looping for/in tidak akan ditampilkan. Namun, inherited properties yang enumerable dapat ditampilkan melalui looping for/in.

Contoh:

// Membuat fungsi baru HigherLearning.
function HigherLearning() {
  this.educationLevel = "University";
}

// Implementasi inheritance dengan HigherLearning constructor
var school = new HigherLearning();
school.schoolName = "MIT";
school.schoolAccredited = true;
school.schoolLocation = "Massachusetts";


// Menggunakan looping for/in untuk mengakses properties dari obyek.
for (var eachItem in school) {
  console.log(eachItem); // “educationLevel”, “schoolName”, “schoolAccredited”, dan “schoolLocation”
}

Menghapus Properties dari Obyek

Untuk menghapus property dari obyek, kamu bisa menggunakan operator delete. Inherited properties tidak dapat dihapus. Kamu harus menghapus inherited properties dari prototype obyek. Juga, kamu tidak dapat menghapus properties dari obyek global, yang mana dideklarasikan dengan keyword var.

Operator delete memiliki return true jika berhasil menghapus. Dan herannya, operator delete juga menghasilkan return true jika property yang di hapus tidak ada atau property tersebut tidak bisa dihapus (seperti property yang non-configurable)

Contoh di bawah dapat mengilustrasikannya.

var christmasList = {mike: "Book", jason: "sweater"}
delete christmasList.mike; // property mike terhapus

for (var people in christmasList) {
  console.log(people);
}
// “jason”
// property mike sudah terhapus

Obyek Serialize dan Deserialize

Untuk mengirim obyek melalui HTTP atau untuk mengkonversi menjadi string, kamu butuh untuk melakukan serialize (konversi obyek menjadi string) dengan fungsi JSON.stringify. Sebelum ECMAScript 5, kamu harus menyertakan json2 library untuk mendapatkan fungsi JSON.stringify.

Untuk melakukan deserialize pada obyek (konversi dari string menjadi obyek), kamu bisa menggunakan fungsi JSON.parse.

Contoh JSON.stringify.

var christmasList = {mike: "Book", jason: "sweater", chelsea: "iPad"}
JSON.stringify(christmasList);
// "{"mike":"Book","jason":"sweater","chels":"iPad"}"



// Untuk mencetak string obyek dengan format, tambahkan “null” dan “4” sebagai parameter.
JSON.stringify (christmasList, null, 4);
/* "{
    "mike": "Book",
    "jason": "sweater",
    "chels": "iPad"
}" */

// Contoh JSON.parse
var christmasListStr = '{"mike":"Book","jason":"sweater","chels":"iPad"}';

// Konversi menjadi obyek
var christmasListObj = JSON.parse(christmasListStr); 

// Sekarang obyek dapat diakses menggunakan dot notation
console.log(christmasListObj.mike); // Book

Sekian tutorial mengenai obyek pada JavaScript. Tunggu tutorial-tutorial berikutnya. Terima kasih.