Friday, January 16, 2015

Tutorial Javascript Part 25: Membuat kode program yang baik

Javascript adalah salah satu bahasa pemrograman yang rumit dan rentan akan kesalahan penulisan. Saya sendiri kadang dibuat pusing karena script yang telah saya buat ternyata tidak bekerja. Untuk memudahkan proses debug dan meminimalkan kesalahan sangat perlu untuk membuat kode program yang baik.

Hal ini karena ada beberapa hal yang baru dan berbeda dalam pemrograman javascript seperti penggunaan tanda "+" untuk menggabungkan string, hal ini tentu berbeda dengan pemrograman lain seperti c++ dan php yang menggunakan tanda titik. Membuat kode program yang baik diantaranya adalah mematuhi aturan-aturan penulisan sehingga tidak membingungkan proses selanjutnya.

Berikut ini hal-hal yang perlu diperhatikan untuk membuat kode program javascipt yang baik:

1. Mendeklarasikan semua variabel pada bagian atas

Pada javascript kita bisa mendeklarasikan variabel setelah ia digunakan. Dengan kata lain kita bisa menggunakan variabel sebelum dideklarasikan. Hal ini membuat kita kadang tidak menyadari kehadiran dan deklarasi sebuah variabel pada program.

Karena javascript tidak mengijinkan penggunaan variabel sebelum dideklarasikan maka deklarasi variabel sangat penting agar program yang kita buat dapat bekerja dengan baik. Jadi mendeklarasikan variabel pada bagian atas akan menolong kita menghindari error atau saat kita melakukan proses debug dan juga saat mewariskan program kita kepada orang lain.
var x="Hello";
elemen = document.getElementById("view");
elemen.innerHTML = x ;  

2. Memberi nama variabel dan fungsi dengan model camelCase

Penulisan model camelCase adalah penulisan dengan huruf besar pada kata yang kedua. Sebelumnya perlu diketahui bahwa dalam menulis dua buah identifier pada prgram kita biasa gandeng atau dipisah menggunakan strip atau dengan underscore. Misalnya variabel nama siswa kita tulis dengan namasiswa, nama-siswa atau nama_siswa.

Pada javascript dianjurkan untuk menulis dengan model camelCase misalnya namaSiswa. Hal ini karena javascript tidak mengijinkan penggunaan tanda strip (-).
var namaSiswa="Sabrina";

function displaySiswa () {
var elemen = document.getElementById("view");
elemen.innerHTML = namaSiswa ;  
}

3. Menghindari penggunaan variabel global

Dalam pembuatan program sebaiknya dihindari penggunaan variabel secara global baik disengaja maupun tidak disengaja. Penggunaan variabel global secara tidak sengaja dapat terjadi ketika kita menuliskan variabel didalam function tanpa keyword var. Variabel global dapat di overwrite oleh script lain sehingga dapat membingungkan penanganan variabel tersebut.
Contoh penggunaan variabel secara global dapat dilihat pada program diatas yaitu variabel namaSiswa yang ditaruh diluar function.

4. Selalu gunakan variabel local pada function

Penggunaan variabel secara lokal didalam function sangat dianjurkan agar tidak tumpang tindih antara function satu dengan function lain dalam menangani variabel tersebut baik disengaja atau tidak. Penggunaan variabel secara lokal didalam function akan memudahkan proses pengaturan penanganan variabel didalam program.
Sebagai contoh kta mengubah inisialisasi variabel namaSiswa pada contoh ke dalam function berikut ini :
function displaySiswa () {
var namaSiswa="Sabrina";
var elemen = document.getElementById("view");
elemen.innerHTML = namaSiswa ;  
}
5. Memberi spasi pada penggunaan operator
Hal ini hanya berfungsi memudahkan pembacaan program saja. Perhatikan contoh berikut ini :
var a=b+c; //terlihat rumit dan tidak enak dibaca
var a = b + c; //terlihat lebih baik dan enak dibaca

6. Gunakan indent pada baris

Penggunaan indent pada baris diperuntukkan untuk statemen-statemen yang berada didalam sebuah blok program, misalnya kita membuat function, maka statemen-statemen didalam function tersebut kita buat agak menjorok agar terlihat perbedaan dan mudah dalam melokalisir kode program.
Contoh penggunaan inden baris pada function displaySiswa() diatas :
function displaySiswa () {
    var namaSiswa="Sabrina";
    var elemen = document.getElementById("view");
    elemen.innerHTML = namaSiswa ;  
}

7. Mematuhi aturan umum penulisan statemen berikut ini :

  • Selalu akhiri tiap statemen dengan titik koma (semicolon).
  • Taruh kurung kurawal buka pada akhir baris pertama.
  • Beri spasi satu karakter sebelum kurung kurawal buka tadi.
  • Taruh kurung kurawal tutup pada baris tersendiri tanpa inden spasi.

8. Mematuhi aturan umum penulisan object berikut ini :

  • Taruh kurung kurawal buka pada baris yang sama dengan nama object.
  • Tambahkan titik dua dan satu spasi diantara properti dan nilainya.
  • Selalu gunakan tanda petik dua pada penulisan string dan tanpa petik untuk penulisan angka.
  • Jangan menambahkan koma pada pasangan properti terakhir.
  • Taruh kurung kurawal tutup pada baris tersendiri tanpa inden spasi.
  • Selalu akhiri penulisan object dengan tanda titik koma.

9. Sebaiknya panjang satu baris tidak melebihi 80 karakter

Dalam satu statemen program seringkali kita mendapati jumlah karakter yang panjang sehingga harus menggeser layar kekanan untuk membaca program tersebut. Hal ini membuat proses pembacaan program menjadi sulit karena kita biasanya hanya menggunakan scrol ke atas dan ke bawah.

Untuk mengatasi hal itu sebaiknya kita menetapkan jumlah karakter dalam satu baris tidak melebihi 80 karakter. Caranya bisa bermacam-macam seperti mempersingkat elemen seperti pada contoh diatas. Atau bisa juga dengan cara menaruh kelebihan huruf pada baris selanjutnya.

Contoh cara membatasi panjang satu baris agar tidak melebihi 80 karakter :
document.getElementById("view").innerHTML = "Nama saya Sabrina, Saya lahir di Jepara Propinsi Jawa Tengah" ;
//penulisan sebaiknya diperpendek dengan cara berikut ini
document.getElementById("view").innerHTML = 
"Nama saya Sabrina, Saya lahir di Jepara Propinsi Jawa Tengah" ;

10. Membuat variabel untuk mempersingkat DOM

Satu hal yang pasti dari perintah DOM adalah sintaknya yang menurut saya terlalu panjang. Seperti misalnya document.getElementById("view").innerHTML untuk menuliskan teks pada elemen html "view". Jika ditulis berulang akan membuat script program kita terlihat padat dan rumit/sumpek.

Untuk mempersingkat penulisan, nama elemen dapat kita wakili dengan penggunaan variabel seperti contoh berikut ini :
document.getElementById("view").innerHTML = "Sabrina";

//dapat disingkat dengan cara berikut ini:
var eView = document.getElementById("view");
eView.innerHTML = namaSiswa ;

//huruf e merupakan pengganti document.getElementById
//dan View merupakan nama elemen html-nya
//eView ditulis dengan model camelCase

11. Gunakan komentar untuk keterangan program

Penggunaan komentar pada program bertujuan memberi penjelasan terhadap satu atau beberapa statemen didalam program. komentar ini memberi penjelasan bagi yang membaca program, bisa orang lain bisa juga pembuat program itu sendiri. Dengan menambahkan komentar didalam program diharapkan program tersebut dapat terwariskan.
Contoh penggunaan komentar pada program:
//fungsi untuk menampilkan data siswa
function displaySiswa () {
var namaSiswa="Sabrina";
var elemen = document.getElementById("view");
elemen.innerHTML = namaSiswa ;  
}

Lihat indeks artikel Tutorial Javascript Dasar >> 

Referensi :

0 komentar

Post a Comment