Object Literals

Bayangkan kita mencatat satu produk toko dengan variabel terpisah: namaProduk, hargaProduk, stokProduk, kategoriProduk. Semakin lengkap datanya, semakin panjang daftar variabelnya — dan semakin mudah tertukar ketika ingin dikirim ke function atau ditampilkan. Data yang sebenarnya satu kesatuan jadi tercerai-cerai.

Object menyelesaikan masalah ini dengan mengelompokkan data yang berhubungan ke dalam satu wadah bernama. Bentuk paling umum untuk membuatnya adalah object literal: menuliskan kurung kurawal, lalu mengisi pasangan key-value di dalamnya. Chapter ini membedah sintaks dasarnya, dua jalan pintas yang membuat penulisan lebih ringkas (shorthand property dan method singkat), lalu menutup dengan contoh kartu produk lengkap.

Sintaks Dasar: Pasangan Key-Value #

Aturannya sederhana: setiap properti ditulis sebagai key: value, dipisahkan tanda koma, dan semuanya dibungkus kurung kurawal. Key ditulis tanpa tanda kutip selama bentuknya seperti identifier yang sah (huruf, angka, garis bawah, tanpa spasi). Bila key mengandung spasi atau karakter khusus, key tersebut wajib ditulis dalam tanda kutip:

const catatan = {};                              // object kosong, siap diisi nanti
const profil = { "nama lengkap": "Budi Santoso" };
console.log(profil["nama lengkap"]);

Output yang Dihasilkan:

Budi Santoso

Nilai di sisi kanan boleh bertipe apa pun: string, number, boolean, array, bahkan object lain (nested object). Karena itu object literal menjadi wadah yang pas untuk data bertingkat seperti profil pengguna atau detail pesanan.

Mekanisme pembuatannya berurutan dan bisa kita bayangkan dengan jelas: ketika eksekusi sampai pada literal, engine membuat object kosong di memori, lalu mengisi properti satu per satu dari kiri ke kanan. Setiap nilai di sisi kanan titik dua dievaluasi lebih dulu, kemudian hasilnya disimpan di bawah nama key-nya. Variabel produk kemudian menunjuk object jadi tersebut — dan dari momen itu, seluruh isi kartu produk bisa dibaca lewat satu nama.

Satu kebebasan yang agak mengejutkan: key boleh memakai kata tercadang (reserved words) JavaScript. for, if, bahkan delete diterima sebagai nama properti, karena key bukan identifier variabel — aturan penamaan variabel yang dipelajari di chapter Naming Conventions tidak berlaku di sini:

const kunciKhusus = { for: 1, if: 2, delete: 3 };
console.log(kunciKhusus.for + kunciKhusus.if + kunciKhusus.delete);

Output yang Dihasilkan:

6

Kebebasan ini sebaiknya dipakai seperlunya — key berupa kata tercadang biasanya tanda key yang kurang deskriptif — tetapi fakta tersebut menjelaskan mengapa object literal jauh lebih longgar daripada penamaan variabel.

const tema = {
  utama: "gelap",
  aksen: "kuning",
};
console.log(tema.utama, tema.aksen);

Output yang Dihasilkan:

gelap kuning

Keluarannya menunjukkan kedua properti terbaca normal — koma penutup tidak menjadi bagian dari nama key maupun nilainya.

Shorthand Property: Ketika Nama Variabel Sama dengan Key #

Sering kali kita sudah punya variabel dengan nama yang sama persis dengan key yang ingin diisi — misalnya variabel kota untuk key kota. Menulis { kota: kota } terasa berulang. ES2015 menyediakan shorthand property: cukup tulis nama variabelnya sekali, dan JavaScript otomatis membuat key dengan nama yang sama:

const kota = "Bandung";
const denganShorthand = { kota };
const gayaLama = { kota: kota };
console.log(denganShorthand.kota, gayaLama.kota);

Output yang Dihasilkan:

Bandung Bandung

Kedua object di atas identik isinya. Shorthand hanyalah penulisan singkat — engine membaca nama variabel, menjadikannya key, lalu mengisinya dengan nilai variabel tersebut. Syaratnya satu: nama variabel harus persis sama dengan nama key yang diinginkan. Bila berbeda, tetap gunakan bentuk panjang key: nilai.

Perlu digarisbawahi bahwa shorthand menyalin nilai variabel pada saat literal dievaluasi. Bila kota nanti diisi nilai lain, object yang sudah jadi tidak ikut berubah — properti di dalam object tidak lagi berhubungan dengan variabel asalnya. Perilaku ini konsisten dengan sifat primitive yang disalin by value, dan sama dengan yang kita amati pada kartu produk di akhir chapter.

Method Singkat dalam Literal #

Object tidak hanya menyimpan data; object juga bisa menyimpan function. Faktanya, kita sudah memakai object berisi function sejak section awal tanpa menyebutnya: console adalah object, dan console.log adalah propertinya yang berisi function — itulah mengapa pemanggilannya selalu berbentuk object.method(). Properti yang berisi function disebut method. Bentuk lamanya seperti properti biasa — deskripsi: function() { ... } — sedangkan bentuk singkatnya menghilangkan titik dua dan kata function. Hasil akhirnya sama persis: method singkat tetap function biasa yang bisa menerima parameter, bisa mengembalikan nilai, dan bisa dipanggil lewat nama object diikuti tanda titik. Yang berubah hanya cara menulisnya di dalam literal:

const tugas = {
  judul: "Kirim laporan",
  selesai: false,
  tandaiSelesai() {          // method singkat
    this.selesai = true;
  }
};
tugas.tandaiSelesai();
console.log(tugas.selesai);

Output yang Dihasilkan:

true

Kata kunci this di dalam method merujuk ke object pemiliknya — di contoh ini tugas. Mekanisme this punya aturan sendiri yang cukup penting, dan kita akan membahasnya tuntas di chapter Properties dan Methods. Untuk saat ini, cukup pegang aturan praktisnya: di dalam method singkat, this adalah object tempat method itu dipanggil.

Contoh Lengkap: Kartu Produk #

Berkas berikut merangkum semua bentuk yang sudah kita bahas: properti gaya panjang, shorthand, nested object, array, dan method singkat:

// kartu-produk.js
// Satu produk direkam sebagai object literal.

const namaProduk = "Kopi Gayo";
const harga = 45000;

const produk = {
  nama: namaProduk,          // gaya panjang: key: nilai
  harga,                     // shorthand property: nama variabel = nama key
  stok: 12,
  tersedia: true,
  kategori: {                // nested object
    utama: "Minuman",
    sub: "Kopi bubuk"
  },
  tag: ["arabika", "kemasan 500g"],
  deskripsi() {              // method singkat
    return this.nama + " - Rp" + this.harga + " (" + this.stok + " pcs)";
  }
};

console.log("Nama  :", produk.nama);
console.log("Harga : Rp" + produk.harga);
console.log("Stok  :", produk.stok, "pcs");
console.log("Kategori utama:", produk.kategori.utama);
console.log("Tag pertama:", produk.tag[0]);
console.log(produk.deskripsi());

Output yang Dihasilkan:

Nama  : Kopi Gayo
Harga : Rp45000
Stok  : 12 pcs
Kategori utama: Minuman
Tag pertama: arabika
Kopi Gayo - Rp45000 (12 pcs)

Mari kita telaah apa yang terjadi pada baris-baris kode di atas:

1. Baris 5–6 (const namaProduk = "Kopi Gayo"; dan const harga = 45000;): dua variabel sengaja dibuat dengan nama yang cocok untuk key nama dan harga, sehingga keduanya bisa langsung memakai shorthand di dalam literal.
2. Baris 9 (nama: namaProduk): bentuk panjang. Key-nya nama, nilainya diambil dari variabel namaProduk. Bentuk ini tetap diperlukan ketika nama key dan nama variabel berbeda.
3. Baris 10 (harga): shorthand property. Engine membuat key harga dengan nilai 45000 dari variabel yang bernama sama.
4. Baris 12–15 (kategori: { ... }): nilai properti ini adalah object lain. Aksesnya bertingkat: produk.kategori.utama membaca key utama di dalam object kategori.
5. Baris 16 (tag: ["arabika", "kemasan 500g"]): array dipakai sebagai nilai properti. Elemen array dibaca dengan index, seperti produk.tag[0].
6. Baris 17–19 (deskripsi() { ... }): method singkat. Ketika dipanggil lewat produk.deskripsi(), kata kunci this di dalamnya merujuk ke produk, sehingga this.harga bernilai 45000 dan hasil penggabungan stringnya sesuai data object.
7. Baris 22–27 (console.log(...)): pembacaan properti memakai dot notation (produk.nama) dan penggabungan string dengan +. Pemanggilan produk.deskripsi() menjalankan method dan menampilkan nilai kembaliannya.

Perhatikan bahwa produk.nama mengembalikan "Kopi Gayo" — bukan variabel namaProduk. Yang tersimpan di object adalah nilai variabel saat object dibuat, bukan hubungan dengan variabelnya. Kalau namaProduk berubah setelahnya, isi produk tidak ikut berubah.

// kartu-produk.js
// Satu produk direkam sebagai object literal.

const namaProduk = "Kopi Gayo";
const harga = 45000;

const produk = {
  nama: namaProduk,          // gaya panjang: key: nilai
  harga,                     // shorthand property: nama variabel = nama key
  stok: 12,
  tersedia: true,
  kategori: {                // nested object
    utama: "Minuman",
    sub: "Kopi bubuk"
  },
  tag: ["arabika", "kemasan 500g"],
  deskripsi() {              // method singkat
    return this.nama + " - Rp" + this.harga + " (" + this.stok + " pcs)";
  }
};

console.log("Nama  :", produk.nama);
console.log("Harga : Rp" + produk.harga);
console.log("Stok  :", produk.stok, "pcs");
console.log("Kategori utama:", produk.kategori.utama);
console.log("Tag pertama:", produk.tag[0]);
console.log(produk.deskripsi());