Fitur Tambahan dari Kelas dalam JavaScript

Dalam artikel ini, kami akan menjelaskan fitur tambahan dari kelas dalam JavaScript.

YouTube Video

Fitur Tambahan dari Kelas dalam JavaScript

Properti Pribadi dalam JavaScript

Dalam JavaScript, properti pribadi adalah properti yang hanya dapat diakses di dalam objek atau kelas. Ini memungkinkan desain kode yang lebih aman dan kokoh dengan menyediakan enkapsulasi, sehingga modifikasi langsung atau referensi dari kode luar tidak mungkin dilakukan.

Diperkenalkan dalam ECMAScript 2020 (ES11) pada tahun 2020, penggunaan # (hash) untuk mendefinisikan field privat di dalam kelas mulai digunakan. Ini menyediakan cara yang lebih jelas, menggantikan konvensi privat tradisional dalam JavaScript (seperti nama variabel yang diawali dengan garis bawah).

Keuntungan dari Properti Pribadi

Berikut adalah keuntungan dari properti privat.

• Enkapsulasi: Menyembunyikan keadaan internal dari luar dan menjaga konsistensi data.
• Keamanan: Mencegah properti dari modifikasi tidak sengaja oleh kode luar.
• Peningkatan Pemeliharaan: Menyembunyikan implementasi objek atau kelas dan memperjelas antarmuka yang ditampilkan ke luar.

Cara Menggunakan Properti Pribadi

Mendefinisikan Properti Pribadi di Dalam Kelas

Field pribadi didefinisikan menggunakan nama yang diawali dengan #. Field ini tidak dapat diakses langsung dari objek instance dari kelas atau subclass-nya.

 1class Person {
 2    // Define private property
 3    #name;
 4
 5    constructor(name) {
 6        this.#name = name;
 7    }
 8
 9    // Method to access the private property
10    getName() {
11        return this.#name;
12    }
13
14    // Method to change the private property
15    setName(newName) {
16        this.#name = newName;
17    }
18}
19
20const john = new Person("John");
21console.log(john.getName()); // John
22
23// Cannot access private property directly
24console.log(john.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

Pada kode di atas, #name adalah properti pribadi yang tidak dapat diakses langsung dari luar kelas Person. Anda hanya dapat mengakses atau mengubah nama melalui metode getName dan setName.

Mendefinisikan Metode Pribadi

Seperti properti pribadi, metode pribadi juga didefinisikan dengan nama yang diawali dengan #. Metode pribadi hanya dapat dipanggil dari dalam kelas.

 1class Counter {
 2    #count = 0;
 3
 4    increment() {
 5        this.#count++;
 6        this.#logCount(); // Calling private method
 7    }
 8
 9    // Private method
10    #logCount() {
11        console.log(`Current count: ${this.#count}`);
12    }
13}
14
15const counter = new Counter();
16counter.increment(); // Current count: 1
17
18// Cannot access private method directly
19counter.#logCount(); // SyntaxError: Private field '#logCount' must be declared in an enclosing class

Di sini, #logCount didefinisikan sebagai metode pribadi dan tidak dapat diakses dari luar kelas. Metode ini hanya digunakan di dalam kelas.

Keuntungan dan Pertimbangan dari Properti Pribadi

Keuntungan

• Karena tidak dapat diakses langsung dari luar kelas, perubahan atau operasi yang tidak diinginkan dapat dicegah.
• Karena bagian yang tidak terlihat dari luar dapat disembunyikan dengan baik, Anda dapat mengelola bagian yang diekspos sebagai API dengan jelas.

Catatan

• Karena bidang privat sepenuhnya tersembunyi dari luar kelas, proses pengujian dan debugging bisa menjadi sulit. Oleh karena itu, penting untuk menyediakan API yang dapat diuji secara menyeluruh pada tahap desain.
• Bidang privat berperilaku berbeda dari bagian lain dalam JavaScript dengan karakteristik berbasis prototipe karena mereka unik untuk setiap instance.

Implementasi Pseudonim Tradisional untuk Properti Privat

Sebelum pengenalan bidang privat menggunakan #, JavaScript tidak memiliki sintaks resmi untuk properti privat. Oleh karena itu, di masa lalu, properti pseudo-privat diimplementasikan dengan cara berikut.

Konvensi menggunakan garis bawah

Pengembang secara konvensional mengindikasikan 'privat' dengan menambahkan garis bawah di awal nama variabel.

 1class Car {
 2    constructor(brand) {
 3        this._brand = brand; // Using an underscore to indicate private
 4    }
 5
 6    getBrand() {
 7        return this._brand;
 8    }
 9}
10
11const car = new Car("Toyota");
12console.log(car.getBrand()); // Toyota
13console.log(car._brand); // Toyota (Accessible from outside)

Metode ini hanyalah sebuah 'konvensi', dan dalam praktiknya, properti tersebut tetap dapat diakses dari luar.

Implementasi properti privat menggunakan penutupan (closure)

Pencapaian properti privat juga memungkinkan dengan menggunakan penutupan (closure) dalam lingkup fungsi.

 1function createPerson(name) {
 2    let _name = name; // Private variable within function scope
 3
 4    return {
 5        getName: function() {
 6            return _name;
 7        },
 8        setName: function(newName) {
 9            _name = newName;
10        }
11    };
12}
13
14const person = createPerson("Alice");
15console.log(person.getName()); // Alice
16person.setName("Bob");
17console.log(person.getName()); // Bob
18
19// Cannot access directly from outside
20console.log(person._name); // undefined

Dengan metode ini, variabel _name terkunci dalam lingkup fungsi dan tidak dapat diakses langsung dari luar.

Ringkasan

Properti privat dalam JavaScript sangat efektif dalam menyediakan enkapsulasi pada desain kelas dan objek, membantu melindungi data dengan aman. Notasi # untuk bidang privat yang dikenalkan di ES2020 memberikan metode manajemen privasi yang lebih jelas dan aman dibandingkan konvensi tradisional dan penutupan (closure).

Optional Chaining dalam JavaScript

Optional Chaining adalah sintaks yang sangat berguna dalam JavaScript untuk mengakses properti dari objek yang bersarang dalam. Ini meningkatkan keterbacaan dan pemeliharaan kode dengan memungkinkan akses yang aman tanpa harus memeriksa secara individual keberadaan properti tertentu.

Sintaks dasar Optional Chaining

Optional Chaining dapat digunakan dengan menempatkan ? sebelum tanda titik (.) atau notasi kurung yang digunakan untuk mengakses properti. Notasi ini mengembalikan undefined ketika properti yang dilalui adalah null atau undefined, memungkinkan program untuk melanjutkan proses dengan aman tanpa menghasilkan kesalahan.

Contoh:

 1const user = {
 2    name: 'John',
 3    address: {
 4        street: '123 Main St',
 5        city: 'New York'
 6    }
 7};
 8
 9// Without using optional chaining
10const city = user && user.address && user.address.city;
11console.log(city);  // New York
12
13// Using optional chaining
14const cityWithOptionalChaining = user?.address?.city;
15console.log(cityWithOptionalChaining);  // New York

Dalam contoh ini, kita mengakses address dan properti city dari objek user. Tanpa menggunakan optional chaining, Anda perlu melakukan beberapa pemeriksaan keberadaan, tetapi dengan optional chaining, Anda dapat mengakses properti dengan aman hanya dengan satu pernyataan.

Menggunakan Optional Chaining dengan array dan fungsi

Optional chaining tidak hanya berlaku untuk properti objek, tetapi juga elemen array dan panggilan fungsi.

Contoh dengan array:

1const users = [{ name: 'Alice' }, { name: 'Bob' }];
2
3// Accessing the non-existent third element
4const thirdUser = users[2]?.name;
5console.log(thirdUser);  // undefined

Contoh dengan fungsi:

 1const user = {
 2    greet: function() {
 3        return 'Hello!';
 4    }
 5};
 6
 7// Call the function only if greet exists
 8const greeting = user.greet?.();
 9console.log(greeting);  // Hello!
10
11// Return undefined if greet does not exist
12const nonExistentGreeting = user.nonExistentMethod?.();
13console.log(nonExistentGreeting);  // undefined

Menggabungkan Optional Chaining dengan nilai default

Saat menggunakan optional chaining, umum untuk menggunakan operator logis OR (||) atau operator nullish coalescing (??) untuk menentukan nilai default jika properti tidak ada.

Contoh:

 1const user = {
 2    name: 'John',
 3    address: {
 4        city: 'New York'
 5    }
 6};
 7
 8// Set a default value for a non-existent property
 9const state = user?.address?.state || 'Unknown';
10console.log(state);  // Unknown
11
12// Example using the nullish coalescing operator
13const zipCode = user?.address?.zipCode ?? '00000';
14console.log(zipCode);  // 00000

Operator || menganggap false, 0, '', dll., sebagai falsy, sedangkan operator ?? hanya menggunakan nilai default jika operand adalah null atau undefined.

Manfaat Optional Chaining

• Akses aman ke objek bersarang: Dengan menggunakan optional chaining, Anda tidak perlu lagi melakukan pemeriksaan keberadaan eksplisit, membuat kode lebih ringkas.
• Menghindari kesalahan: Ini dapat mencegah kesalahan saat runtime bahkan jika suatu properti bernilai null atau undefined.
• Meningkatkan keterbacaan dan pemeliharaan: Terutama saat bekerja dengan banyak objek bersarang, keterbacaan kode meningkat secara signifikan.

Peringatan saat menggunakan Optional Chaining

• Penggunaan optional chaining yang terlalu sering dapat menjadi tanda bahwa desain struktur data terlalu rumit. Anda sebaiknya berusaha untuk memiliki model data yang sederhana.
• Karena beberapa browser lama dan mesin JavaScript tidak mendukungnya, Anda mungkin perlu menggunakan polyfill atau transpiler.

Kesimpulan

Optional chaining adalah fitur yang kuat yang menyederhanakan akses aman ke properti dan fungsi dari objek bersarang di JavaScript. Ini sangat efektif saat mengakses struktur data yang bersarang dalam, membantu mencegah kesalahan dan meningkatkan keterbacaan kode.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video