Property Accessor dalam JavaScript: Panduan Getter dan Setter Lengkap

Property accessor JavaScript adalah salah satu konsep penting yang sering bikin pusing saat belajar class. Halo, saya senang kamu mampir ke artikel ini. Bayangkan kamu punya properti seperti color di dalam objek mobil. Tanpa pengawasan, siapa pun bisa mengubah nilainya menjadi null, 12345, atau string kosong. Alhasil aplikasi kamu bisa menampilkan warna mobil yang aneh, bahkan crash diam-diam. Nah, di artikel ini kita akan membedah getter dan setter secara lengkap: apa itu property accessor, mengapa kamu butuh, bagaimana menulisnya, sampai pola-pola lanjutan seperti computed property dan read-only property. Kita juga akan lihat contoh kode yang bisa langsung kamu coba di console browser. Tidak perlu takut dulu sama istilahnya; setelah membaca sampai selesai, kamu akan merasa jauh lebih percaya diri memakai getter dan setter di proyek JavaScript kamu.

Apa Itu Property Accessor JavaScript?

Property accessor JavaScript adalah fitur yang memungkinkan sebuah properti memiliki fungsi tersembunyi di balik pengambilan dan penetapan nilainya. Jadi, dari luar kamu tetap menulis objek.color, tapi di dalam class JavaScript menjalankan kode khusus. Ini berbeda dengan method biasa yang mengharuskan kamu menulis objek.color() dengan tanda kurung. Dengan getter dan setter, sintaksnya terlihat seperti properti biasa, tetapi perilakunya bisa kamu kendalikan penuh.

Analogi paling sederhana adalah pintu rumah. Orang tidak perlu tahu bagaimana sistem keamanan bekerja; mereka cukup memutar gagang pintu. Getter adalah jalur resmi untuk membaca data, sedangkan setter adalah jalur resmi untuk mengubah data. Keduanya bisa memeriksa izin, memvalidasi nilai, atau mencatat aktivitas. Konsep ini adalah salah satu bentuk encapsulation: data internal tetap terlindungi, sementara interface ke luar tetap bersih. MDN menyebut istilah ini sebagai property accessors dan merekomendasikannya untuk menambahkan logika pada akses properti. Kamu bisa membaca dokumentasi lengkapnya di bagian referensi nanti, tapi inti dari accessor adalah kontrol.

Masalah Properti Tanpa Pengawasan

Tanpa accessor, properti JavaScript benar-benar terbuka. Siapa pun bisa membaca, mengubah, bahkan mengisinya dengan tipe data yang salah. Coba lihat contoh sederhana ini:

class Car {
 constructor(manufacture, color) {
 this.manufacture = manufacture;
 this.color = color;
 this.enginesActive = false;
 }
}

const johnCar = new Car("Honda", "Red");
console.log(johnCar.color); // Red

johnCar.color = "White";
johnCar.color = 12345; // bisa angka!
johnCar.color = ""; // kosong juga bisa - tidak ada validasi

Kalau kamu menjalankan kode di atas, JavaScript tidak akan mengeluh sama sekali. Padahal color yang tadinya string berubah menjadi angka, lalu menjadi string kosong. Tapi gimana kalau ini terjadi di aplikasi production? Bayangkan sebuah e-commerce yang menampilkan warna mobil sebagai 12345 atau null; pelanggan pasti bingung, template rendering bisa error, dan bug-nya sulit dilacak karena sumber perubahannya tidak tercatat. Tanpa penjaga di pintu, data bisa masuk sembarangan dan membuat sistem berperilaku tidak terduga.

Solusi Property Accessor: Getter dan Setter

Getter dan setter mengubah properti yang tadinya jujur-jujuran menjadi properti yang dijaga. Saat kamu membaca objek.color, JavaScript akan memanggil fungsi get. Saat kamu menulis objek.color = "White", JavaScript akan memanggil fungsi set. Di dalam fungsi itulah kamu bisa menaruh validasi, logging, atau transformasi nilai. Berikut contohnya:

class Car {
 constructor(manufacture, color) {
 this.manufacture = manufacture;
 this._color = color; // underscore = properti internal
 this.enginesActive = false;
 }

 get color() {
 return `Warna mobil ${this._color}`;
 }

 set color(value) {
 console.log(`Warna diubah dari ${this._color} jadi ${value}`);
 this._color = value;
 }
}

const johnCar = new Car("Honda", "Red");
console.log(johnCar.color); // Warna mobil Red

johnCar.color = "White";
console.log(johnCar.color); // Warna mobil White

Di sini saya menggunakan _color sebagai properti internal. Getter color() membaca _color dan menambahkan teks keterangan. Setter color(value) menerima nilai baru, mencetak log, lalu menyimpannya ke _color. Dari luar, orang tetap menulis johnCar.color, bukan johnCar._color. Dengan begitu, kamu bisa memasukkan banyak aturan ke dalam setter tanpa mengubah cara pemakaian.

Konvensi Underscore dan Private Fields Modern

Ketika kamu melihat _color, kamu mungkin bertanya: mengapa harus pakai underscore? Sebenarnya underscore hanyalah konvensi, bukan fitur JavaScript. Komunitas sepakat bahwa properti yang diawali underscore itu bersifat internal dan tidak boleh diakses langsung dari luar. Tapi secara teknis kamu tetap bisa mengakses johnCar._color, karena JavaScript tidak mencegahnya. Ini seperti memberi label “ruang pribadi” di rumah; orang sopan akan mengetuk pintu dulu, tapi kunci pintunya tetap ada.

Untuk perlindungan sungguhan, JavaScript modern punya private fields dengan tanda #, contohnya #color. Field semacam ini hanya bisa diakses dari dalam class, sehingga dari luar benar-benar tidak terlihat. Fitur ini resmi di ECMAScript 2022 dan didukung sebagian besar runtime modern. Namun, jika kamu bekerja di codebase lama atau harus mendukung browser lawas tanpa transpiler, private fields belum tentu aman dipakai. Konvensi underscore tetap umum di banyak proyek karena sederhana, mudah dibaca, dan kompatibel di mana-mana.

Pilihan antara underscore dan private fields tergantung konteks tim serta target platform. Yang jelas, menggunakan underscore tetap butuh disiplin: jangan sekali-kali mengakses properti internal dari luar saat kamu tahu itu bukan bagian dari API. Begitu setter dan getter sudah dibuat, jangan rusak kepercayaan itu. Nah, sekarang kita masuk ke bagian yang lebih menarik: bagaimana setter bisa memvalidasi dan menormalkan data.

Validasi dan Normalisasi di Setter

Salah satu kekuatan accessor adalah validasi. Bayangkan setter seperti penjaga pintu brankas; sebelum menyimpan sesuatu, ia memeriksa apakah barangnya layak masuk. Kamu bisa menolak nilai dengan throw new Error, mengubah nilai sebelum disimpan, atau mencatatnya ke log. Contoh berikut memvalidasi warna supaya harus string dan tidak kosong, sekaligus menormalkan kapitalisasi. Setter untuk tahun juga membatasi nilainya antara 1900 dan tahun sekarang.

class Car {
 constructor(manufacture, color) {
 this.manufacture = manufacture;
 this._color = color;
 this._year = new Date().getFullYear();
 }

 get color() {
 return this._color;
 }

 set color(value) {
 if (typeof value !== "string" || value.trim() === "") {
 throw new Error("Color harus string tidak kosong!");
 }
 this._color = value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
 console.log(`Warna diubah menjadi: ${this._color}`);
 }

 get year() {
 return this._year;
 }

 set year(value) {
 const cur = new Date().getFullYear();
 if (value < 1900 || value > cur) {
 throw new Error(`Tahun harus 1900-${cur}`);
 }
 this._year = value;
 }
}

const myCar = new Car("Toyota", "blue");
console.log(myCar.color); // Blue (normalisasi)

myCar.color = "GREEN"; // Green
try {
 myCar.color = "";
} catch (e) {
 console.log(e.message); // Color harus string tidak kosong!
}

Perhatikan bahwa setter tidak hanya menolak nilai kosong, tapi juga merapikan input. “blue” menjadi “Blue”, “GREEN” menjadi “Green”. Ini membantu menjaga konsistensi data di database dan mencegah duplikasi warna yang sebenarnya sama. Dengan cara ini, accessor berubah menjadi gerbang keamanan yang aktif, bukan sekadar properti pasif.

Kapan Harus Pakai Getter dan Setter?

Tidak semua properti butuh accessor. Kalau properti kamu cuma data polos dan tidak ada aturan apa pun, getter dan setter bisa terasa berlebihan. Tapi ada beberapa situasi di mana accessor sangat membantu:

• Validasi data (umur, email, harga): Setter memastikan nilai yang masuk masuk akal sebelum disimpan ke properti internal. Misalnya umur tidak boleh negatif, email harus mengandung @, dan harga tidak boleh di bawah nol. Tanpa setter, kamu harus mengingatkan semua orang untuk memvalidasi di setiap tempat.
• Computed property (seperti fullName): Getter bisa menggabungkan firstName dan lastName tanpa menyimpan salinan ekstra. Setiap kali diakses, hasilnya selalu terbarui tanpa perlu sinkronisasi manual.
• Logging dan debugging: Setter bisa mencatat siapa yang mengubah apa dan kapan. Saat muncul bug karena nilai tiba-tiba berubah, log ini bisa menjadi petunjuk penting.
• Encapsulation OOP: Accessor membatasi akses langsung ke data internal sehingga class bisa menjaga aturan bisnisnya. Ini adalah fondasi desain class yang sehat dan profesional.

Computed Property dengan Getter

Getter tidak harus mengembalikan properti yang tersimpan. Ia bisa menghitung nilai baru setiap kali diakses. Ini dinamakan computed property. Contoh paling mudah adalah konversi suhu. Kamu tidak perlu menyimpan tiga angka sekaligus; cukup simpan satu nilai dasar, lalu hitung nilai lainnya saat dibutuhkan.

class Temperature {
 constructor(celsius) {
 this._celsius = celsius;
 }

 get celsius() {
 return this._celsius;
 }

 set celsius(v) {
 this._celsius = v;
 }

 get fahrenheit() {
 return (this._celsius * 9 / 5) + 32;
 }

 get kelvin() {
 return this._celsius + 273.15;
 }
}

const temp = new Temperature(100);
console.log(temp.fahrenheit); // 212

temp.celsius = 0;
console.log(temp.fahrenheit); // 32 otomatis berubah!

Kamu tidak menyimpan fahrenheit atau kelvin sebagai properti terpisah. Keduanya dihitung ulang dari _celsius. Ini menghemat memori dan menghindari data yang tidak konsisten. Bayangkan jika kamu harus menyimpan tiga properti sekaligus; setiap kali celsius berubah, dua properti lain harus diubah juga. Dengan getter, semua tetap sinkron secara otomatis karena tidak ada nilai yang disimpan untuk turunan.

Getter Read-Only dan Pola BankAccount

Tidak semua accessor perlu pasangan getter dan setter. Jika sebuah class hanya memiliki getter tanpa setter, maka properti itu bersifat read-only dari luar. Ini sangat berguna untuk domain keuangan, e-commerce, atau aplikasi yang membutuhkan data transaksi yang ketat. Kamu tidak ingin saldo akun bisa diubah sembarangan, bukan?

class BankAccount {
 constructor(owner, balance) {
 this._owner = owner;
 this._balance = balance;
 }

 get owner() {
 return this._owner;
 }

 get balance() {
 return this._balance;
 }

 deposit(amount) {
 if (amount > 0) {
 this._balance += amount;
 console.log(`Deposit ${amount}. Saldo: ${this._balance}`);
 }
 }

 withdraw(amount) {
 if (amount > 0 && amount <= this._balance) {
 this._balance -= amount;
 console.log(`Tarik ${amount}. Saldo: ${this._balance}`);
 } else {
 console.log("Saldo tidak cukup!");
 }
 }
}

const acc = new BankAccount("Budi", 1000000);
console.log(acc.balance); // 1000000

acc.deposit(500000); // Deposit 500000. Saldo: 1500000

Perhatikan bahwa acc.balance = 5000 tidak akan berfungsi karena tidak ada setter balance. Satu-satunya cara mengubah saldo adalah melalui method deposit() dan withdraw(), yang di dalamnya ada aturan: deposit harus positif dan withdraw tidak boleh melebihi saldo. Pola ini membuat data keuangan tetap aman dan mudah diaudit. Ini juga contoh bagus bahwa getter/setter bukan sekadar formalitas, melainkan alat desain yang membuat kode lebih terstruktur.

Common Mistakes Property Accessor JavaScript

Meskipun accessor terlihat sederhana, ada beberapa kesalahan umum yang sering dilakukan developer. Yuk kita bahas supaya kamu bisa menghindarinya.

• Mengakses properti internal langsung dari luar: Misalnya menulis johnCar._color = "Red". Ini melewati validasi di setter, jadi semua aturan yang sudah kamu buat menjadi sia-sia. Selalu gunakan properti publik, jangan properti underscore, kecuali untuk keperluan internal.
• Getter tanpa setter yang membuat user bingung: Dalam mode non-strict, assignment ke properti tanpa setter akan gagal secara diam-diam. Dalam strict mode, ia melempar TypeError. Pastikan kamu mendokumentasikan properti read-only agar pengguna class tidak bingung.
• Rekursi tak terhingga antara getter dan setter: Jika di dalam setter kamu menulis this.color = value, maka setter akan memanggil dirinya sendiri terus-menerus sampai stack overflow. Gunakan properti internal seperti this._color di dalam setter.
• Kehilangan konteks this: Saat kamu menyimpan method getter ke variabel lalu memanggilnya, this bisa berubah. Contohnya const getColor = obj.color lalu getColor(). Ini akan membuat error atau hasil yang tidak sesuai. Gunakan arrow function atau tetap panggil lewat objeknya.

Referensi dan Langkah Selanjutnya

Untuk dokumentasi resmi dan contoh yang lebih mendalam, kamu bisa membaca MDN Defining getters and setters halaman tersebut menjelaskan sintaks get dan set dengan baik. Jika kamu masih baru mengenal JavaScript dan ingin memperkuat fondasi dasar, saya sarankan membaca panduan belajar JavaScript pemula Infanthree yang membahas topik-topik fundamental secara bertahap. Jangan lupa untuk bereksperimen dengan membuka console browser dan menulis sendiri contoh-contoh di atas. Praktik langsung akan membuat konsep accessor melekat jauh lebih kuat daripada sekadar membaca.

Rangkuman Property Accessor JavaScript

1. Getter dan setter memberikan kontrol akses tanpa mengubah sintaks dari luar.
2. Konvensi underscore adalah etika internal, sedangkan private fields dengan # memberikan privasi sejati.
3. Setter dipakai untuk validasi, normalisasi, dan logging otomatis.
4. Getter bisa menjadi computed property yang hemat memori dan selalu up-to-date.
5. Accessor membuat class lebih aman, terkontrol, dan profesional dalam pendekatan OOP.

Semoga sekarang kamu merasa lebih nyaman dengan getter dan setter. Cobalah mulai dari hal kecil: tambahkan setter validasi di salah satu class milikmu, lalu lihat bagaimana data di dalamnya tetap bersih dan aman. Jangan takut membuat kesalahan, karena justru dari situ kamu akan memahami batas-batas JavaScript. Selamat berlatih, dan sampai jumpa di artikel berikutnya!

Hal yang sering ditanyakan seputar Property Accessor dalam JavaScript: Panduan Getter dan Setter Lengkap