Techstart news

Berita Informasi Teknologi Mancanegara Terbaru dan Terupdate

Javascript

Property Accessor didalam Object Class Javascript

ByTechStartNews

Apr 27, 2022 #ai, #anda, #dan, #ini, #JavaScript class methods, #JavaScript class property, #JavaScript class tutorial, #JavaScript getter setter, #JavaScript inheritance, #JavaScript object class, #yang

Introduction

Dalam JavaScript, objek adalah bagian penting dalam pengembangan aplikasi berbasis objek (OOP). Ketika kita bekerja dengan class, kita sering perlu mengakses atau mengubah nilai properti yang ada pada objek. Di sinilah konsep property accessor menjadi penting. Property accessor adalah cara untuk mendapatkan atau menetapkan nilai properti objek, baik dengan dot notation atau bracket notation. Selain itu, getter dan setter memberikan kontrol lebih lanjut atas cara kita mengakses dan mengubah properti objek dalam class. Artikel ini akan membahas property accessor dalam class di JavaScript dan bagaimana Anda bisa menggunakannya untuk mengelola data objek dengan cara yang lebih efisien dan terorganisir.

1. Apa Itu Property Accessor?

Property accessor adalah cara untuk mengakses atau mengubah nilai properti yang ada pada objek. Secara umum, ada dua jenis cara untuk mengakses properti dalam JavaScript:

  • Dot notation: Mengakses properti objek dengan menggunakan titik (.).
  • Bracket notation: Mengakses properti objek dengan menggunakan tanda kurung siku ([]), di mana nama properti dituliskan sebagai string.

Contoh Dot Notation:

javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}

const person = new Person("Alice", 25);
console.log(person.name); // Output: Alice
console.log(person.age); // Output: 25

Pada contoh di atas, kita mengakses properti name dan age menggunakan dot notation.

Contoh Bracket Notation:

javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}

const person = new Person("Alice", 25);
console.log(person["name"]); // Output: Alice
console.log(person["age"]); // Output: 25

Dengan bracket notation, kita bisa mengakses properti dengan cara yang sama, hanya saja nama properti disertakan dalam tanda kurung siku sebagai string.

2. Getter dan Setter: Memahami Akses Properti di dalam Class

Selain dot notation dan bracket notation, Anda dapat menggunakan getter dan setter di dalam class untuk mengakses dan mengubah properti. Getter dan setter memungkinkan Anda untuk melakukan validasi atau manipulasi data saat properti diakses atau diubah.

Apa Itu Getter dan Setter?

  • Getter digunakan untuk mengambil (mengakses) nilai properti.
  • Setter digunakan untuk menetapkan (mengubah) nilai properti.

Getter dan setter memberikan kontrol yang lebih besar terhadap cara properti diakses atau dimodifikasi. Misalnya, Anda dapat memastikan bahwa nilai yang diberikan sesuai dengan aturan yang Anda tentukan.

Contoh Penggunaan Getter dan Setter:

javascript
class Person {
constructor(name, age) {
this._name = name; // Menandakan properti privat dengan awalan underscore
this._age = age;
}

// Getter untuk name
get name() {
return this._name;
}

// Setter untuk name
set name(newName) {
this._name = newName;
}

// Getter untuk age
get age() {
return this._age;
}

// Setter untuk age
set age(newAge) {
if (newAge >= 0) {
this._age = newAge;
} else {
console.log("Age must be positive!");
}
}
}

const person = new Person("Alice", 25);
console.log(person.name); // Output: Alice
console.log(person.age); // Output: 25

person.name = "Bob"; // Mengubah nama
person.age = 30; // Mengubah usia
console.log(person.name); // Output: Bob
console.log(person.age); // Output: 30

Di sini:

  • Getter (get name() dan get age()) digunakan untuk mengakses nilai properti _name dan _age.
  • Setter (set name() dan set age()) memungkinkan kita untuk mengubah nilai properti dan menambahkan logika validasi, seperti memastikan usia tidak bernilai negatif.

3. Menggunakan Property Accessor untuk Properti Privat

Meskipun JavaScript tidak memiliki properti privat secara eksplisit (sebelum ES2022), Anda bisa menggunakan getter dan setter untuk mensimulasikan properti privat dengan awalan underscore (_) atau dengan menggunakan weakmap. Ini memberikan kontrol lebih terhadap data objek.

Contoh Properti Privat dengan Getter dan Setter:

javascript
class BankAccount {
constructor(balance) {
this._balance = balance; // Properti privat
}

// Getter untuk balance
get balance() {
return this._balance;
}

// Setter untuk deposit
set deposit(amount) {
if (amount > 0) {
this._balance += amount;
} else {
console.log("Deposit must be a positive value.");
}
}

// Setter untuk withdraw
set withdraw(amount) {
if (amount <= this._balance && amount > 0) {
this._balance -= amount;
} else {
console.log("Invalid withdrawal.");
}
}
}

const account = new BankAccount(1000);
console.log(account.balance); // Output: 1000

account.deposit = 500; // Menambah saldo
console.log(account.balance); // Output: 1500

account.withdraw = 200; // Menarik uang
console.log(account.balance); // Output: 1300

Pada contoh ini:

  • Properti _balance dianggap sebagai properti privat.
  • Akses ke properti dilakukan melalui getter dan setter yang memberikan kontrol penuh untuk memvalidasi dan memodifikasi nilai saldo.

4. Pewarisan dan Property Accessor

Jika Anda menggunakan inheritance (pewarisan) dalam class, property accessor juga dapat diwariskan oleh class turunan. Ini memungkinkan Anda untuk mengakses atau mengubah properti di class induk menggunakan getter dan setter.

Contoh Pewarisan dengan Property Accessor:

javascript
class Animal {
constructor(name) {
this._name = name;
}

// Getter untuk name
get name() {
return this._name;
}

// Setter untuk name
set name(newName) {
this._name = newName;
}
}

class Dog extends Animal {
constructor(name, breed) {
super(name); // Memanggil constructor class induk
this._breed = breed;
}

// Getter untuk breed
get breed() {
return this._breed;
}

// Setter untuk breed
set breed(newBreed) {
this._breed = newBreed;
}
}

const dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.name); // Output: Buddy
console.log(dog.breed); // Output: Golden Retriever

dog.name = "Max"; // Mengubah nama menggunakan setter
dog.breed = "Labrador"; // Mengubah breed menggunakan setter
console.log(dog.name); // Output: Max
console.log(dog.breed); // Output: Labrador

Dalam contoh ini, class Dog mewarisi getter dan setter dari class Animal dan menambahkan properti breed dengan accessor tambahan.

Kesimpulan

Property accessor dalam object class JavaScript adalah fitur yang sangat berguna untuk mengakses dan mengubah nilai properti objek secara efisien. Dengan menggunakan dot notation, bracket notation, getter, dan setter, Anda dapat membuat objek yang lebih aman dan terkontrol, terutama ketika bekerja dengan data sensitif atau ketika menerapkan logika validasi pada data yang dimasukkan. Konsep ini juga sangat penting saat menggunakan inheritance, karena memberi Anda cara yang fleksibel untuk mengelola dan mengubah data dalam objek yang diwariskan.

Dengan memahami dan menguasai penggunaan property accessor, Anda dapat meningkatkan kemampuan Anda dalam menulis kode yang bersih, efisien, dan mudah dipelihara di JavaScript.

By TechStartNews

Related Post

Javascript

Belajar Babel Loader Javascript ES6

May 3, 2022 TechStartNews
Javascript

Contoh Implementasi API dan Fetch API dalam Web Sederhana

Apr 29, 2022 TechStartNews
Javascript

Contoh Implementasi Ajax Menggunakan Fetch API di JavaScript

Apr 29, 2022 TechStartNews

Anda Ketinggalan

Inovasi Masa Depan

O3 Mini oleh OpenAI: Perangkat AI Kompak dengan Fitur Canggih

January 18, 2025 TechStartNews
android

Menjelang Peluncuran Samsung Galaxy S25, Harga Terbaru Samsung Galaxy S24 di Indonesia

January 17, 2025 TechStartNews
Konsol

Nintendo Konfirmasi Switch 2 Meluncur pada 2025

January 17, 2025 TechStartNews
Inovasi Masa Depan

Revolusi Teknologi dengan Komputasi Kuantum

January 15, 2025 TechStartNews
gunung388gunung388gunung388scatter hitamslot viralidncash slot onlineidntogel slot maxwinkemenangan maksimal di gates of gatot kaca x1000 pola resmimerger xl dan smart jadi xlsmart jackpot besar mahjong wins 3perbandingan poco f6 vs samsung a55 cari cuan di mahjong ways 2ponsel tangguh flagship vivo x200 lebih murahrahasia jackpot berlimpah dari para suhu mahjong wins 3event tahun baru imlek total kemenangan di gandakan pada mahjong wins 3mantan admin ini di pecat karena bagikan pola dan bocoran jackpotmenguak misteri 4 simbol naga hitam di mahjong wins 3permainan bertema klasik mahjong wins 3 vs mahjong ways 2pola dan trik rahasia mahjong ways 2 sukses cuan besarelon musk kembali guncang pasar kriptoadu ketahanan samsung galaxy a16 5g di mahjong ways 2beli toyota innova zenix dari jackpot besar sugar rush x1000kunci sukses cuan besar tekun dan belajar pola rahasia sweet bonanza x1000menang besar mahjong wins 3 dengan bocoran teknik spin turbonikah ke 3 kali setelah hoki jackpot besar olympus x1000penghasil profit big bass bonanza jadi alternatif mania mancingpi network siapkan peluncuran mainnet event jackpot ganda di lucky nekosolana dan ethereum di prediksi melesat wild bandito alternatif profit besarhati senang duit ada mahjong ways 2 gunung388kisah sultan skincare kaya raya viral di media sosiallegenda naga hitam kuno mahjong wins 3 kemenangan tertinggimenang matematika modern mahjong wins 3 jackpot modal recehpragmatic gunung388 event bonus ganda princes starlightronaldo menang besar wild bounty showdown gunung388samsung a33 5g harga terjun bebas cuan ways of the qilinskema kemenangan gates of gatot kaca jackpot 5 menitwaktu terbaik profit mahjong wins 3 scatter hitamyuyun jackpot 1 miliar sugar rush x1000 gunung388