10 Konvensi Penamaan JavaScript Penting yang Harus Diketahui Setiap Pengembang

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.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

Cara yang baik untuk memberi nama variabel adalah sebagai berikut:

 let totalPrice = 100;
let userName = "John"; 

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 benarAnda sebaiknya memilih untuk ikut adalah benar atau hasValue.

Pertimbangkan contoh ini:

 let isValid = true;
let hasValue = false; 

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

3. Penamaan Fungsi

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 membuat fungsi foopilih nama yang lebih ilustratif seperti validasiUserInput atau hitungTotalHarga.

Contohnya:

 function calculateTotalPrice(price, quantity) {
 return price * quantity;
}
function validateUserInput(input) {
 return input !== undefined && input !== null;
}
 

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:

 class ShoppingCart {
 constructor(make, model) {
   this.make = make;
   this.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 dalam kerangka kerja seperti React, 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 membuat komponen yang dapat digunakan kembali di berbagai proyek, mengurangi waktu pengembangan, dan meningkatkan efisiensi kode.

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.

 function Button(props) {
  return <button>{props.label}</button>;
} 

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:

 class Car {
 constructor(make, model) {
   this.make = make;
   this.model = model;
 }
 startEngine() {
   
   } 
 stopEngine() { 
   
   }
 }
}
 

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:

 class Car {
 constructor(make, model) {
   this.make = make;
   this.model = model;
 }
 _startEngine() {
   
 }
 _stopEngine() {
   
 }
}
 

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;
function checkPrice(price) {
 if (price > MAX_PRICE) {
   
 } else if (price < MIN_PRICE) {
   
 }
}
 

10. Memberi Nama 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.

 my-app/
├── src/
  ├── components/
    ├── button.js
      ├── input-field.js
├── utils/
     ├── string-utils.js
     ├── date-utils.js
├── app.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.