13 Poin Penting dari Panduan Gaya JavaScript Google

Bagi siapa pun yang belum terbiasa dengannya, Google mengeluarkan panduan gaya untuk menulis JavaScript yang menjabarkan (apa yang diyakini Google) praktik gaya terbaik untuk menulis kode yang bersih dan dapat dimengerti.

Ini bukanlah aturan yang sulit dan cepat untuk menulis JavaScript yang valid, hanya larangan untuk mempertahankan pilihan gaya yang konsisten dan menarik di seluruh file sumber Anda. Ini sangat menarik untuk JavaScript, yang merupakan bahasa yang fleksibel dan pemaaf yang memungkinkan berbagai macam pilihan gaya.

Google dan Airbnb memiliki dua panduan gaya paling populer di luar sana. Saya pasti akan merekomendasikan Anda memeriksa keduanya jika Anda menghabiskan banyak waktu untuk menulis JS.

Berikut ini adalah tiga belas aturan yang menurut saya paling menarik dan relevan dari Google JS Style Guide.

Mereka menangani segala hal mulai dari masalah yang diperdebatkan dengan hangat (tab versus spasi, dan masalah kontroversial tentang bagaimana titik koma harus digunakan), hingga beberapa spesifikasi yang tidak jelas yang mengejutkan saya. Mereka pasti akan mengubah cara saya menulis JS saya ke depannya.

Untuk setiap aturan, saya akan memberikan ringkasan spesifikasinya, diikuti dengan kutipan pendukung dari panduan gaya yang menjelaskan aturan secara detail. Jika memungkinkan, saya juga akan memberikan contoh gaya dalam praktik, dan membandingkannya dengan kode yang tidak mengikuti aturan.

Gunakan spasi, bukan tab

Selain dari urutan terminator baris, karakter spasi horizontal ASCII (0x20) adalah satu-satunya karakter spasi yang muncul di mana saja dalam file sumber. Ini menyiratkan bahwa… Karakter tab tidak digunakan untuk indentasi.

Panduan selanjutnya menentukan Anda harus menggunakan dua spasi (bukan empat) untuk indentasi.

// badfunction foo() {∙∙∙∙let name;}// badfunction bar() {∙let name;}// goodfunction baz() {∙∙let name;}

Titik koma diperlukan

Setiap pernyataan harus diakhiri dengan titik koma. Dilarang mengandalkan penyisipan titik koma otomatis.

Meskipun saya tidak bisa membayangkan mengapa ada orang yang menentang gagasan ini, penggunaan titik koma yang konsisten di JS menjadi perdebatan baru 'spasi versus tab'. Google tampil tegas di sini untuk mempertahankan titik koma.

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

Jangan gunakan modul ES6 (belum)

Jangan gunakan modul ES6 dulu (yaitu kata kunci exportdan import), karena semantiknya belum diselesaikan. Perhatikan bahwa kebijakan ini akan ditinjau kembali setelah semantik sepenuhnya standar.
// Don't do this kind of thing yet:
//------ lib.js ------export function square(x) { return x * x;}export function diag(x, y) { return sqrt(square(x) + square(y));}//------ main.js ------import { square, diag } from 'lib';

Penjajaran horizontal tidak disarankan (tetapi tidak dilarang)

Praktik ini diizinkan, tetapi umumnya tidak disarankan oleh Google Style. Bahkan tidak diperlukan untuk mempertahankan kesejajaran horizontal di tempat-tempat yang sudah digunakan.

Penjajaran horizontal adalah praktik menambahkan sejumlah variabel spasi tambahan dalam kode Anda, untuk membuat token tertentu muncul tepat di bawah token tertentu lainnya pada baris sebelumnya.

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

Jangan gunakan var lagi

Deklarasikan semua variabel lokal dengan constatau let. Gunakan const secara default, kecuali variabel perlu ditetapkan kembali. Kata varkunci tidak boleh digunakan.

Saya masih melihat orang menggunakan varcontoh kode di StackOverflow dan di tempat lain. Saya tidak tahu apakah ada orang di luar sana yang akan membuat kasus untuk itu, atau apakah itu hanya kasus kebiasaan lama yang sulit dihilangkan.

// badvar example = 42;
// goodlet example = 42;

Fungsi panah lebih disukai

Fungsi panah menyediakan sintaks yang ringkas dan memperbaiki sejumlah kesulitan this. Lebih suka fungsi panah daripada functionkata kunci, terutama untuk fungsi bertingkat

Sejujurnya, saya hanya berpikir bahwa fungsi panah itu bagus karena lebih ringkas dan lebih bagus untuk dilihat. Ternyata mereka juga memiliki tujuan 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 template, bukan penggabungan

Gunakan template string (dipisahkan dengan `) di atas penggabungan string kompleks, terutama jika beberapa literal string terlibat. String template bisa terdiri dari beberapa baris.
// badfunction sayHi(name) { return 'How are you, ' + name + '?';}// badfunction sayHi(name) { return ['How are you, ', name, '?'].join();}// badfunction sayHi(name) { return `How are you, ${ name }?`;}// goodfunction sayHi(name) { return `How are you, ${name}?`;}

Jangan gunakan kelanjutan baris untuk string panjang

Jangan gunakan kelanjutan baris (yaitu, mengakhiri baris di dalam string literal dengan garis miring terbalik) baik dalam literal string biasa atau template. Meskipun ES5 memungkinkan hal ini, ini dapat menyebabkan kesalahan yang rumit jika ada spasi tambahan yang muncul setelah garis miring, dan kurang jelas bagi pembaca.

Yang cukup menarik, ini adalah aturan yang tidak disetujui oleh Google dan Airbnb (inilah spesifikasi Airbnb).

Meskipun Google merekomendasikan penggabungan string yang lebih panjang (seperti yang ditunjukkan di bawah), panduan gaya Airbnb pada dasarnya merekomendasikan untuk tidak melakukan apa-apa, dan mengizinkan string panjang berjalan selama diperlukan.

// 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.';
// goodconst 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.';

"Untuk ... dari" adalah jenis 'for loop' yang disukai

Dengan ES6, bahasa tersebut sekarang memiliki tiga jenis forloop yang berbeda . Semua dapat digunakan, meskipun for- ofloop harus lebih disukai bila memungkinkan.

Ini aneh jika Anda bertanya kepada saya, tetapi saya pikir saya akan memasukkannya karena cukup menarik bahwa Google menyatakan jenis forloop yang disukai .

Saya selalu mendapat kesan bahwa for... inloop lebih baik untuk objek, sementara for... oflebih cocok untuk array. Situasi jenis 'alat yang tepat untuk pekerjaan yang tepat'.

Meskipun spesifikasi Google di sini tidak selalu bertentangan dengan gagasan itu, masih menarik untuk mengetahui bahwa mereka memiliki preferensi khusus untuk loop ini.

Jangan gunakan eval ()

Jangan gunakan evalatau Function(...string)konstruktor (kecuali untuk pemuat kode). Fitur-fitur ini berpotensi berbahaya dan tidak berfungsi di lingkungan CSP.

Halaman MDN untuk eval()bahkan memiliki bagian yang disebut "Jangan gunakan eval!"

// badlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"eval( 'var result = obj.' + propName );
// goodlet 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 diberi nama dalam ALL_UPPERCASE dipisahkan dengan garis bawah

Nama konstan digunakan CONSTANT_CASE: semua huruf besar, dengan kata-kata yang dipisahkan oleh garis bawah.

Jika Anda benar-benar yakin bahwa variabel tidak boleh berubah, Anda dapat menunjukkannya dengan menggunakan huruf besar pada nama konstanta. Hal ini membuat keabadian konstanta menjadi jelas saat digunakan di seluruh kode Anda.

Pengecualian penting untuk aturan ini adalah jika konstanta memiliki cakupan fungsi. Dalam hal ini harus ditulis dalam camelCase.

// badconst number = 5;
// goodconst NUMBER = 5;

Satu variabel per deklarasi

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

Gunakan tanda kutip tunggal, bukan tanda kutip ganda

Literal string biasa dipisahkan dengan tanda kutip tunggal ( '), bukan tanda kutip ganda ( "). Tips: jika string berisi karakter petik tunggal, pertimbangkan untuk menggunakan template string untuk menghindari keharusan keluar dari kutipan.
// badlet directive = "No identification of self or mission."
// badlet saying = 'Say it ain\u0027t so.';
// goodlet directive = 'No identification of self or mission.';
// goodlet saying = `Say it ain't so`;

Catatan terakhir

Seperti yang saya katakan di awal, ini bukanlah mandat. Google hanyalah salah satu dari banyak raksasa teknologi, dan ini hanyalah rekomendasi.

Meskipun demikian, menarik untuk melihat rekomendasi gaya yang dikeluarkan oleh perusahaan seperti Google, yang mempekerjakan banyak orang brilian yang menghabiskan banyak waktu untuk menulis kode yang sangat bagus.

You can follow these rules if you want to follow the guidelines for ‘Google compliant source code’ — but, of course, plenty of people disagree, and you’re free to brush any or all of this off.

I personally think there are plenty of cases where Airbnb’s spec is more appealing than Google’s. No matter the stance you take on these particular rules, it is still important to keep stylistic consistency in mind when write any sort of code.