Object literal

Properti, metode, dan akses dot vs bracket pada object literal.

Daftar isi

Object menyimpan beberapa nilai dalam satu wadah, dan setiap nilai diberi nama agar mudah dicari kembali. Bentuk paling dasar untuk membuatnya adalah object literal, yaitu penulisan object secara langsung dengan kurung kurawal berisi pasangan kunci-nilai. Topik ini membahas penulisan properti dan metode, dua cara mengakses isi object, penulisan properti yang lebih ringkas, penambahan dan penghapusan properti, serta pratayang tiga metode statis milik Object untuk menelaah isinya. Seluruh contoh berjalan di Node.js, sehingga keluarannya dapat direproduksi persis di terminal.

Properti dan metode#

Setiap pasangan kunci-nilai pada object disebut properti, yakni nama yang melekat pada sebuah nilai. Kunci ditulis tanpa tanda kutip selama namanya sah sebagai pengenal JavaScript, sedangkan nilainya boleh berupa teks, angka, boolean, array, object lain, sampai fungsi. Properti yang bernilai fungsi disebut metode karena berperilaku seperti fungsi milik object tersebut. Kunci yang sama sebaiknya hanya ditulis sekali pada satu literal, karena penulisan ganda membuat nilai terakhir menimpa yang pertama. Dengan satu object literal, data yang berhubungan dapat dihimpun sekaligus, misalnya satu entri buku pada katalog perpustakaan.

js katalog-buku.js

// Object literal: kumpulan pasangan kunci-nilai dalam satu nilai.
const buku = {
  judul: "Dasar Menanam Sayuran",
  pengarang: "Dewi Anjani",
  tahunTerbit: 2019,
  tersedia: true,
  ringkas() {
    return this.judul + " (" + this.pengarang + ")";
  },
};

console.log(buku.judul);
console.log(buku.tahunTerbit);
console.log(buku.ringkas());

text Keluaran

Dasar Menanam Sayuran
2019
Dasar Menanam Sayuran (Dewi Anjani)

Kurung kurawal pada contoh di atas menghimpun lima properti, dan setiap pasangan dipisahkan tanda koma. Metode ringkas dipanggil seperti fungsi biasa melalui buku.ringkas(), dan kata this di dalamnya menunjuk ke object pemilik metode itu. Untuk topik ini, cukup pahami this sebagai cara menyebut properti milik object sendiri, sedangkan pembahasan lengkapnya ada pada modul this, prototype, dan kelas. Nilai true pada properti tersedia juga menunjukkan bahwa satu object boleh menampung tipe data yang berbeda-beda sekaligus. Penamaan kunci mengikuti gaya camelCase seperti pada tahunTerbit, sehingga kunci berisi lebih dari satu kata tetap bisa diakses dengan dot.

Akses dot dan bracket#

Properti dibaca dengan menulis titik di antara nama object dan kuncinya, seperti buku.judul. Cara kedua memakai bracket, yaitu kurung siku yang berisi kunci dalam bentuk string, seperti buku["judul"]. Untuk kunci yang sederhana, dot lebih pendek dan lebih mudah dibaca. Bracket menjadi wajib dalam dua keadaan, yaitu ketika kuncinya disimpan di sebuah variabel dan ketika kuncinya memuat karakter yang tidak sah sebagai pengenal, misalnya tanda hubung pada kode-rak.

js Contoh: akses bracket dengan kunci dari variabel

// Akses bracket: kunci bertanda hubung wajib ditulis sebagai string.
const rak = { "kode-rak": "R-07", kapasitas: 40 };
const kunciDicari = "kode-rak";

console.log(rak["kode-rak"]);
console.log(rak[kunciDicari]);

text Keluaran

R-07
R-07

Kunci kode-rak tidak mungkin diakses dengan dot. Bagi JavaScript, rak.kode-rak berarti nilai rak.kode dikurangi nilai variabel rak, dan itu bukan maksud yang diinginkan. Karena itu, kunci bertanda hubung selalu diakses melalui bracket dan ditulis sebagai string. Kunci yang disimpan di variabel juga hanya bekerja lewat bracket, karena dot mencari kunci berdasarkan nama yang tertulis, bukan berdasarkan isi variabelnya. Dua baris keluaran di atas menegaskan bahwa akses langsung maupun akses lewat variabel memberi hasil yang sama.

Shorthand properti#

Object literal sering dibangun dari variabel yang sudah ada, misalnya saat beberapa nilai digabung menjadi satu catatan. Ketika nama variabelnya sama dengan kunci yang diinginkan, penulisan kunci boleh dilewati dan cukup nama variabelnya saja. Bentuk ringkas ini disebut shorthand properti, yaitu aturan penulisan yang mengambil nama kunci langsung dari nama variabelnya sekaligus menjadikan nilai variabel itu sebagai nilai properti.

js Contoh: shorthand properti

// Shorthand properti: nama variabel menjadi kunci sekaligus nilainya.
const hari = "Selasa";
const petugas = "Budi";

const jadwalPiket = { hari: hari, petugas: petugas };
const jadwalRingkas = { hari, petugas };

console.log(jadwalPiket);
console.log(jadwalRingkas);

text Keluaran

{ hari: 'Selasa', petugas: 'Budi' }
{ hari: 'Selasa', petugas: 'Budi' }

Kedua object pada keluaran berisi properti yang persis sama, tetapi jadwalRingkas ditulis tanpa mengulang kata hari dan petugas dua kali. Shorthand tidak menciptakan kunci baru dari teks apa pun, kuncinya selalu bernama persis seperti variabelnya. Bila variabelnya bernama hari, kunci yang tercipta bernama hari, bukan nama lain. Karena itu, literal campuran yang memuat bentuk panjang dan bentuk ringkas tetap sah, dan sering muncul ketika sebagian nilai perlu diganti namanya. Sebaliknya, bila kunci yang diinginkan berbeda dari nama variabelnya, bentuk panjang tetap diperlukan, misalnya { hari: namaHari }. Shorthand paling sering muncul saat sebuah fungsi mengembalikan beberapa nilai dalam satu object, karena tidak ada nama yang perlu ditulis ulang di tempat perakitannya.

Menambah dan menghapus properti#

Object yang sudah dibuat tetap bisa berkembang mengikuti kebutuhan program. Properti baru ditambahkan dengan menugaskan nilai ke kunci yang belum ada, sedangkan properti yang tidak diperlukan lagi dihapus dengan operator delete. Keduanya bekerja pada object yang dideklarasikan dengan const sekalipun, karena yang berubah adalah isi objectnya, bukan ikatan variabelnya. Penjelasan pada topik const dan let menyebut bahwa const melarang penugasan ulang variabel, bukan perubahan isi nilai yang ditunjuknya, dan di sinilah batas itu terasa.

js Contoh: menambah lalu menghapus properti

// Menambah properti dengan penugasan dan menghapusnya dengan delete.
const resep = { nama: "Tumis Kangkung", porsi: 2 };

resep.waktuMasak = 10;
console.log(resep);

delete resep.porsi;
console.log(resep);

text Keluaran

{ nama: 'Tumis Kangkung', porsi: 2, waktuMasak: 10 }
{ nama: 'Tumis Kangkung', waktuMasak: 10 }

Properti waktuMasak muncul begitu ditugaskan, tanpa deklarasi apa pun sebelumnya. Operator delete menghapus pasangan kunci-nilai sepenuhnya, sehingga porsi tidak lagi muncul pada baris kedua dan membaca resep.porsi sesudahnya menghasilkan undefined. Kedua operasi ini bekerja pada satu object tertentu, sehingga object lain yang isinya kebetulan mirip tidak ikut tersentuh. Dalam kode modern, delete dipakai jarang karena membangun object baru tanpa properti yang bersangkutan sering lebih mudah dilacak, tetapi operator ini tetap perlu dikenali saat membaca kode lama. Hubungan antar variabel yang menunjuk object yang sama memperumit urusan ini, dan pembahasannya ada pada topik referensi vs nilai.

Object.keys, values, dan entries#

Kadang yang dibutuhkan bukan satu properti, melainkan gambaran seluruh isi object. Tiga metode statis milik Object menyediakan gambaran itu. Object.keys mengembalikan array berisi seluruh kunci, Object.values mengembalikan seluruh nilainya, dan Object.entries mengembalikan pasangan keduanya dalam bentuk array bersarang. Ketiganya menerima object sebagai argumen dan mengembalikan array sungguhan, sehingga hasilnya langsung dapat dipakai oleh perulangan for…of maupun metode array lain.

js Contoh: keys, values, dan entries

// Tiga metode statis Object untuk pratayang isi object.
const suhuRuang = { pagi: 24, siang: 29, sore: 27 };

console.log(Object.keys(suhuRuang));
console.log(Object.values(suhuRuang));
console.log(Object.entries(suhuRuang));

text Keluaran

[ 'pagi', 'siang', 'sore' ]
[ 24, 29, 27 ]
[ [ 'pagi', 24 ], [ 'siang', 29 ], [ 'sore', 27 ] ]

Baris ketiga memuat tiga pasangan, dan setiap pasangan berupa array dua elemen berisi kunci lalu nilai. Masing-masing metode lazim dipakai untuk keperluan yang berbeda, Object.keys untuk memeriksa properti yang tersedia, Object.values untuk menjumlahkan atau mencari nilai terbesar, dan Object.entries untuk menyusun ulang data menjadi bentuk lain. Semuanya mengembalikan array baru, sehingga object asalnya tidak pernah berubah. Bentuk pasangan inilah yang paling sering dimanfaatkan, karena pasangan kunci-nilai nyaman dibongkar lagi dengan destructuring. Ketiga metode ini sengaja dibahas sebagai pratayang, perannya baru terasa penuh ketika object mulai diolah secara massal dengan metode array.

Ringkasan#

Object literal menulis object langsung dengan kurung kurawal, dan setiap propertinya berupa pasangan kunci-nilai yang boleh berisi nilai apa pun, termasuk fungsi yang disebut metode.
Dot untuk kunci sederhana, sedangkan bracket wajib untuk kunci yang disimpan di variabel dan kunci dengan karakter khusus seperti tanda hubung.
Shorthand properti meringkas { hari: hari } menjadi { hari }, penambahan properti dilakukan dengan penugasan, dan penghapusannya dengan delete.
Object.keys, Object.values, dan Object.entries mengembalikan array berisi kunci, nilai, dan pasangan keduanya sebagai pratayang isi object.

Referensi#

Object initializer — MDN Web Docs — Aturan penulisan object literal, termasuk shorthand dan metode.
Working with objects — MDN Web Docs — Panduan dasar membuat dan mengakses properti object.
Object basics — javascript.info — Bab pengenalan object literal beserta akses propertinya.