13 Poin Penting dari Google JavaScript Style Guide

Hi, Coders! kali ini kita akan sedikit membahas poin-poin penting apa saja yang terdapat pada JavaScript style guide buatan Google. Untuk semua orang yang belum familiar dengan hal ini, Google mengeluarkan sebuah style guide untuk menulis kode-kode pada JavaScript yang merupakan gaya penulisan terbaik (menurut Google) agar kode menjadi lebih* clean* dan mudah dibaca.

Ini bukanlah aturan yang baku untuk menulis JavaScript yang valid, hanya larangan-larangan untuk mempertahankan pilihan gaya penulisan yang konsisten dan menarik di seluruh file source code Anda. Hal ini sangat menarik untuk JavaScript, yang merupakan bahasa yang fleksibel dan 'cenderung bebas' , yang memungkinkan kita untuk menerapkan berbagai macam pilihan gaya penulisan.

Google dan Airbnb mengeluarkan style guide paling populer diantara JavaScript developer. Penulis akan merekomendasikan Anda untuk mencoba kedua style guide tersebut jika Anda adalah seseorang yang menghabiskan banyak waktu untuk menulis JavaScript.

Oke, langsung saja kita bahas dan tak usah berlama-lama lagi. Berikut ini adalah tiga belas aturan yang menurut penulis paling menarik dan relevan dari Google JS Style Guide.

1. Gunakanlah Spasi daripada Tab

Selain dari urutan terminator baris, karakter spasi horizontal ASCII (0x20) adalah satu-satunya karakter spasi yang selalu muncul dimana saja dalam source file. Ini menyiratkan bahwa karakter tab tidak digunakan untuk indentasi dalam style guide ini.

Guide tersebut mengharuskan Anda untuk menggunakan dua spasi (bukan empat) untuk indentasi.

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

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

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

2. Titik Koma (Semicolon) Itu Wajib

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

Meskipun penulis tidak dapat membayangkan mengapa ada orang yang menentang gagasan ini, penggunaan titik koma yang konsisten di JS menjadi perdebatan baru selain 'spasi versus tab' yang melegenda itu. Google di sini menegaskan untuk mempertahankan titik koma pada akhiran sebuah kode.

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

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

3. Jangan Gunakan ES6 dulu

Jangan gunakan modul ES6 dulu (yaitu kata kunci export dan import), karena semantiknya belum diselesaikan. Perhatikan bahwa aturan 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';

Mungkin saat ini Google telah memperbolehkan penggunaan modul ES6 karena modul tersebut sudah dikembangkan lagi versi terbarunya. Untuk penjelasan selengkapnya bisa mencari disini.

4. Horizontal Alignment Tidak Disarankan (Tetapi Tidak Dilarang)

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

Horizontal alignment adalah metode 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,  
};

5. Jangan Menggunakan Lagi Kata Kunci var

Deklarasikan semua variabel lokal dengan const atau let. Gunakan const secara default, kecuali variabel tersebut perlu ditetapkan kembali. Kata kunci var tidak boleh digunakan.

Penulis masih sering melihat orang-orang menggunakan var dalam contoh kode di StackOverflow ataupun di tempat lain. Penulis tidak tahu apakah ada orang di luar sana yang akan membuat kasus untuk itu, atau apakah itu hanya kebiasaan lama yang sulit dihilangkan.

// bad  
var example = 42;

// good  
let example = 42;

6. Arrow Functions Lebih Disarankan

Jujur saja, menurut penulis juga Arrow Functions itu bagus karena lebih ringkas dan enak juga dilihatnya. Ternyata hal itupun memiliki tujuan yang cukup penting seperti menyederhanakan penulisan ketimbang dengan menulis kata kunci function()

// 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;  
});

7. Gunakanlah String Template dan Bukan Penggabungan (Concat)

Gunakan template string (``) pada penggabungan string kompleks, terutama jika beberapa literal string terlibat. String template bisa terdiri dari 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}?`;  
}

8. Jangan Gunakan Line Continuations Untuk String Yang Panjang

Jangan menggunakan line continuations (mengakhiri baris di dalam string literal dengan backslash) baik dalam literal string biasa atau template. Meskipun ES5 memperbolehkannya, ini dapat menyebabkan kesalahan yang rumit jika ada spasi tambahan yang muncul setelah backslash, dan kurang bagus untuk dibaca.

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

9. “for… of” Adalah Tipe Lain Dari ‘for loop’ Yang Disarankan

Dengan ES6, JavaScript yang sekarang memiliki tiga jenis for loop. Semua dapat digunakan, meskipun pengulangan for-of harus lebih diutamakan bila memungkinkan.

Ya, ini aneh jika Anda bertanya pada penulis, tetapi penulis pikir akan tetap memasukkannya dalam list karena cukup menarik saat tahu Google menyarankan sebuah for-loop.

10. Jangan Gunakan eval()

Jangan gunakan eval atau konstruktor function(...string) (kecuali untuk code loader). Fitur-fitur ini berpotensi berbahaya dan tidak berfungsi di lingkungan CSP.

// 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

11. Konstanta Harus Diberi Nama dalam ALL_UPPERCASE yang Dipisahkan Dengan Garis Bawah

Jika Anda benar-benar yakin bahwa variabel tidak boleh berubah, Anda dapat melakukannya dengan memanfaatkan nama konstanta. Hal ini membuat kekekalan konstanta menjadi jelas saat digunakan di seluruh kode.

Pengecualian penting untuk aturan ini adalah jika konstanta memiliki function-scoop, maka dalam hal ini harus ditulis dengan camelCase.

// bad  
const number = 5;

// good  
const NUMBER = 5;

12. Satu Variabel Untuk Setiap Deklarasi

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

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

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

13. Gunakan Single Quote dan Bukan Double Quote

Literal string biasa dipisahkan dengan tanda kutip satu ('), bukan dengan tanda kutip dua (").

Tip: Jika sebuah string berisi karakter petik satu, pertimbangkan untuk menggunakan template string untuk menghindari keharusan keluar dari tanda petik.

// 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`;

Kesimpulan

Seperti yang sudah dikatakan diawal aturan ini bukanlah sebuah aturan yang baku, Anda bebas untuk memilih style guide mana yang menurut Anda cocok dengan gaya penulisan pribadi seperti AirBnB dan masih banyak lagi. Jika penasaran dengan dukumentasi lengkapnya Anda bisa buka disini.

Untuk Anda yang belum mengetahui sama sekali dengan bahasa JavaScript, yang sekarang ini tengah populer untuk mengembangkan sebuah web app modern, tenang saja, Codepolitan memiliki kelas online JavaScript dasar sampai menggunakan library React Js dan framework Vue Js. Untuk melihat kelasnya Anda bisa akses informasinya disini.

Happy Coding! :)

Sumber : Medium