Dalam pengembangan aplikasi React, menangani array yang dapat bernilai falsy adalah hal yang penting untuk mencegah error runtime dan menjaga performa aplikasi.
Ada dua pendekatan utama yang bisa digunakan untuk menangani situasi ini: Optional Chaining dan Utility Class.
Misalkan, saya memiliki data dengan entity seperti ini,
Pada class RepositoryConnectionEntity properti nodes adalah falsy array yang bisa bernilai null ataupun undefined.
Artinya, ketika array tersebut digunakan dan tidak ditangani dengan baik bisa menyebabkan error runtime.
Bagaimana cara menanganinya?
Pendekatan Optional Chaining
Optional Chaining adalah fitur Javascript yang memungkinkan kita mengakses properti atau elemen dari objek atau array yang mungkin bernilai null atau undefined tanpa menyebabkan error.
Penanganan data RepositoryConnectionEntity,
Apa kelebihan dan kekuranganya?
Kelebihan Optional Chaining
- Sederhana dan Mudah Dibaca: Kode yang menggunakan optional chaining biasanya lebih singkat dan mudah dipahami.
- Kinerja: Lebih sedikit overhead dibandingkan dengan membuat instans kelas.
Kekurangan Optional Chaining
- Tidak Ada Abstraksi Tambahan: Tidak menyediakan metode tambahan atau abstraksi yang lebih kuat untuk manipulasi array.
Pendekatan Utility Class
Utility Class adalah kelas khusus yang dibuat untuk menangani operasi tertentu, seperti manipulasi array. Pendekatan ini lebih fleksibel dan dapat menangani operasi yang lebih kompleks.
Contoh utility class,
Pada kelas ArrayUtils, jika nilai pada contructor tidak valid, properti value akan tetap undefined.
Method map menggantikan optional chaining dengan mengembalikan null jika value falsy, dan Anda bisa menggantinya dengan nilai default yang diinginkan.
Kelas ini mempermudah penanganan array yang falsy dan saya menggunakannya pada kelas turunan RepositoryConnectionEntity, bukan langsung pada komponen.
Penanganan pada komponen,
Dengan pendekatan ini, kita tidak perlu menggunakan class utility langsung pada komponen atau optional chaining. Kita juga bisa menyesuaikan method mapRepos jika diperlukan.
Lalu, apa kelebihan dan kekurangan pendekatan ini?
Kelebihan Class Utility
- Modularitas: Memisahkan logika umum (misal pemrosesan array) dari logika spesifik kelas.
- Reusabilitas: kelas ArrayUtils dapat digunakan kembali di berbagai tempat dalam aplikasi.
- Keterbacaan: Kode menjadi lebih mudah dibaca dan dipahami karena setiap kelas memiliki tanggung jawab yang jelas.
Kekurangan Class Utility
- Kompleksitas Tambahan: Memperkenalkan kelas tambahan yang mungkin tidak diperlukan dalam kasus sederhana.
- Kinerja: Ada sedikit overhead dalam membuat instance ArrayUtils, tetapi ini biasanya dapat diabaikan kecuali dalam aplikasi yang sangat kritis terhadap kinerja.
Kesimpulan
- Jika Anda hanya membutuhkan penanganan sederhana dan fleksibel untuk nilai array yang mungkin undefined atau null, penggunaan optional chaining adalah pilihan terbaik. Kode menjadi lebih sederhana dan mudah dibaca.
- Jika Anda membutuhkan logika yang lebih kompleks atau abstraksi tambahan untuk menangani array, seperti metode utilitas tambahan atau validasi yang lebih kuat, menggunakan class adalah pilihan yang lebih baik.