Panduan Gaya JavaScript
Selalu gunakan konvensi pengkodean yang sama untuk semua proyek JavaScript Anda.
Konvensi Pengkodean JavaScript
Konvensi pengkodean adalah pedoman gaya untuk pemrograman . Mereka biasanya mencakup:
- Aturan penamaan dan deklarasi untuk variabel dan fungsi.
- Aturan penggunaan spasi, lekukan, dan komentar.
- Praktik dan prinsip pemrograman
Konvensi pengkodean mengamankan kualitas :
- Meningkatkan keterbacaan kode
- Buat pemeliharaan kode lebih mudah
Konvensi pengkodean dapat menjadi aturan yang didokumentasikan untuk diikuti oleh tim, atau hanya menjadi praktik pengkodean individu Anda.
Halaman ini menjelaskan konvensi kode JavaScript umum yang digunakan oleh W3Schools.
Anda juga harus membaca bab berikutnya "Praktik Terbaik", dan mempelajari cara menghindari perangkap pengkodean.
Nama Variabel
Di W3schools kami menggunakan camelCase untuk nama pengenal (variabel dan fungsi).
Semua nama dimulai dengan huruf .
Di bagian bawah halaman ini, Anda akan menemukan diskusi yang lebih luas tentang aturan penamaan.
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:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Indentasi Kode
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 Pernyataan
Aturan umum untuk pernyataan sederhana:
- Selalu akhiri pernyataan sederhana dengan titik koma.
Contoh:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Aturan umum untuk pernyataan kompleks (majemuk):
- Letakkan braket pembuka di akhir baris pertama.
- Gunakan satu spasi sebelum tanda kurung buka.
- Letakkan kurung tutup pada baris baru, tanpa spasi di depan.
- Jangan akhiri pernyataan kompleks dengan titik koma.
Fungsi:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
loop:
for (let i = 0; i < 5; i++) {
x += i;
}
Persyaratan:
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 kurung tutup pada baris baru, tanpa spasi di depan.
- Selalu akhiri definisi objek dengan titik koma.
Contoh
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Objek pendek dapat ditulis terkompresi, pada satu baris, menggunakan spasi hanya di antara properti, seperti ini:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Panjang Garis < 80
Untuk keterbacaan, hindari baris yang lebih panjang dari 80 karakter.
Jika pernyataan JavaScript tidak muat pada satu baris, tempat terbaik untuk memecahnya adalah setelah operator atau koma.
Contoh
document.getElementById("demo").innerHTML =
"Hello Dolly.";
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 (Kami tidak melakukannya, tetapi cukup umum)
- Konstanta (seperti PI) ditulis dalam UPPERCASE
Haruskah Anda menggunakan hyp-hens , camelCase , atau under_scores dalam nama variabel?
Ini adalah pertanyaan yang sering didiskusikan oleh programmer. Jawabannya tergantung pada siapa Anda bertanya:
Tanda hubung dalam HTML dan CSS:
Atribut HTML5 dapat dimulai dengan data- (jumlah data, harga data).
CSS menggunakan tanda hubung dalam nama properti (ukuran font).
Tanda hubung dapat disalahartikan sebagai upaya pengurangan. Tanda hubung tidak diperbolehkan dalam nama JavaScript.
Menggarisbawahi:
Banyak programmer lebih suka menggunakan garis bawah (date_of_birth), terutama dalam database SQL.
Garis bawah sering digunakan dalam dokumentasi PHP.
PascalKasus:
PascalCase sering disukai oleh programmer C.
untaKasus:
camelCase digunakan oleh JavaScript itu sendiri, oleh jQuery, dan perpustakaan JavaScript lainnya.
Jangan memulai nama dengan tanda $. Ini akan membuat Anda berkonflik 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 dari penggunaan gaya HTML yang "tidak rapi", dapat mengakibatkan kesalahan JavaScript.
Kedua pernyataan JavaScript ini akan menghasilkan hasil yang berbeda:
const obj = getElementById("Demo")
const obj = getElementById("demo")
Jika memungkinkan, gunakan konvensi penamaan yang sama (seperti JavaScript) dalam 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 Anda menggunakan campuran huruf besar dan kecil, Anda harus sangat konsisten.
Jika Anda berpindah dari server yang tidak peka huruf besar/kecil, ke server yang peka huruf besar/kecil, bahkan kesalahan kecil dapat merusak situs web Anda.
Untuk menghindari masalah ini, selalu gunakan nama file dengan huruf kecil (jika memungkinkan).
Pertunjukan
Konvensi pengkodean tidak digunakan oleh komputer. Kebanyakan aturan berdampak kecil pada pelaksanaan program.
Lekukan dan spasi ekstra tidak signifikan dalam skrip kecil.
Untuk kode dalam pengembangan, keterbacaan harus lebih disukai. Skrip produksi yang lebih besar harus diperkecil.