Tingkatkan keterbacaan dan pemeliharaan kode JavaScript Anda dengan mengikuti konvensi penamaan ini.

Sangat penting untuk mempertahankan kesederhanaan, keterbacaan, dan kemudahan pemeliharaan dalam kode Anda untuk mengelola proyek JavaScript yang kompleks. Secara konsisten mengikuti konvensi penamaan adalah kunci untuk mencapai tujuan ini.

Variabel, boolean, fungsi, konstanta, kelas, komponen, metode, fungsi privat, variabel global, dan file adalah beberapa elemen JavaScript yang memerlukan konvensi penamaan yang konsisten. Anda dapat meningkatkan pengorganisasian dan pemahaman kode dengan menerapkan konvensi penamaan standar di semua komponen ini, menghemat waktu dan tenaga dalam jangka panjang.

1. Penamaan Variabel

Dalam JavaScript, data disimpan dalam variabel. Penting untuk memilih nama deskriptif untuk variabel yang mencerminkan fungsinya secara akurat. Anda bisa, misalnya, mengganti nama belakang atau total harga untuk nama variabel daripada X.

Cara yang baik untuk memberi nama variabel adalah sebagai berikut:

instagram viewer 
membiarkan totalHarga = 100;
membiarkan namapengguna = "Yohanes";

Peningkatan keterbacaan kode dapat dicapai dengan menggunakan nama variabel deskriptif

2. Penamaan Boolean

Variabel yang hanya dapat memiliki dua nilai yaitu, baik BENAR atau PALSU, dikenal sebagai Boolean. Sangat penting untuk memilih nama yang sesuai untuk variabel boolean yang menyatakan tujuannya.

Sebagai ilustrasi, alih-alih memilih nama variabel seperti adalah benar, Anda sebaiknya memilih untuk ikut adalah benar atau hasValue.

Pertimbangkan contoh ini:

membiarkan valid = BENAR;
membiarkan hasValue = PALSU;

Dalam contoh ini, nama variabel boolean deskriptif memperjelas apa yang diwakilinya.

3. Fungsi Penamaan

Fungsi dalam JavaScript mengacu pada unit kode mandiri yang dimaksudkan untuk melakukan tugas tertentu. Ini adalah blok kode yang dapat dipanggil atau dipanggil oleh bagian lain dari kode dan beroperasi sebagai entitas independen.

Untuk memberi nama fungsi secara efektif, gunakan nama deskriptif yang menyampaikan tujuannya. Misalnya, alih-alih menciptakan sebuah fungsifoo, pilih nama yang lebih ilustratif seperti validasiUserInput atau hitungTotalHarga.

Contohnya:

fungsihitungTotalHarga(harga, kuantitas) {
kembali harga * kuantitas;
}
fungsivalidasiUserInput(memasukkan) {
kembali masukan !== belum diartikan && masukan !== batal;
}

4. Penamaan Konstanta

Konstanta adalah variabel yang tidak dapat dipindahkan. Saat menamai konstanta, penting untuk menggunakan semua huruf besar dan garis bawah untuk memisahkan kata.

Misalnya:

const MAX_PRICE = 1000;
const MIN_PRICE = 0;

Dalam contoh ini, semua huruf besar dan garis bawah telah digunakan untuk memisahkan kata dalam nama konstanta.

5. Penamaan Kelas

Dalam JavaScript, objek dapat dibuat menggunakan cetak biru yang disebut kelas. Untuk mencapai praktik penamaan yang rapi, sangat penting untuk menjalankan PascalCase, sebuah konvensi penamaan yang mengamanatkan kapitalisasi huruf pertama dari setiap kata.

Ambil, misalnya:

kelasKereta Belanja{
konstruktor(membuat model) {
ini.make = membuat;
ini.model = model;
 }
}

Dalam contoh ini, kelas Kereta Belanja telah diberi nama menggunakan PascalCase, yang berarti huruf pertama dari setiap kata dalam nama kelas telah dikapitalisasi, dan tidak ada spasi atau garis bawah di antara kata-kata tersebut.

6. Penamaan Komponen

Komponen adalah blok bangunan penting dalam pengembangan perangkat lunak modern, khususnya di kerangka kerja seperti Bereaksi, yang menekankan kode yang dapat digunakan kembali.

Dengan memecah antarmuka pengguna atau aplikasi yang rumit menjadi bagian yang lebih kecil dan dapat dikelola, Anda dapat membuatnya komponen yang dapat digunakan kembali di berbagai proyek, mengurangi waktu pengembangan dan meningkatkan kode efisiensi.

Sekali lagi, kami sangat menyarankan penggunaan konvensi penamaan PascalCase untuk penamaan komponen. Ini berarti menggunakan huruf kapital pada huruf pertama setiap kata dalam nama komponen.

Konvensi semacam itu membantu Anda dalam membedakan komponen dari segmen kode lainnya, menyederhanakan identifikasi dan manipulasi.

fungsiTombol(Atribut) {
kembali<tombol>{props.label}tombol>;
}

Dalam contoh ini, konvensi penamaan PascalCase telah digunakan untuk menamai komponen Tombol.

7. Metode Penamaan

Saat memberi nama metode, sangat penting untuk menggunakan nama deskriptif yang berhasil mengomunikasikan apa yang dicapai metode tersebut karena metode adalah fungsi yang berkaitan dengan objek.

Contohnya:

kelasMobil{
konstruktor(membuat model) {
ini.make = membuat;
ini.model = model;
 }
 Nyalakan mesin() {
// kode untuk menghidupkan mesin 
 } 
 stopEngine() { 
// kode untuk menghentikan mesin 
 }
 }
}

Nama deskriptif (Nyalakan mesin, stopEngine) digunakan untuk metode dalam contoh ini, memastikan tujuan yang dimaksudkan mudah dipahami.

8. Penamaan Fungsi Pribadi

Fungsi yang didefinisikan sebagai pribadi dibatasi untuk mengakses hanya di dalam objek tempat mereka didefinisikan. Sangat penting untuk menambahkan garis bawah (_) di depan untuk menunjukkan bahwa fungsi bersifat pribadi.

Berikut contohnya:

kelasMobil{
konstruktor(membuat model) {
ini.make = membuat;
ini.model = model;
 }
 _Nyalakan mesin() {
// kode untuk menghidupkan mesin
 }
 _stopEngine() {
// kode untuk menghentikan mesin
 }
}

Dengan menggunakan garis bawah di depan dalam contoh ini, ini menunjukkan bahwa fungsi bersifat pribadi.

9. Penamaan Variabel Global

Variabel yang diklasifikasikan sebagai global dapat diakses dari bagian mana pun dari basis kode. Saat memberi nama variabel global seperti itu, penting untuk menggunakan nama yang jelas dan deskriptif yang secara efektif menyampaikan tujuan yang dimaksudkan.

Contohnya:

const MAX_PRICE = 1000;
const MIN_PRICE = 0;
fungsiCek harga(harga) {
jika (harga > MAX_PRICE) {
// kode untuk menangani harga tinggi
 } kalau tidakjika (harga < MIN_PRICE) {
// kode untuk menangani harga rendah
 }
}

10. Penamaan File

Organisasi file yang efisien adalah aspek penting dari manajemen proyek JavaScript yang berhasil. Untuk memastikan konvensi penamaan yang disederhanakan dan konsisten, penting untuk memisahkan kata dalam nama file menggunakan huruf kecil dan tanda hubung.

Huruf kecil lebih disukai karena JavaScript adalah bahasa yang peka terhadap huruf besar-kecil, artinya bahasa tersebut memperlakukan huruf kecil dan besar secara berbeda. Menggunakan huruf kecil untuk nama file memastikan konsistensi dan menghindari kebingungan saat mereferensikan file dalam kode.

Tanda hubung digunakan untuk memisahkan kata dalam nama file karena spasi tidak diperbolehkan dalam nama file. Alternatif lain seperti garis bawah atau camelCase juga dapat digunakan, tetapi tanda hubung umumnya lebih disukai karena keterbacaannya.

Menggunakan tanda hubung juga membuat nama file lebih mudah diakses oleh pengguna dengan pembaca layar atau teknologi pendukung lainnya.

aplikasi-saya/
├── src/
 ├── komponen/
 ├── tombol.js
 ├── input-field.js
├── kegunaan/
 ├── string-utils.js
 ├── tanggal-utils.js
├── aplikasi.js
├── index.js

Dalam contoh ini, huruf kecil dan tanda hubung digunakan untuk memisahkan kata dalam nama file.

Pentingnya Mengikuti Konvensi Penamaan dalam JavaScript

Mengikuti konvensi penamaan yang baik adalah aspek penting dalam menulis kode yang bersih dan dapat dipelihara dalam JavaScript. Dengan mengikuti konvensi ini, Anda dapat membuat kode Anda lebih mudah dibaca dan dipelihara, terutama di beberapa Kerangka kerja JavaScript di mana Anda diminta untuk menangani kode besar, yang dapat menghemat waktu dan tenaga Anda dalam jangka panjang.