Style Guideline JavaScript

Style guideline atau code convention adalah aturan standar dalam menulis code supaya code yang ditulis memiliki bentuk yang seragam baik dalam style maupun format.

Manfaat konsisten dalam menggunakan style guideline yaitu:

  • Memudahkan code untuk dibaca dan dimengerti
  • Memudahkan code untuk di-edit atau di-update

Ada berbagai macam style guide. Berikut ini adalah beberapa style guide yang umum digunakan:

1. Konsisten dalam style penamaan

Ada beberapa jenis style dalam menamakan variable, object, array, atau function:

  • Menggunakan garis bawah sebagai pemisah: [nama_buah].
  • Menggunakan huruf kecil di awal kemudian huruf besar sebagai awal kata selanjutnya: [namaBuah]. Style penamaan seperti ini lebih dikenal dengan nama camelCase.

Pilih salah satu style dan konsisten dalam menggunakan style tersebut.

Catatan

  • Nama GLOBAL variable ditulis menggunakan huruf besar semua.
  • Garis strip [-] dilarang dalam penamaan JavaScript karena bisa dikira symbol kurang.
  • Style penamaan dengan garis bawah [_] sebagai pemisah kata biasanya digunakan dalam SQL databases dan PHP.
  • Style penamaan dengan huruf besar di awal kemudian huruf besar sebagai awal kata selanjutnya [NamaBuah] biasanya digunakan dalam bahasa pemrograman C. Style penamaan seperti ini lebih dikenal dengan nama PascalCase.
  • Style camelCase biasanya digunakan dalam JavaScript, jQuery dan JavaScript libraries.

2. Variable

Satukan semua declare variable jika ada lebih dari satu declare variable.

Sebelum disatukan:

var stringA;
var angkaA;
var namaArray;
var namaObject;

Sesudah disatukan:

var stringA,
    angkaA,
    namaArray,
    namaObject;

Selalu initialize variable (memberikan nilai awal pada variable) saat variable tersebut di-declare:

var stringA = "",
    angkaA = 0,
    namaArray = [],
    namaObject = {};

Berikut ini adalah beberapa manfaat dari melakukan initialize pada variable saat variable tersebut di-declare:

  • Menjadikan script lebih bersih
  • Menghindarkan variable dengan nilai undefined

Satukan semua declare variable dan tuliskan pada bagian atas script atau function:

<script>
var stringA = "",
    angkaA = 0,
    namaArray = [],
    namaObject = {};

document.write(stringA + "<br />");
document.write(angkaA + "<br />");
document.write(namaArray + "<br />");
document.write(namaObject);
</script>

Berikut ini adalah beberapa manfaat dari menuliskan semua declare variable pada bagian atas script atau function:

  • Menjadikan script lebih bersih
  • Mudah mencari variable yang sudah pernah di-declare karena semua variable tersebut berada pada satu tempat
  • Menghindarkan adanya dua kali declare variable

Catatan

JavaScript normalnya memindahkan semua declare variable ke bagian atas script atau function (hoisting).

3. Selalu declare local variable

Semua variable yang berada di dalam function harus di-declare sebagai local variable.

Jika local variable tidak di-declare menggunakan [var] keyword maka variable tersebut akan berubah menjadi global variable.

function tampilkan() {
    var a = 2;
    document.write(a);
};

Catatan

Jika strict mode diaktifkan maka semua variable yang tidak di-declare akan menyebabkan error.

4. Gunakan comparison operator [===]

Hindari menggunakan comparison operator [==], gunakanlah comparison operator [===].

Operator [==] selalu mengubah salah satu jenis data yang berbeda menjadi jenis data yang cocok.

Berikut ini adalah contoh penggunaan operator [==]:

Code JavaScript 1:

<Script>
var a = Boolean(0 == "");     // [0] sama dengan false, [""] sama dengan false
var b = Boolean(1 == "1");    // [1] sama dengan true, ["1"] sama dengan true
var c = Boolean(1 == true);

document.write(a + "<br />");
document.write(b + "<br />");
document.write(c);
</script>

Hasil code JavaScript 1:

true
true
true

Dengan operator [==] maka salah satu dari kedua jenis data yang dibandingkan akan diubah menjadi jenis data yang mirip dengan satunya.

Berikut ini adalah contoh penggunaan operator [===]:

Code JavaScript 2:

<script>
var a = Boolean(0 === "");
var b = Boolean(1 === "1");
var c = Boolean(1 === true);

document.write(a + "<br />");
document.write(b + "<br />");
document.write(c);
</script>

Hasil code JavaScript 2:

false
false
false

Operator [===] berguna untuk membandingkan nilai dan jenis data sehingga operator [===] tidak mengubah jenis data dua buah nilai yang dibandingkan.

5. Spasi

Selalu gunakan spasi sebelum dan setelah operator [ = + – * / ]:

var a = b + c;

Tambahkan spasi setelah koma [,]:

var values = ["Mangga", "Jeruk", "Jambu"];

Tambahkan spasi setelah symbol comment satu baris [//]:

// Comment satu baris disini
// Masukkan nilai [2] ke dalam [a]
var a = 2;

6. Indent

Indent adalah jarak antara margin sebelah kiri dengan content atau text.

Selalu gunakan 4 spasi untuk indent:

function perhitungan() {
    document.write("Selamat pagi!");
};

Catatan

Jangan gunakan tab untuk indent. Beberapa editor JavaScript memperlakukan tab dengan berbeda.

7. Panjang statement

Hindari menulis statement lebih panjang dari 80 character.

Pisahkan sebuah statement menjadi beberapa baris jika statement tersebut lebih panjang dari 80 character:

document.getElementById("salam").innerHTML =
    "Selamat pagi!";

8. Akhiri statement dengan symbol titik koma [;]

Selalu gunakan symbol titik koma [;] untuk mengakhiri statement:

var a = 2;
var b = 3;
document.write(a);

9. Function

Berikut ini adalah beberapa style guide untuk function:

  • Pisahkan function menjadi tiga bagian.
  • Berikan spasi setelah koma pada bagian parameter (p1, p2).
  • Berikan spasi setelah symbol penutup kurung ) pada bagian parameter.

Contoh:

function tampilkan(p1, p2) {     // Bagian pertama
    document.write();            // Bagian kedua
};                               // bagian ketiga

Jika tidak ada parameter, jangan ada spasi antara symbol kurung pada parameter ().

function tampilkan() {

Berikut ini adalah contoh jelek dalam menulis function:

function tampilkan(p1,p2){document.write("Selamat pagi!");};

10. Array dan object

Tuliskan array atau object dalam satu baris jika isi dari array atau object tersebut tidak terlalu panjang:

var nama_buah = ["Apel", "Anggur"];

var motor = {merk:"Honda", model:"matic"};

Tuliskan array atau object dalam beberapa baris jika isi dari array atau object tersebut terlalu panjang:

var nama_buah = [
    "Apel",
    "Anggur",
    "Durian",
];

var motor = {
    merk:"Honda",
    model:"matic",
    kelas:110,
    warna:"putih"
};

11. Hindari menggunakan string object, number object, atau boolean object

Selalu gunakan string, number atau boolean dalam bentuk primitive value dan bukan dalam bentuk object.

Menggunakan string, number, atau boolean dalam bentuk object dapat memperlambat jalannya program dan dapat menghasilkan sesuatu yang tidak diinginkan.

Berikut ini adalah contoh string, number dan boolean dalam bentuk primitive value:

var a = "Selamat Pagi!";   // String primitive value
var b = 123;               // Number primitive value
var c = true;              // Boolean primitive value

Berikut ini adalah contoh string, number dan boolean dalam bentuk object:

var a = new String("Selamat Pagi!");   // String object
var b = new Number(123);               // Number object
var c = new Boolean(true);             // Boolean object

12. Hindari menggunakan new Object()

Ada beberapa macam cara membuat object, salah satunya adalah dengan new Object():

var motor = new Object();
motor.merk = "Honda";
motor.model = "matic";
motor.kelas = 110;

Hindari menggunakan new Object() seperti di atas dalam membuat object. Gunakanlah code berikut dalam membuat object:

var motor = {
    merk:"Honda",
    model:"matic",
    kelas:110
};

13. Sederhanakan code

Code yang lebih sederhana lebih bersih dan lebih mudah dibaca jika kamu sudah terbiasa.

Array

Code array umum:

var namaMakanan = [];
namaMakanan[0] = "Batagor";
namaMakanan[1] = "Gado-gado";
namaMakanan[2] = "Nasi goreng";

Code array sederhana:

var namaMakanan = [
    "Batagor",
    "Gado-gado",
    "Nasi goreng"
];

if statement

Code umum:

var jam = 14;
if (jam < 11){
    document.write("Selamat Pagi!");
} else {
    document.write("Selamat Siang!");
};

Code sederhana:

var jam = 14;
jam < 11 ? a = "Selamat Pagi!" : a = "Selamat Siang!";
document.write(a);

Assignment operator

Code umum:

var a = 2;
a = a + 3;
document.write(a);

Code sederhana:

var a = 2;
a += 3;
document.write(a);

14. Gunakan huruf kecil untuk nama file

Beberapa web server memperlakukan huruf besar dan kecil berbeda (Apche dan Linux).

Misalkan saja untuk nama file, file dengan nama [bandung.js] tidak bisa dibuka dengan nama [Bandung.js].

Beberapa web server lainnya (Microsoft dan IIS) memperlakukan huruf besar dan kecil dengan sama.

Misalkan saja sebuah nama file [bandung.js] bisa dibuka dengan memanggilnya [bandung.js] atau [Bandung.js].

Catatan

Selalu gunakan huruf kecil untuk nama file demi menghindari masalah dikemudian hari.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>