Ketahui Cara Konvensi Penamaan Javascript Untuk Hasilkan Kode yang Berkualitas

Salah satu hal krusial yang seringkali terabaikan oleh para developer adalah penerapan konvensi penamaan dengan tepat. Sayangnya, tak jarang dari mereka justru menghasilkan penamaan yang kompleks dan sulit dipahami.

Menjaga penulisan kode kalian agar tetap sedarhana mudah dibaca dan dipelihara menjadi sangat penting dalam mengelola proyek Javascript yang kompleks. Kunci utama untuk menjaga hal ini terletak pada konsistensi dalam menggunakan konvensi penamaan.

Variabel, boolean, fungsi, konstanta, kelas, komponen, metode dan file, semuanya merupakan elemen-elemen dalam Javascript yang membutuhkan penerapan konvensi penamaan yang konsisten. Dengan menerapkan konvensi penamaan standar pada semua komponen ini, kalian dapat meningkatkan pengorganisasian dan pemahaman kode, menghasilkan efisiensi dalam jangka panjang sambil menghemat waktu dan tenaga. Lalu, bagaimana kita menerapkan konvensi penamaan yang konsisten? Let’s find out now!

Konvensi Penamaan untuk Variabel

Penamaan variabel pada Javascript bersifat case-sensitive, di mana penggunaan lowercase dan uppercase dianggap berbeda*.* Kalian bisa saja mendefinisikan suatu variabel unik untuk menyimpan nama kucing, seperti:

var CatName = 'Garfield';
var catName = 'Kitty';
var CATNAME = 'Ollie';

Namun, pendekatan yang paling direkomendasikan adalah menggunakan camel case untuk semua jenis variabel dalam Javascript. Hal ini dapat memastikan tidak ada variabel ganda dengan nama yang sama.

Gunakan nama variabel yang bersifat deskriptif dan menjelaskan tentang nilai yang disimpan. Alih-alih menggunakan variabel name untuk menyimpan nama kucing, gunakanlah variabel catName yang lebih memberikan makna dari nilai yang disimpan.

// salah
var d = 'Garfield';
// salah
var name = 'Garfield';
// benar
var catName = 'Garfield';

Konvensi Penamaan untuk Boolean

Untuk variabel boolean, sebaiknya gunakan awalan is atau has. Misalnya, jika kalian membutuhkan variabel boolean untuk memeriksa apakah seekor kucing memiliki pemilik, gunakan hasOwner sebagai nama variabel. Contoh seperti berikut:

// salah
var owner = true;
// benar
var hasOwner = true;

Konvesi Penamaan untuk Fungsi

Sama halnya dengan variabel penulisan nama fungsi juga bersifat case-sensitive. Sehingga pendekatan camel case direkomendasikan untuk mendeklarasikan nama fungsi. Selain itu, gunakan kata benda dan kata kerja deskriptif sebagai awalan. Misalnya, jika kalian mendeklarasikan sebuah fungsi untuk mendapatkan nama, nama fungsi tersebut seharusnya getName. Perhatikan contoh berikut.

// salah
function name(catName, ownerName) {
  return '${catName} ${ownerName}';
}

// benar
function getName(catName, ownerName) {
  return '${catName} ${ownerName}';
}

Konvensi Penamaan Konstanta

Konstanta dalam Javascript juga bersifat case-sensitive, tetapi sebaiknya ditulis dalam uppercase atau huruf besar karena konstan tersebut tidak berubah. Penggunaan huruf kapital juga dapat membantu kalian untuk membedakan konstanta dari variabel biasa.

Semua konstanta sebaiknya didefinisikan di awal file, method, atau class. Berikut contoh penamaan konstanta untuk menyimpan nilai phi:

const PHI = 3.14159;

Apabila variabel konstanta yang kalian buat memiliki lebih dari satu kata, gunakan underscore ( _ ) untuk memisahkan tiap kata-nya. Berikut contohnya:

const HOURS_IN_DAY = 24;
const USER_AGE = 19;

Konvensi Penamaan untuk Kelas

Aturan konvensi penamaan untuk kelas Javascript mirip dengan fungsi. Gunakan judul yang deskriptif untuk menjelaskan kemampuan kelas dengan menggunakan Pascal case, yang berarti setiap kata dimulai dengan huruf kapital tanpa ada pemisahan menggunakan garis bawah.

Pascal case memudahkan untuk melihat item mana yang merupakan class dan item mana yang bukan. Berikut adalah contoh penulisan konvensi penamaan class:

class Task {
  constructor(description, priority) {
    this.description = description;
    this.priority = priority;
  }

var urgentTask = new Task("Complete urgent report", "High");

Konvensi Penamaan untuk Komponen

Komponen Javascript banyak digunakan dalam frontend framework seperti React. Meskipun komponen digunakan dalam DOM, lebih baik memperlakukannya seperti class dan menggunakan Pascal case untuk menentukan nama.

Berikut adalah contoh penamaan komponen dengan menggunakan konvensi PascalCase:

// salah
function userCard(data) {
  return (
    <div>
      <span>User: {data.username}</span>
      <span>Email: {data.email}</span>
    </div>
  );
}

// benar
function UserCard(data) {
  return (
    <div>
      <span>User: {data.username}</span>
      <span>Email: {data.email}</span>
    </div>
  );
}

Dalam contoh di atas, nama komponen userCard pada contoh yang pertama ditulis dengan huruf kecil pada awal kata. Dalam contoh yang kedua, nama komponen UserCard ditulis dengan menggunakan Pascal Case, yang meningkatkan keterbacaan dan mengikuti konvensi penamaan yang umum untuk komponen.

Penting untuk diingat bahwa konvensi penamaan dapat bervariasi tergantung pada kerangka kerja atau teknologi yang digunakan. Dalam konteks React, penggunaan Pascal Case adalah umum, tetapi selalu disarankan untuk mengikuti pedoman penamaan yang diberikan oleh kerangka kerja atau komunitas proyek yang kalian ikuti.

Konvensi Penamaan untuk Metode

Meskipun terdapat beberapa perbedaan, struktur fungsi dan metode pada Javascript cukup mirip. Oleh karena itu, aturan konvensi penamaan sama. Gunakan Camel Case untuk mendeklarasikan metode Javascript dan gunakan kata kerja sebagai awalan untuk membuat nama lebih bermakna.

Berikut adalah contoh penggunaan konvensi penamaan untuk metode:

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    console.log(`The ${this.species} named ${this.name} makes a sound.`);
  }
}

// Contoh penggunaan
var lion = new Animal("Simba", "Lion");

lion.makeSound(); // The Lion named Simba makes a sound.

Dalam contoh diatas, class Animal memiliki properti name dan speciesserta metode makeSound yang mengikuti konvensi Camel Case untuk penamaan metode.

Konvensi Penamaan untuk Nama File

Sebagian besar server web bersifat case-sensitive dalam menangani file. Sebagai contoh, file dengan nama "mountain.jpg" dianggap berbeda dengan "Mountain.jpg". Di sisi lain, beberapa server web, seperti Microsoft's IIS (Internet Information Services), tidak mempedulikan perbedaan huruf besar dan kecil. Pada server seperti ini, kalian bisa menggunakan "mountain.jpg" atau "Mountain.jpg" untuk mengakses file yang sama.

Namun, perlu diperhatikan bahwa jika kalian beralih dari server yang bersifat case-insensitive ke server yang bersifat case-sensitive, bahkan kesalahan kecil dalam penulisan huruf bisa menyebabkan situs web mengalami crash atau tidak dapat diakses.

Oleh karena itu, disarankan untuk menggunakan nama file dengan huruf kecil pada semua server, meskipun server tersebut mendukung case-sensitive. Hal ini membantu mencegah masalah potensial yang dapat timbul saat melakukan perpindahan antar lingkungan server yang memiliki aturan penanganan file yang berbeda.

Kalian juga dapat memanfaatkan tanda hubung untuk memisahkan kata pada nama file, alih-alih menggunakan spasi. Alternatif lain seperti underscore ( _ ) atau Camel Case juga dapat digunakan, tetapi tanda hubung lebih sering digunakan karena lebih mudah terbaca.

Berikut adalah contoh struktur direktori proyek JavaScript dengan menerapkan konvensi penamaan file:

my-project/
├── src/
│   ├── components/
│   │   ├── header-component.js
│   │   ├── sidebar-component.js
│   ├── styles/
│   │   ├── main-styles.css
│   │   ├── responsive-styles.css
├── scripts/
│   ├── main-script.js
│   ├── utility-functions.js
├── pages/
│   ├── home-page.html
│   ├── about-us-page.html
│   ├── contact-page.html
├── index.html

Kesimpulan

Konvensi penamaan dalam pengembangan JavaScript adalah suatu aspek yang sering terabaikan namun memegang peran krusial dalam menciptakan kode yang bersih, keterbacaan, dan mudah dipelihara. Pada artikel ini, kita telah membahas pentingnya menjaga konsistensi dalam penerapan konvensi penamaan pada berbagai elemen seperti variabel, boolean, fungsi, konstanta, kelas, komponen, metode dan file.

Menerapkan Camel case untuk variabel dan metode, menggunakan awalan is atau has untuk boolean, mengadopsi Pascal case untuk kelas dan komponen, serta menetapkan konstanta dengan huruf besar, adalah langkah-langkah yang tidak hanya meningkatkan keterbacaan kode tetapi juga memberikan fondasi kuat untuk pemeliharaan jangka panjang.

Setelah mengetahui pedoman yang telah diuraikan dalam artikel ini, kalian dapat mempraktekkannya dalam proyek Javascript kalian agar proyek kalian dapat berjalan dengan lancar, lebih mudah dikelola, dan siap untuk pertumbuhan kedepannya. Kalian juga dapat melatih ilmu ini sambil belajar pemahaman Javascript lewat kelas-kelas di BuildWithAngga seperti Kelas Online Gratis Vanilla Javascript atau Kelas Online Vanilla JavaScript OOP & LocalStorage: Web Task Management. Join kelas-kelas di BuildWithAngga sekarang juga. Keep learning and see you at class!😉✨