Dasar-Dasar Menulis Clean Code

Teknik Dasar dalam Menulis Clean Code

Photo by Arnold Francisca on Unsplash

Clean Code merupakan istilah menulis code yang rapih dan bersih.

Tujuan kita menulis Code tidak hanya untuk dimengerti oleh mesin, namun juga untuk dimenengerti oleh manusia yang membacannya (Clean Code).

Membiasakan menulis Clean Code membuat kode yang dibuat dapat dimengerti oleh kita sendiri suatu saat nanti atau bahkan bisa dimengerti oleh orang lain ketika berkolaborasi.

Mari kita bahas beberapa teknik menulis Clean Code.

Naming

Naming atau penamaan adalah pemberian nama pada sesuatu, bisa berupa nama variabel, function, class, file, dll.

Salah satu teknik Naming yang baik adalah dengan membuat nama sesuatu mewakili isinya atau nilainya.

Contoh kasus pertama

let a = "Aufa Billah";
let b = "Depok";

Pada kode di atas kita membuat 2 buah variabel.

Perhatikan nama variabel tersebut, apakah nama variabel tersebut dapat dengan mudah dikenali? tidak bukan?

Inilah yang dinamakan teknik menulis Clean Code, salah satunya dengan memberi nama sesuatu yang mewakili nilainya.

Variabel a memiliki nilai “Aufa Billah” atau nama seseorang, maka alangkah baiknya jika kita memberi nama variabel tersebut adalah nama.

Selanjutnya variabel b memiliki nilai “Depok”, maka lebih baik jika kita memberi nama variabel tersebut adalah alamat.

Maka hasil akhirnya adalah

let nama = "Aufa Billah";
let alamat = "Depok";

Contoh kasus kedua

let name = "Aufa Billah";
let address = "Depok";
function tes() {
 return name;
}

Pada kode di atas, kita membuat 2 buah variabel dan 1 buah function.

Function tes() di atas digunakan untuk mengembalikan atau menampilkan nilai variabel nama.

Perhatikan function tes() tersebut, apakah nama function tersebut sudah mewakili isi atau nilainya?

Melihat dari tujuan dari fungsi tes() sendiri yaitu untuk mendapatkan nilai nama, maka lebih baiknya kita memberi nama getNama().

Pemberian nama function getNama() lebih memiliki arti dibandingkan sekedar memberikan nama function tes(), karena hanya dengan membaca nama fungsi kita telah mengetahui tujuan dari fungsi tersebut.

let name = "Aufa Billah";
let address = "Depok";
function getNama() {
 return name;
}

Teknin Naming memang terlihat sederhana, namun teknik ini akan sangat berguna jika kode yang ditulis dalam jumlah yang banyak.

Selanjutnya kita akan membahas Style Guide.

Style Guide

Style Guide merupakan panduan style (gaya) yang digunakan programmer dalam menulis kode.

Setiap programmer pasti memiliki style atau gaya tersendiri dalam menulis kode.

Namun dengan banyaknya style yang digunakan oleh berbagai programmer, terkadang kode sulit dibaca atau dilihat, maka oleh karena itu setiap bahasa pemrograman memiliki pendekatan atau style guide dalam menulis kode.

Salah satu style guide yang akan dibahas adalah Style Guide JavaScript.

Terdapat beberapa Style Guide JavaSript:

• Style Guide JavaScript oleh airbnb: https://github.com/airbnb/javascript
• Style Guide JavaScript oleh Google: https://google.github.io/styleguide/jsguide.html

Kita bisa mengacu pada referensi tersebut dalam menulis kode JavaScript yang lebih baik, sehingga kode yang kita tulis lebih mudah dibaca dan dimengerti oleh orang lain.

Kegunaan Style Guide sendiri nantinya akan memberikan manfaat yang besar pada kode yang sudah kita tulis dalam skala besar.

Kita akan membahas beberapa Style Guide dasar dalam JavaScript.

Kita akan menggunakan Style Guide dari airbnb disini.

Mari kita lihat contoh kasus

let nama="Aufa";
function getNama()
{
return nama;
}

Pada kode di atas, kita membuat 1 variabel nama dan 1 function getNama().

Mari kita bahas deklarasi variabel.

Jika kita mengacu pada referensi Airbnb disini, kita harus memberikan spasi di antara operator assignment =, sehingga terlihat seperti ini.

let nama = "Aufa";

Selanjutnya kita bahas deklarasi function.

Jika mengacu pada referensi Airbnb disini, ada beberapa hal yang harus kita perbaiki pada penulisan function di atas.

• Berikan satu spasi sebelum kurang kurawal pembuka (bukan new line).

function getNama() {
return nama;
}

• Berikan indent 2 spasi atau 4 spasi (atau tab) pada block statement.

function getNama() {
 return nama;
}

Hasil akhirnya

let nama = "Aufa";
function getNama() {
 return nama;
}

Terlihat lebih menarik kode di atas dibandingkan penulisan sebelumnya.

Contoh di atas hanyalah beberapa Style Guide sederhana, kita bisa menerapkan Style Guide lebih banyak lagi dengan mengacu pada referensi di atas.

Sumber:

• Sekolah Koding: Menulis kode yang bersih.

Panduan Style Guide JavaScript:

• Google: https://google.github.io/styleguide/jsguide.html
• Airbnb: https://github.com/airbnb/javascript

Sekian teknik sederhana yang bisa kita implementasikan dalam menulis kode sehari-hari, mari kita biasakan menulis kode dengan cara yang lebih baik lagi.