Inilah Beberapa Poin Penting Dari Style Guide JavaScript Google

Untuk siapa yang belum mengenalinya, Google keluarkan tutorial gaya untuk menulis JavaScript yang menguraikan (apa yang dipercaya Google) praktek style terbaik untuk menulis kode yang bersih dan gampang dimengerti.

Ini bukan ketentuan yang keras dan cepat untuk menulis JavaScript yang benar, cuma larangan untuk menjaga opsi gaya yang stabil dan menarik di semua file sumber Anda. Ini bagus sekali untuk JavaScript, yang disebut bahasa yang fleksibel dan maafkan yang memungkinkannya beragam opsi gaya.

Google dan Airbnb mempunyai dua tutorial style terpopuler di luaran sana. Saya pasti mereferensikan Anda untuk mengecek ke-2 nya bila Anda habiskan beberapa waktu menulis JS.

Berikut ialah tiga belas ketentuan yang menurut saya sangat menarik dan berkaitan dari JS Model Guide Google.

Mereka bermasalah dengan segala hal dimulai dari permasalahan yang dipermasalahkan dengan hangat (tab versi spasi, dan permasalahan kontroversial mengenai bagaimana titik koma harus dimenggunakan), sampai beberapa detail tidak terang yang mengagetkan saya. Mereka pasti mengganti langkah saya menulis JS saya di depan.

Untuk tiap ketentuan, saya akan memberi rangkuman detail, dituruti dengan cuplikan pendukung dari tutorial style yang menerangkan ketentuan secara mendalam. Bila memungkinkannya, saya akan memberi contoh gaya dalam praktek, dan memperbandingkannya dengan kode yang tidak ikuti ketentuan.

Gunakan spasi, bukan tab

Selainnya posisi terminator garis, karakter spasi horizontal ASCII (0x20) adalah salah satu karakter spasi putih yang ada di mana saja dalam file sumber. Ini menunjukkan bahwa… Karakter tab tidak dimenggunakan untuk lekukan.

Tutorial kelak tentukan Anda harus memakai dua spasi (bukan empat) untuk lekukan.

// bad
function foo() {
∙∙∙∙let name;
}

// bad
function bar() {
∙let name;
}

// good
function baz() {
∙∙let name;
}

Titik koma diperlukan

Tiap pengakuan harus disudahi dengan titik koma. Memercayakan penyisipan titik koma otomatis dilarang.

Walau saya tidak bisa memikirkan kenapa ada orang yang melawan gagasan ini, pemakaian titik koma yang stabil di JS jadi diskusi baru mengenai 'ruang versi tab'. Google keluar dengan tegas di sini untuk menjaga titik koma.

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

Tidak boleh menggunakan modul ES6

Tidak boleh menggunakan modul ES6 (yakni kata kunci export dan impor), karena semantiknya belum usai. Lihat jika peraturan ini akan dilihat kembali sesudah semantik seutuhnya standard.

// Jangan lakukan hal seperti ini dulu://------ lib.js ------
fungsi ekspor kuadrat(x) {
     kembali x * x;
}
fungsi ekspor diag(x, y) {
     return sqrt(kuadrat(x) + kuadrat(y));
}

//------ main.js ------
impor {persegi, diag} dari 'lib';

Perataan horizontal tidak dianjurkan (tetapi tidak dilarang)

Praktek ini dibolehkan, tapi biasanya tidak disarankan oleh Google Model. Bahkan juga tidak dibutuhkan untuk menjaga perataan horizontal di lokasi yang telah dimenggunakan.

Perataan horizontal adalah praktek menambah beberapa faktor spasi tambahan dalam kode Anda, untuk membikin token tertentu ada pas di bawah token tertentu yang lain pada baris awalnya.

// bad
{
  tiny:   42,  
  longer: 435, 
};// good
{
  tiny: 42, 
  longer: 435,
};

Tidak boleh gunakan var lagi

Maklumatkan semua faktor lokal dengan const atau let. menggunakan const secara standar, terkecuali bila faktor perlu dipindah. Kata kunci var jangan dimenggunakan.

Saya masih menyaksikan orang memakai var dalam contoh kode di StackOverflow dan di lain tempat. Saya tidak paham adakah orang di luaran sana yang hendak memberi dukungan, atau apa itu cuma kasus rutinitas lama yang susah lenyap.

// bad
var example = 42;// good
let example = 42;

Fungsi Arrow Yang Disukai

Fungsi Arrow sediakan sintaks yang singkat dan membenahi beberapa kesusahan sama ini. Lebih sukai Fungsi Arrow dibanding kata kunci function, khususnya untuk nested function

Saya akan jujur, saya cuma berpikiran jika Fungsi Arrow itu bagus karena lebih singkat dan lebih baik untuk dilihat. Rupanya mereka melayani arah yang cukup penting.

// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

Gunakan string templat bukannya penggabungan

Gunakan string template (terbatasi dengan `) di atas serangkaian string kompleks, terlebih bila melibatkan beberapa literal string. String template bisa mencapai beberapa baris.

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

Tidak boleh menggunakan lanjutan baris untuk string yang panjang

Tidak boleh menggunakan lanjutan baris (yakni, akhiri baris dalam literal string dengan garis miring kebalik) baik pada literal string biasa atau template. Walau ES5 memungkinkannya ini, ini bisa mengakibatkan kesalahan yang sulit bila spasi kosong ada sesudah garis miring, dan kurang terang untuk pembaca.

Yang lumayan menarik, ini adalah ketentuan yang tidak disepakati oleh Google dan Airbnb (berikut detail Airbnb).

Walau Google mereferensikan untuk menyatukan string yang lebih panjang (sama seperti yang diperlihatkan di bawah), tutorial gaya Airbnb pada intinya mereferensikan tidak untuk lakukan apa saja, dan biarkan string yang panjang jadi berlanjut sepanjang dibutuhkan.

// bad (sorry, this doesn't show up well on mobile)
const longString = 'This is a very long string that \
    far exceeds the 80 column limit. It unfortunately \
    contains long stretches of spaces due to how the \
    continued lines are indented.';// good
const longString = 'This is a very long string that ' + 
    'far exceeds the 80 column limit. It does not contain ' + 
    'long stretches of spaces since the concatenated ' +
    'strings are cleaner.';

"for...of" adalah tipe 'for loop' yang lebih disukai

Dengan ES6, bahasa itu saat ini mempunyai tiga tipe for loop yang lain. Semua bisa dimenggunakan, walau loop for-of agar lebih disukai bila memungkinkannya.

Ini aneh bila Anda menanyakan ke saya, tapi saya berpikir saya akan memasukkan karena lumayan menarik jika Google mengatakan tipe for loop yang disukai.

Saya selalu mendapatkan kesan-kesan jika for... in loop lebih bagus untuk object, sementara for... of lebih pas untuk array. Keadaan tipe 'alat yang pas untuk tugas yang tepat'.

Walau detail Google di sini tidak langsung berlawanan dengan gagasan itu, masih tetap memikat buat ketahui jika mereka mempunyai opsi khusus untuk loop ini.

Tidak boleh menggunakan eval()

Tidak boleh menggunakan konstruktor eval atau Function(...string) (terkecuali untuk pemuat kode). Sejumlah fitur ini mempunyai potensi beresiko dan tidak berperan di lingkungan CSP.

Halaman MDN untuk eval() bahkan juga mempunyai sisi yang disebutkan "Tidak boleh menggunakan eval!"

// bad
let obj = { a: 20, b: 30 };
let propName = getPropName();  // returns "a" or "b"
eval( 'var result = obj.' + propName );// good
let obj = { a: 20, b: 30 };
let propName = getPropName();  // returns "a" or "b"
let result = obj[ propName ];  //  obj[ "a" ] is the same as obj.a

Konstanta harus dinamakan dalam ALL_UPPERCASE dipisah dengan garis bawah

Nama konstanta memakai CONSTANT_CASE: semua huruf besar, dalam kata yang dipisah oleh garis bawah.

Bila Anda betul-betul percaya jika satu faktor jangan berbeda, Anda bisa menandainya dengan memakai huruf kapital pada nama konstanta. Ini membuat kekekalan konstanta jadi terang saat dimenggunakan di semua kode Anda.

Pengecualian penting untuk ketentuan ini adalah bila konstanta adalah lingkup peranan. Dalam masalah ini harus dicatat dalam camelCase.

// bad
const number = 5;// good
const NUMBER = 5;

Satu variabel per deklarasi

Setiap deklarasi variabel lokal hanya mendeklarasikan satu variabel: deklarasi seperti let a = 1, b = 2; tidak digunakan.

// bad
let a = 1, b = 2, c = 3;// good
let a = 1;
let b = 2;
let c = 3;

menggunakan pertanda kutip tunggal, bukan pertanda kutip double

Literal string biasa dipisah dengan pertanda kutip tunggal ('), bukan pertanda kutip double (").

Panduan: bila sebuah string berisi watak cuplikan tunggal, pikirkan untuk memakai string template supaya tak perlu keluar cuplikan.

// bad
let directive = "No identification of self or mission."// bad
let saying = 'Say it ain\u0027t so.';// good
let directive = 'No identification of self or mission.';// good
let saying = `Say it ain't so`;

Sebuah catatan akhir

Sama seperti yang saya ucapkan pada awal, ini bukanlah amanat. Google hanya salah satunya dari banyak raksasa tehnologi, dan ini hanya referensi.

Yang menjelaskan, memikat buat menyaksikan rekomendasi gaya yang dikeluarkan oleh perusahaan seperti Google, yang mengaryakan beberapa orang cemerlang yang habiskan beberapa waktu menulis code yang baik sekali.

Anda bisa ikuti ketentuan ini bila ingin ikuti tutorial untuk 'kode sumber yang sesuai Google' — tapi, sudah pasti, beberapa orang yang tidak sepakat, dan Anda bebas meremehkan salah satunya atau semuanya.

Menurut saya individu, ada beberapa kasus di mana detail Airbnb makin menarik dibanding Google. Apa saja sikap yang Diambil pada ketentuan khusus ini, masih tetap penting untuk jaga stabilitas style saat menulis code apa saja.