Objek-Objek di JavaScript

 

Mengenal Objek JavaScript

Di topik sebelumnya, kita sudah belajar variabel yang menampung satu data saja. Namun di JavaScript sebenarnya variabel itu tidak dibatasi hanya untuk menampung satu data saja. Ada yang namanya variabel tipe objek atau array yang bisa menampung banyak data dari berbagai macam tipe data di JavaScript.

Object (Objek)

Di JavaScript, objek bisa digambarkan sebagai sesuatu yang memiliki properti dan nilai.

Sebagai contoh, manusia. Manusia memiliki nama, pekerjaan, umur, dan lain sebagainya. Nah, kemudian kita tahu bahwa nama orang ini adalah Sarah, pekerjaannya adalah programmer, umurnya 24 tahun, dan lain-lain.

Dalam hal ini, manusia adalah objek. Kemudian nama, pekerjaan, umur adalah properti objek. Terakhir, Sarah adalah nilai dari properti nama, programmer adalah nilai dari properti pekerjaan, dan 24 tahun adalah nilai dari properti umur.

Yap, sesimpel itu konsep dari sebuah objek JavaScript. Oh, jangan lupa! Objek JavaScript dapat menampung properti dan nilai sebanyak apapun dengan tipe data yang beragam.

Mendeklarasikan Objek

Menggunakan Object Literal

Cara mendeklarasikan objek dengan object literal adalah sebagai berikut:

let namaObjek = {
  namaProperti1: nilai1,
  namaProperti2: nilai2
};

Contoh:

let buah = { nama: 'mangga', warnaKulit: 'hijau', hargaPerBuah: 5000 };

let orang = {
  nama: 'sarah',
  umur: 24,
  pekerjaan: 'programmer'
};

Perhatikan contoh kode di atas! Objek berciri khas datanya dibungkus dengan kurung kurawal {}, dan antar data diberi koma ,.

Menggunakan Kata Kunci new

Cara mendeklarasikan objek JavaScript dengan kata kunci new adalah sebagai berikut:

let namaObjek = new Object();

namaObjek.namaProperti1 = nilai1;
namaObjek.namaProperti2 = nilai2;

Contoh:

let orang = new Object();

orang.nama = 'sarah';
orang.umur = 24;
orang.pekerjaan = 'programmer';

Mengakses Properti Objek

Jika kita ingin menggunakan nilai yang terdapat di dalam properti suatu objek, maka kita harus mengakses properti objek tersebut.

Caranya bagaimana?

Ada 2 cara yaitu:

Dot Notation

let objek = {
   namaProperti: nilaiProperti
};

// Dot Notation
objek.namaProperti // Output: nilaiProperti

Contoh:

let orang = {
  nama: 'sarah',
  umur: 24,
  pekerjaan: 'programmer'
};

console.log(orang.nama); // Output: "sarah"
console.log(orang.umur); // Output: 24
console.log(orang.pekerjaan); // Output: "programmer"

Bracket Notation

let objek = {
   namaProperti: nilaiProperti
};

// Bracket Notation
objek["namaProperti"] // Output: nilaiProperti

// bisa juga menggunakan single quote
objek['namaProperti'] // Output: nilaiProperti

Contoh:

let orang = {
  nama: 'sarah',
  umur: 24,
  pekerjaan: 'programmer'
};

console.log(orang["nama"]); // Output: "sarah"
console.log(orang['umur']); // Output: 24
console.log(orang["pekerjaan"]); // Output: "programmer"

📝 Catatan:

Perlu kita perhatikan yang berikut ini ketika kita mau mengakses properti objek secara dynamic (dinamis).

Yang dimaksud dengan mengakses properti objek secara dinamis adalah ketika kita menggunakan nama dari suatu variabel sebagai nama properti saat mengakses properti objek tersebut.

let namaVariabel = namaProperti;

let objek = {
   namaProperti: nilaiProperti
};

// kita bisa mengakses properti objek secara dinamis
// dengan cara berikut
objek[namaVariabel] // Output: nilaiProperti

Contoh:

const smartphone = {
    kamera: "10MP",
    memori: "128GB"
};

const fitur = "kamera";

Apabila kita ingin mengakses nilai "10MP" dari objek smartphone dengan menggunakan variabel fitur. Cara yang benar adalah:

console.log(smartphone[fitur]); // Output: 10MP

// karena variabel fitur mempunya nilai kamera
// maka, baris di atas sama hasilnya dengan
console.log(smartphone["kamera"]); // Output: 10MP
console.log(smartphone.kamera); // Output: 10MP

Kita tidak bisa mengakses properti objek secara dinamis dengan menggunakan dot notation. Jadi:

console.log(smartphone.fitur); // Output: undefined

Contoh di atas akan menghasilkan output undefined dikarenakan objek smartphone tidak mempunyai properti dengan nama fitur.

Menambah Properti Baru pada Objek

Cara menambah properti baru ke dalam suatu objek mirip dengan cara mendeklarasikannya.

Dot Notation

let objek = { namaProperti1: nilaiProperti1 };

objek.namaProperti2 = nilaiProperti2;

console.log(objek); // output: { namaProperti1: nilaiProperti1, namaProperti2: nilaiProperti2 }

Contoh:

let orang = {
  nama: 'sarah',
  umur: 24,
  pekerjaan: 'programmer'
};

orang.kebangsaan = 'warga negara indonesia';

console.log(orang);
/*
  Output:
  {
    nama: 'sarah',
    umur: 24,
    pekerjaan: 'programmer',
    kebangsaan: 'warga negara indonesia'
  }
*/

Bracket Notation

let objek = { namaProperti1: nilaiProperti1 };

objek['namaProperti2'] = nilaiProperti2;

console.log(objek); // output: { namaProperti1: nilaiProperti1, namaProperti2: nilaiProperti2 }

Contoh:

let orang = {
  nama: 'sarah',
  umur: 24,
  pekerjaan: 'programmer'
};

orang['kebangsaan'] = 'warga negara indonesia';

console.log(orang);
/*
  Output:
  {
    nama: 'sarah',
    umur: 24,
    pekerjaan: 'programmer',
    kebangsaan: 'warga negara indonesia'
  }
*/

Apakah kalian masih ingat di beberapa topik sebelumnya, kita sempat membahas tentang penggunaan let dan const di mana variabel yang dideklarasikan dengan menggunakan const tidak bisa diubah datanya terkecuali variabel itu adalah tipe objek atau array.

Jadi untuk objek JavaScript, pengubahan nilai properti seperti berikut tidak akan memunculkan error walaupun variabel objek-nya dideklarasikan dengan const:

const objek = { namaProperti1: nilaiProperti1 };

// mengubah data properti
objek.namaProperti1 = nilaiProperti2; // OK

// menambah properti baru ke objek
objek.namaProperti3 = nilaiProperti3; // OK

📝 Catatan:

Variabel tipe objek dan array yang dideklarasi dengan menggunakan const bisa diubah atau ditambah nilai properti/element-nya. Tetapi variabel-nya sendiri tetap tidak bisa diubah nilainya.

Menghapus Properti Objek

Gunakan kata kunci delete jika ingin menghapus salah satu properti pada objek.

Contoh:

let orang = {
  nama: 'sarah',
  umur: 24,
  pekerjaan: 'programmer'
};

delete orang.umur;
delete orang['pekerjaan'];

console.log(orang); // Output: { nama: "sarah" }

Object Method

Seperti yang kita bahas di topik sebelumnya, objek itu memiliki properti dan nilai. Selama ini kalian baru belajar untuk menambahkan nilai yang berupa string atau number, misalnya seperti ini

const user = {
   nama: "Stefan",
   umur: 21
}

Sebenarnya tipe data dari nilai sebuah properti itu tidak terbatas kepada string dan number saja. Kita juga bisa memberi nilai berupa sebuah fungsi.

"Ha? Berarti ada fungsi di dalam objek gitu?"

Benar banget! Fungsi yang terhubung pada sebuah objek kita sebut dengan istilah method.

Jadi, objek sebenarnya bisa menampung fungsi di dalam propertinya, seperti ini contohnya:

let objek = {
   namaProperti1: nilaiProperti1,
   namaProperti2: function() {...} // nilai dari namaProperti2 adalah method dari variabel objek
};

Contoh:

let kalkulator = {
  namaOperasi: 'penjumlahan',
  jumlah: function(angka1, angka2) {
    return angka1 + angka2;
  }
};

"Lalu bagaimana cara mengakses method yang berada di dalam objek? Apakah sama dengan cara mengakses properti objek biasa?"

Hampir mirip, hanya tinggal tambahkan tanda kurung () dan isi parameter di dalam tanda kurung tersebut jika method tersebut membutuhkan parameter.

Contoh:

let kalkulator = {
  namaOperasi: 'penjumlahan',
  jumlah: function(angka1, angka2) {
    return angka1 + angka2;
  }
};

console.log(kalkulator.jumlah(2, 3)); // Output: 5

📝 Catatan:

Karena method merupakan properti dari suatu objek, maka untuk menambahkan method baru ke dalam objek caranya sama seperti menambahkan properti baru ke dalam objek.

Kalian sekarang mungkin berpikir "Kenapa tidak buat fungsi sendiri saja di luar objeknya?"

Menambahkan fungsi sebagai method dari sebuah objek itu memilki beberapa kelebihan:

Menghindari konflik penamaan fungsi

Misalkan kita mempunyai dua objek, kucing dan anjing. Lalu kita ingin membuat dua buah fungsi suara yang mengembalikan suara dari kedua hewan tersebut. Tentu kita tidak bisa melakukannya seperti di bawah ini. Sebab saat kita mendefinisikan fungsi yang namanya sama dengan fungsi sebelumnya, fungsi baru itu akan menimpa fungsi yang lama.

const kucing = {
  // isi properti dan nilai objek kucing
};

function suara() { return "Meong"; }

const anjing = {
  // isi properti dan nilai objek anjing
};

//fungsi ini akan menimpa fungsi suara yang pertama
function suara() { return "Gukguk"; }

console.log(suara()); // Output: Gukguk

Dengan membuat fungsi suara sebagai method dari masing-masing objek, kita tetap dapat menghindari konflik tersebut. Sebab fungsi suara sekarang akan terhubung dengan objek yang berbeda. Jadi pada saat pemanggilannya, kita juga mengawalinya dengan nama objek di mana method tersebut didefinisikan.

const kucing = {
  // isi properti dan nilai objek kucing,
  suara: function() { return "Meong"; }
};

const anjing = {
  // isi properti dan nilai objek anjing
  suara: function() { return "Gukguk"; }
};

//panggil method suara dalam masing-masing objek
console.log(kucing.suara()); //Output: Meong
console.log(anjing.suara()); // Output: Gukguk

Definisi fungsi yang terpusat

Kita ambil contoh objek di awal tadi

const user = {
   nama: "Stefan",
   umur: 21
};

Katakanlah kita ingin menggunakan kalimat perkenalan "Nama saya Stefan. Saya berumur 21 tahun"di beberapa fungsi lainnya. Cara manual tentu dengan menulisnya satu per satu seperti ini

function fungsiA() {
  //isi dari fungsiA
  console.log(`Nama saya ${user.nama}. Saya berumur ${user.umur} tahun`);
}

function fungsiB() {
  //isi dari fungsiB
  console.log(`Nama saya ${user.nama}. Saya berumur ${user.umur} tahun`);
}

function fungsiC() {
  //isi dari fungsiC
  console.log(`Nama saya ${user.nama}. Saya berumur ${user.umur} tahun`);
}

Tapi misalkan sekarang kita ingin menambahkan properti baru makananFavorit: "Pizza" ke objek user. Tentu kita juga ingin mengubah kalimat perkenalannya menjadi "Nama saya Stefan. Saya berumur 21 tahun. Saya suka Pizza". Tapi karena kita membuat kalimatnya secara manual pada fungsiA, fungsiB, dan fungsiC, kita harus mengubah secara manual juga di ketiga fungsi tersebut.

"Repot banget dong kalau begitu"

Nah, dengan membuat sebuah method di objek user yang mengembalikan kalimat perkenalan tadi, kita cukup memanggil method tersebut di tempat kita ingin menggunakan kalimat tersebut saja.

// buat method perkenalanDiri yang mengembalikan kalimat perkenalan
const user = {
   nama: "Stefan",
   umur: 21,
   makananFavorit: "Pizza",
   perkenalanDiri: () => { 
      return `Nama saya ${this.nama}. Saya berumur ${this.umur}. Saya suka ${this.makananFavorit}`;
   }
};

// panggil method tersebut di dalam fungsi yang kita inginkan
function fungsiA() {
  // isi dari fungsiA
  console.log(user.perkenalanDiri());
}

function fungsiB() {
  // isi dari fungsiB
  console.log(user.perkenalanDiri());
}

function fungsiC() {
  // isi dari fungsiC
  console.log(user.perkenalanDiri());
}

Sekarang, jika ada perubahan pada kalimat perkenalan, kita hanya perlu mengubahnya di satu tempat saja: di method perkenalanDiri() pada objek user.