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.

Dalam ECMAScript 2020 (ES11) yang diperkenalkan pada tahun 2020, penggunaan # diperkenalkan untuk mendefinisikan field privat di dalam kelas. Ini memberikan metode yang lebih jelas dibandingkan dengan konvensi privat tradisional di JavaScript (misalnya, nama variabel yang diawali dengan garis bawah). Ini menyediakan cara yang lebih jelas, menggantikan konvensi privat tradisional dalam JavaScript (seperti nama variabel yang diawali dengan garis bawah).

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

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.

1// Cannot access private property directly
2console.log(john.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

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

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

1// Cannot access private method directly
2counter.#logCount(); // SyntaxError: Private field '#logCount' must be declared in an enclosing class

Keuntungan dan Pertimbangan dari Properti Pribadi

Keuntungan

• 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.

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 di JavaScript untuk mengakses properti objek yang bertingkat 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 meletakkan ? sebelum . 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

• Dengan cara ini, Anda juga dapat mengakses elemen array menggunakan optional chaining.

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

• Seperti yang ditunjukkan dalam contoh ini, ini juga dapat diterapkan pada pemanggilan fungsi.

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 logika OR menganggap nilai seperti false, 0, dan '' sebagai falsy, sedangkan operator nullish coalescing hanya menggunakan nilai default ketika nilainya 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