Properties dan Methods

Object literal dari chapter sebelumnya baru menyimpan data. Kehidupan nyata menuntut lebih: membaca properti dengan key yang baru diketahui saat program berjalan, menambah field baru setelah object dibuat, menghapus yang tidak relevan, dan membuat method yang membaca data dari object-nya sendiri. Semua itu bekerja lewat properti dan method.

Chapter ini membahas dua cara mengakses properti (dot dan bracket), kapan masing-masing wajib dipakai, cara menambah serta menghapus properti, dan perilaku kata kunci this di dalam method. Contoh utamanya: kartu akun pengguna yang kita ubah-ubah dari awal sampai akhir.

Dot Notation dan Bracket Notation #

Ada dua sintaks untuk membaca atau mengubah properti:

Keduanya menunjuk properti yang sama persis. Membaca lewat dot lalu mengubah lewat bracket tetap menyentuh satu lokasi yang sama:

const stok = { apel: 12 };
stok.apel = 20;
stok["apel"] = 24;
console.log(stok.apel);

Output yang Dihasilkan:

24

Nilai akhirnya 24 karena baris kedua dan ketiga menulis ke properti apel yang sama. Untuk key biasa, pilih dot notation: lebih pendek dan lebih mudah dibaca. Bracket hanya diperlukan dalam dua situasi.

Situasi pertama: key yang tidak sah sebagai identifier, misalnya mengandung spasi — "nama lengkap". Situasi kedua lebih penting: nama key baru diketahui saat program berjalan dan tersimpan di variabel. Bracket menerima ekspresi apa pun di dalamnya, sedangkan dot membaca nama yang tertulis apa adanya:

akun[kunci]   // membaca key sesuai ISI variabel kunci
akun.kunci    // membaca key bernama "kunci" — hampir pasti bukan niat kita

Key yang Tidak Ada dan Operator delete #

Membaca properti yang tidak pernah dibuat tidak menimbulkan error. JavaScript menghasilkan nilai undefined:

const akun = { poin: 850 };
console.log(akun.email);

Output yang Dihasilkan:

undefined

Perilaku ini nyaman, tetapi juga berbahaya bila typo tidak disadari: akun.pion terlihat seperti data kosong, padahal key poin justru ada. Karena itu pemeriksaan keberadaan key punya alat tersendiri (in dan Object.hasOwn) yang dibahas di chapter Optional Properties.

Menghapus properti memakai operator delete. Operator ini mengembalikan true bila penghapusan dilakukan, dan properti yang sudah dihapus kembali berperilaku seperti tidak pernah ada:

const kota = { nama: "Bandung", kode: 22 };
const hasil = delete kota.kode;
console.log(hasil, kota.kode);

Output yang Dihasilkan:

true undefined

Perlu dibedakan: delete kota.kode menghilangkan properti dari object, sedangkan kota.kode = undefined hanya mengganti nilainya — key-nya masih ada di dalam object. Untuk kebutuhan umum seperti membersihkan field sementara, keduanya bisa terlihat sama; perbedaannya baru terasa saat memeriksa keberadaan key, yang akan kita buktikan di chapter berikutnya.

Method Juga Properti Biasa #

Method disimpan di object seperti properti lain — nilainya sebuah function. Konsekuensinya: method bisa ditimpa lewat assignment, bisa dihapus dengan delete, dan bisa dipindah ke variabel. Pemindahan ke variabel inilah yang paling memengaruhi this, jadi mari kita amati dulu:

const akun = { nama: "Budi", sapa() { return "Hai " + this.nama; } };
const lepas = akun.sapa;
console.log(lepas());

Output yang Dihasilkan:

Hai undefined

Variabel lepas memuat function yang sama, tetapi pemanggilannya tidak lagi dalam bentuk akun.sapa() — tidak ada object di sebelah kiri tanda titik. Tanpa object pemanggil, this tidak menunjuk ke akun, dan this.nama menghasilkan undefined. Dari sini kita bisa merangkum aturan lengkapnya: this ditentukan saat method dipanggil, bukan saat method ditulis. Selama method selalu dipanggil lewat objectnya (akun.sapa()), this selalu merujuk ke object itu.

this dalam Method #

Di chapter sebelumnya kita singgung this sebagai “object pemilik method”. Mari kita presisikan aturannya: ketika method dipanggil dalam bentuk object.method(), kata kunci this di dalam method itu merujuk ke object di sebelah kiri tanda titik. Karena itu method yang sama bisa membaca data object-nya masing-masing tanpa perlu menyebut nama objectnya secara eksplisit.

Keuntungan terbesarnya terasa ketika method perlu mengubah data. Menulis this.poin = this.poin + 50 di dalam method berarti menambah poin milik object tempat method dipanggil — bukan milik object lain yang kebetulan punya method serupa. Kalau suatu saat nama variabel objectnya berganti, method tidak perlu disunting sama sekali; tidak ada nama object yang tertulis keras di dalam tubuhnya.

Kebiasaan yang sehat: di dalam method, akses properti selalu lewat this — bukan lewat nama variabel objectnya. Perbandingan dua penulisan berikut memperlihatkan alasannya: akun.poin di dalam method akan salah sasaran begitu method dipanggil dari object lain, sedangkan this.poin selalu mengikuti object pemanggil. Kombinasi dengan bracket dari bagian pertama chapter ini juga sah: this["nama lengkap"] membaca key berspasi milik object pemanggil.

Contoh Lengkap: Kartu Akun Pengguna #

Berkas berikut merangkum seluruh materi chapter ini dalam satu alur kerja: membaca lewat dot dan bracket, membaca key lewat variabel, menambah properti, mengubah nilai, lalu menghapus properti:

// akun-pengguna.js
// Dot access, bracket access, menambah/menghapus properti, dan this.

const akun = {
  "nama lengkap": "Budi Santoso",
  level: 3,
  poin: 850,
  sapa() {
    return "Halo, " + this["nama lengkap"] + " (level " + this.level + ")";
  }
};

console.log(akun.sapa());
console.log("Poin via dot    :", akun.poin);
console.log("Poin via bracket:", akun["poin"]);

// membaca key lewat variabel: hanya bracket yang bisa
const kunci = "nama lengkap";
console.log("Key dari variabel:", akun[kunci]);

// menambah properti baru lewat assignment
akun.email = "[email protected]";
akun["status aktif"] = true;
console.log("Email:", akun.email, "| Status:", akun["status aktif"]);

// mengubah nilai properti lama
akun.poin = akun.poin + 50;
console.log("Poin setelah bonus:", akun.poin);

// menghapus properti
delete akun.level;
console.log("Level setelah delete:", akun.level);

Output yang Dihasilkan:

Halo, Budi Santoso (level 3)
Poin via dot    : 850
Poin via bracket: 850
Key dari variabel: Budi Santoso
Email: [email protected] | Status: true
Poin setelah bonus: 900
Level setelah delete: undefined

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

1. Baris 5 ("nama lengkap": "Budi Santoso"): key dengan spasi wajib berkutip, dan sejak awal sudah bisa dilihat bahwa key ini hanya bisa dibaca lewat bracket.
2. Baris 8–10 (sapa() { ... }): method singkat yang membaca dua properti. this["nama lengkap"] memakai bracket karena key-nya berspasi; this.level memakai dot. Ketika dipanggil sebagai akun.sapa(), this merujuk ke akun.
3. Baris 12–14 (console.log(...)): akun.poin dan akun["poin"] menghasilkan 850 yang sama — dua sintaks, satu properti. Pemanggilan akun.sapa() menampilkan string hasil method.
4. Baris 17–18 (const kunci = "nama lengkap"; dan akun[kunci]): isi variabel kunci dievaluasi dulu, lalu hasilnya — "nama lengkap" — dipakai sebagai key. Itulah sebabnya keluarannya "Budi Santoso", bukan undefined.
5. Baris 21–22 (akun.email = ... dan akun["status aktif"] = true): menambah properti baru hanyalah assignment ke key yang belum ada. Object yang tadinya punya 4 properti kini punya 6. Untuk key berspasi, assignment-nya pun harus lewat bracket.
6. Baris 25–26 (akun.poin = akun.poin + 50): sisi kanan dievaluasi dulu (850 + 50), lalu hasilnya ditulis kembali ke properti poin. Bentuk akun.poin += 50 dari section Operators melakukan hal yang sama.
7. Baris 29–30 (delete akun.level dan seterusnya): properti level dihapus. Pembacaan akun.level setelahnya menghasilkan undefined — persis seperti membaca key yang tidak pernah dibuat.

Chapter berikutnya melangkah ke situasi yang lebih dinamis: bagaimana bila nama key-nya sendiri harus dirakit dari ekspresi — bukan sekadar dibaca dari variabel?

// akun-pengguna.js
// Dot access, bracket access, menambah/menghapus properti, dan this.

const akun = {
  "nama lengkap": "Budi Santoso",
  level: 3,
  poin: 850,
  sapa() {
    return "Halo, " + this["nama lengkap"] + " (level " + this.level + ")";
  }
};

console.log(akun.sapa());
console.log("Poin via dot    :", akun.poin);
console.log("Poin via bracket:", akun["poin"]);

// membaca key lewat variabel: hanya bracket yang bisa
const kunci = "nama lengkap";
console.log("Key dari variabel:", akun[kunci]);

// menambah properti baru lewat assignment
akun.email = "[email protected]";
akun["status aktif"] = true;
console.log("Email:", akun.email, "| Status:", akun["status aktif"]);

// mengubah nilai properti lama
akun.poin = akun.poin + 50;
console.log("Poin setelah bonus:", akun.poin);

// menghapus properti
delete akun.level;
console.log("Level setelah delete:", akun.level);