Javascript

Style Guide di JavaScript

Selalu gunakan konvensi pengkodean yang sama untuk semua proyek JavaScript.

Konvensi Coding JavaScript

Konvensi pengkodean adalah pedoman style untuk pemrograman. Mereka biasanya mencakup:

  • Aturan penamaan dan deklarasi untuk variabel dan fungsi.
  • Aturan penggunaan spasi, indentasi, dan komentar.
  • Praktik dan prinsip pemrograman

Kualitas keamanan konvensi pengkodean:

  • Meningkatkan tingkat keterbacaan kode
  • Mnejadikan pemeliharaan kode lebih mudah

Konvensi pengkodean dapat menjadi dokumentasi aturan untuk diikuti tim, atau hanya menjadi praktik pengkodean kita sendiri.

Anda juga harus membaca bab “Best Practices” berikutnya, dan mempelajari cara menghindari kesalahan coding.

Nama Variabel

Disarankan untuk menggunakan camelCase untuk nama pengenal (variabel dan fungsi).

Semua nama dimulai dengan huruf.

Contoh:

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Ruang di Sekitar Operator

Selalu beri spasi di sekitar operator (= + – * /), dan setelah koma.

Contoh:

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

Kode Indentasi

Selalu gunakan 2 spasi untuk indentasi blok kode:

Fungsi:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

Jangan gunakan tab (tabulator) untuk indentasi. Editor yang berbeda menafsirkan tab secara berbeda.

Aturan Statement

Aturan umum untuk Statement sangat sederhana, yaitu:

Selalu akhiri pernyataan sederhana dengan titik koma.

Contoh:

var values = ["Volvo", "Saab", "Fiat"];

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Aturan umum untuk statement kompleks (gabungan), yaitu:

  • Letakkan kurung buka di akhir baris pertama.
  • Gunakan satu spasi sebelum braket pembuka.
  • Letakkan braket penutup pada baris baru, tanpa spasi di depan.
  • Jangan akhiri pernyataan kompleks dengan titik koma.

Fungsi:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}
for (i = 0; i < 5; i++) {
  x += i;
}
Conditionals:
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

Aturan Objek

Aturan umum untuk definisi objek:

  • Tempatkan kurung buka pada baris yang sama dengan nama objek.
  • Gunakan titik dua ditambah satu spasi antara setiap properti dan nilainya.
  • Gunakan tanda kutip di sekitar nilai string, bukan di sekitar nilai numerik.
  • Jangan tambahkan koma setelah pasangan nilai properti terakhir.
  • Tempatkan braket penutup pada baris baru, tanpa spasi.
  • Selalu akhiri definisi objek dengan titik koma.

Contoh

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Objek pendek dapat ditulis dikompresi, dalam satu baris, hanya menggunakan spasi antar properti, seperti ini:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Panjang Garis <80

Untuk meningkatkan readability, hindari baris dengan panjang lebih dari 80 karakter.

Jika pernyataan JavaScript tidak pas pada satu baris, tempat terbaik untuk memecahkannya, adalah setelah operator atau koma.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Halaman Web Saya</h2>

<p> Tempat terbaik untuk memecahkan baris kode adalah setelah operator atau koma. </p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly.";
</script>

</body>
</html>

Konvensi Penamaan

Selalu gunakan konvensi penamaan yang sama untuk semua kode Anda. Sebagai contoh:

  • Nama variabel dan fungsi ditulis sebagai camelCase
  • Variabel global ditulis dalam UPPERCASE
  • Konstanta (seperti PI) ditulis dalam UPPERCASE

Haruskah menggunakan hyp-hens, camelCase, atau under_scores pada nama variabel?

Ini adalah pertanyaan yang sering didiskusikan oleh para programmer. Jawabannya tergantung masing-masing orang.

Tanda hubung dalam HTML dan CSS:

Atribut HTML5 dapat dimulai dengan data- (data-quantity, data-price).

CSS menggunakan tanda hubung dalam nama-properti (ukuran-font).

Tanda hubung bisa dianggap sebagai upaya pengurangan. Tanda hubung tidak diperbolehkan dalam nama JavaScript.

Garis bawah:

Banyak programmer lebih suka menggunakan garis bawah (date_of_birth), terutama dalam database SQL.

Garis bawah sering digunakan dalam dokumentasi PHP.

PascalCase:

PascalCase paling disukai oleh programmer C.

camelCase

camelCase sering digunakan pada JavaScript, jQuery, dan pustaka JavaScript lainnya.

Jangan memulai nama dengan tanda $. Ini akan membuat konflik dengan banyak nama pustaka JavaScript.

Memuat JavaScript dalam HTML

Gunakan sintaks sederhana untuk memuat skrip eksternal (atribut type tidak diperlukan):

<script src="myscript.js"></script>

Mengakses Elemen HTML

Konsekuensi menggunakan style HTML yang “tidak rapi”, dapat menyebabkan kesalahan JavaScript.

Kedua pernyataan JavaScript ini akan menghasilkan hasil yang berbeda:

var obj = getElementById("Demo")

var obj = getElementById("demo")

Jika memungkinkan, gunakan konvensi penamaan yang sama (seperti JavaScript) di HTML.

Ekstensi File

File HTML harus memiliki ekstensi .html (.htm diperbolehkan).

File CSS harus memiliki ekstensi .css.

File JavaScript harus memiliki ekstensi .js.

Gunakan Nama File Huruf Kecil

Sebagian besar server web (Apache, Unix) peka huruf besar kecil tentang nama file:

london.jpg tidak dapat diakses sebagai London.jpg.

Server web lain (Microsoft, IIS) tidak peka huruf besar kecil:

london.jpg dapat diakses sebagai London.jpg atau london.jpg.

Jika menggunakan campuran huruf besar dan kecil, maka harus sangat konsisten.

Jika berpindah dari case insensitive, ke case sensitive server, bahkan kesalahan kecil dapat merusak situs web.

Untuk menghindari masalah ini, selalu gunakan nama file dengan huruf kecil (jika memungkinkan).

Performa

Konvensi pengkodean tidak digunakan oleh komputer. Sebagian besar aturan berdampak kecil pada pelaksanaan program.

Indentasi dan spasi ekstra tidak signifikan dalam skrip kecil.

Untuk kode dalam pengembangan, readability harus diutamakan. Skrip produksi yang lebih besar harus diperkecil.


Catur Kurnia Sari

Share
Tags: javascript