Pengenalan object di Javascript | Rizal Asrul Pambudi

Kita tentu familiar dengan konsep OOP yang dimiliki oleh beberapa pemrograman seperti Java dan C#. Di JavaScript juga memiliki konsep object yang hampir mirip dengan OOP. Hal terpenting dan fundamental dari tipe data pada JavaScript adalah tipe data Object. Selain tipe data Object, JavaScript juga memiliki lima jenis tipe data lain (tipe data primitif): Number, String, Boolean, Undefined, dan Null. Perbedaannya adalah tipe data primitif bersifat immutable, sedangkan Object bersifat mutable. Untuk lebih jelasnya mengenai immutable dan mutable, klik di sini.

Apakah object itu?

Object adalah kumpulan atau list dari tipe data primitif (bisa juga tipe data reference, seperti array). Tiap item dari list tersebut disebut property, sedangkan fungsi disebut method.

Contoh object sederhana:

var myFirstObject = {
  firstName : “Richard”,
  favoriteAuthor : “Conrad”
}

Dari contoh tersebut, firstName dan favoriteAuthor disebut dengan property, dan nilainya adalah “Richard” dan “Conrad”.

Property dari object dapat berupa string atau number, tapi jika properti tersebut berupa number, maka properti tersebut dapat diakses dengan kurung siku. Berikut adalah contohnya.

var ageGroup = {
  30: "Children",
  100: "Very Old"
}
console.log(ageGroup.30) // Error

console.log(ageGroup["30"]); // “Children”

Sebagai javascript developer, kita akan sering menggunakan tipe data object, khususnya pada saat menyimpan data dan untuk membuat method atau function.

Reference data type dan primitive data type

Perbedaan utama antara tipe data reference dan primitf adalah metode penyimpanan datanya. Tipe data reference tidak menyimpan datanya secara langsung pada variabel, tetapi disimpan sebagai reference. Tipe data reference akan menyimpan alamat dari variabel yang menampung nilai tersebut.

// Tipe data primitif string menyimpan data
var person = "Kobe";
var anotherPerson = person; // anotherPerson = nilai dari variabel person
person = "Bryant"; // nilai dari variabel person berubah

console.log(anotherPerson); // ”Kobe”
console.log(person); // “Bryant”

Bandingkan dengan cara penyimpanan data pada tipe data reference.

var person = {name: "Kobe"};
var anotherPerson = person;
person.name = "Bryant";

console.log(anotherPerson.name); // “Bryant”
console.log(person.name); // “Bryant”

Pada contoh tersebut, variabel anotherPerson diisi dinisialisasi dengan variabel person. Karena nilai pada variabel person disimpan berupa reference dan bukan nilai aktualnya, maka ketika property person.name diubah menjadi “Bryant”, anotherPerson juga ikut berubah. Hal tersebut karena variabel anotherPerson tidak berisi nilai aktual, melainkan reference atau alamat dari person. Lain lagi jika variabel anotherPerson diinisialisasi dengan property person.name.

Creating objects

Terdapat dua cara umum untuk membuat object.

Object literals

Cara paling umum dan, tentu saja, cara paling mudah untuk membuat object adalah dengan mendefinisikan nama property dan method secara langsung.

// Object kosong
var myBooks = {}

// Object dengan 4 item
var banana = {
  color: "yellow",
  shape: "round",
  sweetness: 8,

  howSweetAmI: function () {
    console.log("Hmm Hmm Keren");
  }
}

Object Constructor
Cara umum lainnya untuk membuat object adalah dengan metode ini. Constructor adalah fungsi yang digunakan untuk menginisialisasi object baru (new objects), dan kita bisa menggunakan keyword “new” untuk memanggil constructor. Cara ini cukup familiar dengan bahasa pemrograman berbasis OOP lainnya.
```
var mango =  new Object ();

mango.color = "yellow";
mango.shape= "round";
mango.sweetness = 8;

mango.howSweetAmI = function () {
  console.log("Hmm Hmm Keren");
}
```

Object dapat berisi tipe data lainnya, termasuk Numbers, Arrays, dan bahkan Object itu sendiri.

Practical pattern dalam pembuatan object

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

Bayangkan jika kita memiliki sebuah aplikasi untuk menampilkan buah-buahan beserta detail informasinya. Semua object buah pada aplikasi kita memiliki beberapa property: color, shape, sweetness, cost, dan method showName. Akan sangat melelahkan untuk mengetik atau membuat ulang object tersebut tiap kali kita ingin membuat object 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 object buah. Jika kita memiliki 10 buah, kita akan menulis kode yang sama sebanyak 10 kali. Dan bagaimana jika ada perubahan di method nativeTo? kita harus menulis perubahan tersebut di 10 tempat yang berbeda. Cara seperti itu bukanlah cara yang ideal untuk membuat object, 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 object.

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 object 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 kita ingin mengubah method fruitName, kita hanya perlu mengubah di satu lokasi saja. Dengan pola ini, kita cukup membuat satu membuat object Fruit dengan keyword new yang telah berisi semua fungsionalitas dari fungsi Fruit yang sudah didefinisikan sebelumnya.

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 object Fruit.

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

Cara mengakses properties pada object

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

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 object menggunakan dot notation:
console.log(book.title); // “Ways to Go”
console.log(book.pages); // “280”

Bracket notation

// Untuk mengakses object menggunakan bracket notation, berikut adalah contohnya:
console.log(book["title"]); // “Ways to Go”
console.log(book["pages"]); // “280”

// Atau, kita 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 object yang tidak ada akan menghasilkan undefined.

Own dan inherited properties

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

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

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

// “true”, karena property schoolName terdapat pada object
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 object tersebut memiliki suatu spesifik property atau tidak, kita dapat menggunakan method hasOwnProperty. Method ini sangar berguna karena dari waktu ke waktu kita butuh untuk memilah isi dari object dan kita hanya butuh own properties, bukan yang inherited.

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

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

// “false”, karena object school memiliki inherited properties toString, sedangkan toString bukan own properties.
console.log(school.hasOwnProperty("toString"));  // “false“

Mengakses dan memilah properties pada object

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

// Buat object 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 object 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.

/// 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 object.
for (var eachItem in school) {
  console.log(eachItem); // “educationLevel”, “schoolName”, “schoolAccredited”, dan “schoolLocation”
}

Menghapus properties dari object

Untuk menghapus property dari object, kita bisa menggunakan operator delete. Inherited properties tidak dapat dihapus. kita harus menghapus inherited properties dari prototype object. Juga, kita tidak dapat menghapus properties dari object 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)

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

Object serialize dan deserialize

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

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

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

// Untuk mencetak string object dengan format, tambahkan null dan 4 sebagai parameter.
JSON.stringify (christmasList, null, 4);

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

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

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