Kode kita harus sebersih dan semudah mungkin dibaca.
Itu sebenarnya adalah seni pemrograman – untuk mengambil tugas yang kompleks dan mengkodekannya dengan cara yang benar dan dapat dibaca manusia. Gaya kode yang baik sangat membantu dalam hal itu.
Berikut adalah lembar contekan dengan beberapa aturan yang disarankan (lihat di bawah untuk lebih jelasnya):
Sekarang mari kita bahas aturan dan alasannya secara detail.
Tidak ada aturan “Anda harus”.
Tidak ada yang kaku di sini. Ini adalah preferensi gaya, bukan dogma agama.
Di sebagian besar proyek JavaScript, kurung kurawal ditulis dalam gaya “Mesir” dengan kurung kurawal pembuka pada baris yang sama dengan kata kunci terkait – bukan pada baris baru. Harus ada spasi sebelum braket pembuka, seperti ini:
jika (kondisi) {
// lakukan ini
// ...dan itu
// ...dan itu
} Konstruksi satu baris, seperti if (condition) doSomething() , merupakan kasus edge yang penting. Haruskah kita menggunakan kawat gigi?
Berikut adalah varian yang diberi anotasi sehingga Anda dapat menilai sendiri keterbacaannya:
? Pemula terkadang melakukan itu. Buruk! Tanda kurung kurawal tidak diperlukan:
if (n < 0) {alert(`Power ${n} tidak didukung`);}? Pisahkan ke baris terpisah tanpa kurung kurawal. Jangan pernah melakukan itu, mudah membuat kesalahan saat menambahkan baris baru:
jika (n < 0)
alert(`Daya ${n} tidak didukung`);? Satu baris tanpa kurung kurawal – dapat diterima, jika pendek:
if (n < 0) alert(`Daya ${n} tidak didukung`);? Varian terbaik:
jika (n < 0) {
alert(`Daya ${n} tidak didukung`);
} Untuk kode yang sangat singkat, satu baris diperbolehkan, misalnya if (cond) return null . Namun blok kode (varian terakhir) biasanya lebih mudah dibaca.
Tidak ada yang suka membaca baris kode horizontal yang panjang. Praktik terbaiknya adalah membaginya.
Misalnya:
// tanda kutip mundur ` memungkinkan untuk membagi string menjadi beberapa baris misalkan str = ` TC39 ECMA International adalah sekelompok pengembang JavaScript, pelaksana, akademisi, dan lainnya, berkolaborasi dengan komunitas untuk mempertahankan dan mengembangkan definisi JavaScript. `;
Dan, untuk pernyataan if :
jika (
nomor identitas === 123 &&
moonPhase === 'Menipisnya Gibbous' &&
ZodiacTanda === 'Libra'
) {
biarkanTheSorceryBegin();
}Panjang garis maksimum harus disepakati di tingkat tim. Biasanya 80 atau 120 karakter.
Ada dua jenis indentasi:
Indentasi horizontal: 2 atau 4 spasi.
Lekukan horizontal dibuat menggunakan 2 atau 4 spasi atau simbol tab horizontal (kunci Tab ). Yang mana yang harus dipilih adalah perang suci lama. Ruang lebih umum saat ini.
Salah satu keuntungan spasi dibandingkan tab adalah spasi memungkinkan konfigurasi indentasi yang lebih fleksibel dibandingkan simbol tab.
Misalnya, kita dapat menyelaraskan parameter dengan braket pembuka, seperti ini:
tampilkan(parameter,
sejajar, // padding 5 spasi di sebelah kiri
satu,
setelah,
lain
) {
// ...
}Indentasi vertikal: baris kosong untuk membagi kode menjadi blok logis.
Bahkan satu fungsi seringkali dapat dibagi menjadi blok-blok logis. Pada contoh di bawah, inisialisasi variabel, loop utama, dan pengembalian hasilnya dibagi secara vertikal:
fungsi kekuatan(x, n) {
misalkan hasilnya = 1;
// <--
untuk (misalkan i = 0; i < n; i++) {
hasil *= x;
}
// <--
hasil pengembalian;
}Masukkan baris baru tambahan yang membantu membuat kode lebih mudah dibaca. Tidak boleh ada lebih dari sembilan baris kode tanpa lekukan vertikal.
Tanda titik koma harus ada setelah setiap pernyataan, meskipun pernyataan tersebut mungkin dilewati.
Ada bahasa di mana titik koma benar-benar opsional dan jarang digunakan. Namun, dalam JavaScript, ada beberapa kasus di mana jeda baris tidak diartikan sebagai titik koma, sehingga kode rentan terhadap kesalahan. Lihat lebih lanjut tentang itu di bab Struktur kode.
Jika Anda seorang programmer JavaScript berpengalaman, Anda dapat memilih gaya kode tanpa titik koma seperti StandardJS. Jika tidak, sebaiknya gunakan titik koma untuk menghindari kemungkinan kesalahan. Mayoritas pengembang memasang titik koma.
Cobalah untuk menghindari kode bersarang terlalu dalam.
Misalnya, dalam perulangan, terkadang ada baiknya menggunakan direktif continue untuk menghindari penumpukan tambahan.
Misalnya, alih-alih menambahkan kondisi if bersarang seperti ini:
untuk (misalkan i = 0; i < 10; i++) {
jika (lanjutan) {
... // <- satu tingkat bersarang lagi
}
}Kita dapat menulis:
untuk (misalkan i = 0; i < 10; i++) {
jika (!cond) lanjutkan;
... // <- tidak ada level bersarang tambahan
} Hal serupa dapat dilakukan dengan if/else dan return .
Misalnya, dua konstruksi di bawah ini identik.
Opsi 1:
fungsi kekuatan(x, n) {
jika (n < 0) {
alert("Negatif 'n' tidak didukung");
} kalau tidak {
misalkan hasilnya = 1;
untuk (misalkan i = 0; i < n; i++) {
hasil *= x;
}
hasil pengembalian;
}
}Opsi 2:
fungsi kekuatan(x, n) {
jika (n < 0) {
alert("Negatif 'n' tidak didukung");
kembali;
}
misalkan hasilnya = 1;
untuk (misalkan i = 0; i < n; i++) {
hasil *= x;
}
hasil pengembalian;
} Yang kedua lebih mudah dibaca karena “kasus khusus” n < 0 ditangani sejak dini. Setelah pemeriksaan selesai, kita dapat melanjutkan ke alur kode "utama" tanpa perlu membuat sarang tambahan.
Jika Anda menulis beberapa fungsi “pembantu” dan kode yang menggunakannya, ada tiga cara untuk mengatur fungsi tersebut.
Deklarasikan fungsi di atas kode yang menggunakannya:
// deklarasi fungsi
fungsi buatElemen() {
...
}
fungsi setHandler(elemen) {
...
}
fungsi berjalan-jalan() {
...
}
// kode yang menggunakannya
biarkan elem = createElement();
setHandler(elemen);
berjalan-jalan();Kode dulu, lalu fungsi
// kode yang menggunakan fungsi
biarkan elem = createElement();
setHandler(elemen);
berjalan-jalan();
// --- fungsi pembantu ---
fungsi buatElemen() {
...
}
fungsi setHandler(elemen) {
...
}
fungsi berjalan-jalan() {
...
}Campuran: suatu fungsi dideklarasikan di tempat pertama kali digunakan.
Seringkali, varian kedua lebih disukai.
Itu karena ketika membaca kode, pertama-tama kita ingin tahu apa fungsinya . Jika kodenya didahulukan, maka menjadi jelas dari awal. Lalu, mungkin kita tidak perlu membaca fungsinya sama sekali, terutama jika namanya menggambarkan fungsi sebenarnya.
Panduan gaya berisi aturan umum tentang “cara menulis” kode, misalnya kutipan mana yang akan digunakan, berapa banyak spasi yang harus diindentasi, panjang baris maksimal, dll. Banyak hal kecil.
Jika semua anggota tim menggunakan panduan gaya yang sama, kode akan terlihat seragam, terlepas dari anggota tim mana yang menulisnya.
Tentu saja, sebuah tim selalu bisa menulis panduan gaya mereka sendiri, tapi biasanya hal itu tidak perlu dilakukan. Ada banyak panduan yang dapat dipilih.
Beberapa pilihan populer:
Panduan Gaya JavaScript Google
Panduan Gaya JavaScript Airbnb
Idiomatik.JS
StandarJS
(dan masih banyak lagi)
Jika Anda seorang pengembang pemula, mulailah dengan lembar contekan di awal bab ini. Kemudian Anda dapat menelusuri panduan gaya lainnya untuk mendapatkan lebih banyak ide dan memutuskan mana yang paling Anda sukai.
Linter adalah alat yang secara otomatis dapat memeriksa gaya kode Anda dan memberikan saran perbaikan.
Hal hebatnya adalah pemeriksaan gaya juga dapat menemukan beberapa bug, seperti kesalahan ketik pada nama variabel atau fungsi. Karena fitur ini, disarankan untuk menggunakan linter meskipun Anda tidak ingin terpaku pada satu “gaya kode” tertentu.
Berikut beberapa alat linting yang terkenal:
JSLint – salah satu linter pertama.
JSHint – lebih banyak pengaturan daripada JSLint.
ESLint – mungkin yang terbaru.
Semuanya bisa melakukan pekerjaan itu. Penulis menggunakan ESLint.
Kebanyakan linter terintegrasi dengan banyak editor populer: cukup aktifkan plugin di editor dan konfigurasikan gayanya.
Misalnya, untuk ESLint Anda harus melakukan hal berikut:
Instal Node.js.
Instal ESLint dengan perintah npm install -g eslint (npm adalah penginstal paket JavaScript).
Buat file konfigurasi bernama .eslintrc di root proyek JavaScript Anda (di folder yang berisi semua file Anda).
Instal/aktifkan plugin untuk editor Anda yang terintegrasi dengan ESLint. Mayoritas editor memilikinya.
Berikut ini contoh file .eslintrc :
{
"extends": "eslint: direkomendasikan",
"env": {
"peramban": benar,
"simpul": benar,
"es6": benar
},
"aturan": {
"tanpa konsol": 0,
"indentasi": 2
}
} Di sini arahan "extends" menunjukkan bahwa konfigurasi didasarkan pada rangkaian pengaturan “eslint:recommended”. Setelah itu, kita tentukan sendiri.
Anda juga dapat mengunduh kumpulan aturan gaya dari web dan memperluasnya. Lihat https://eslint.org/docs/user-guide/getting-started untuk detail lebih lanjut tentang instalasi.
IDE tertentu juga memiliki linting bawaan, yang nyaman tetapi tidak dapat dikustomisasi seperti ESLint.
Semua aturan sintaksis yang dijelaskan dalam bab ini (dan dalam panduan gaya yang direferensikan) bertujuan untuk meningkatkan keterbacaan kode Anda. Semuanya masih bisa diperdebatkan.
Saat kita berpikir untuk menulis kode yang “lebih baik”, pertanyaan yang harus kita tanyakan pada diri kita adalah: “Apa yang membuat kode lebih mudah dibaca dan dipahami?” dan “Apa yang dapat membantu kita menghindari kesalahan?” Ini adalah hal utama yang perlu diingat ketika memilih dan memperdebatkan gaya kode.
Membaca panduan gaya populer akan memungkinkan Anda mengikuti perkembangan ide-ide terbaru tentang tren gaya kode dan praktik terbaik.
pentingnya: 4
Apa yang salah dengan gaya kode di bawah ini?
fungsi kekuatan(x,n)
{
misalkan hasil=1;
untuk(biarkan i=0;i<n;i++) {hasil*=x;}
hasil pengembalian;
}
misalkan x=prompt("x?",''), n=prompt("n?",'')
jika (n<=0)
{
alert(`Power ${n} tidak didukung, masukkan bilangan bulat lebih besar dari nol`);
}
kalau tidak
{
waspada(kekuatan(x,n))
}Perbaiki.
Anda dapat memperhatikan hal berikut:
function pow(x,n) // <- tidak ada spasi antar argumen
{ // <- tanda kurung gambar pada baris terpisah
misalkan hasil=1; // <- tanpa spasi sebelum atau sesudah =
for(biarkan i=0;i<n;i++) {hasil*=x;} // <- tanpa spasi
// isi dari { ... } harusnya berada pada baris baru
hasil pengembalian;
}
let x=prompt("x?",''), n=prompt("n?",'') // <-- secara teknis memungkinkan,
// tapi lebih baik jadikan 2 baris, juga tidak ada spasi dan hilang ;
if (n<=0) // <- tidak ada spasi di dalamnya (n <= 0), dan harus ada garis tambahan di atasnya
{ // <- tanda kurung gambar pada baris terpisah
// di bawah - garis panjang dapat dibagi menjadi beberapa baris untuk meningkatkan keterbacaan
alert(`Power ${n} tidak didukung, masukkan bilangan bulat lebih besar dari nol`);
}
else // <- dapat menuliskannya dalam satu baris seperti "} else {"
{
alert(pow(x,n)) // tidak ada spasi dan hilang ;
}Varian tetap:
fungsi kekuatan(x, n) {
misalkan hasilnya = 1;
untuk (misalkan i = 0; i < n; i++) {
hasil *= x;
}
hasil pengembalian;
}
misalkan x = prompt("x?", "");
misalkan n = prompt("n?", "");
jika (n <= 0) {
alert(`Daya ${n} tidak didukung,
silakan masukkan bilangan bulat yang lebih besar dari nol`);
} kalau tidak {
waspada( kekuatan(x, n) );
}