Belajar JavaScript - Best Practices

Arizal
18.47
0

Ngulik Kode - Kita akan membahas beberapa cara koding atau praktik terbaik dalam menulis koding dengan JavaScript. Ini adalah hal-hal dasar yang akan sering kita gunakan dalam pemrograman kita sehari-hari.

Mari kita mulai!


Selalu Definisikan Variabel Menggunakan let atau const

Dengan mendefinisikan variabel menggunakan let atau const kita akan menghindari masalah seperti

  1. Variabel global dan namespaces: Katakanlah aplikasi kalian menggunakan variabel global title. Lalu dibeberapa bagian lain dari kode kalian, ternyata ada juga variabel title lagi tanpa menggunakan let atau const, tapi variabel ini khusus untuk suatu fungsi dan tidak ada hubungannya dengan variabel global title. Maka besar kemungkinan variabel title ini akan berubah nilai globalnglobal variable

  2. Jika kita membuat variabel menggunakan let atau const di dalam sebuah fungsi, maka variabel akan membatasi cakupannya pada blok kode tersebut. Dan global variabelnya tidak akan tergangg

  3. Mengekspos data sensitif:  Katakanlah kalian menyimpan API Key di sebuah global variable (tanpa menggunakan let atau const), lalu API Key ini akan tersimpan di global object (window) dan dapat dengan mudahnya diakses oleh siapapun yang mengunjungi website kalian.

  4. Sekali lagi, jika kita membuat variabel menggunakan let atau const, barulah variabel tersebut akan dibatasi cakupannya pada blok kode tertentu dan tidak akan terekspos ke global object (window)


Buatlah Kondisi Dengan Baik

  1. Jika kalian ingin mengecek variabel untuk value yang salah (undefined, null, string kosong), gunakanlah NOT operator (!) dari pada mengecek setiap value yang salah.

  2. Jika kalian ingin mengecek sebuah key/value ada di dalam objek. Kalian dapat mengeceknya satu persatu apakah key/value tersebut ada menggunakan AND operator (&&).

  3. Kalian juga bisa menggunakan optional chaining untuk mengecek apakah key/value ada dalam suatu objek atau tidak.

Semicolon

Sebelum kita lanjut lebih dalam, ada sebuah pertanyaan untuk kalian. Bisakah kalian tebak apa output dari function di bawah ini?
Jawaban: Outputnya akan menghasilkan undefined. Kenapa? Ini karena automatic semicolon insertion dari JavaScript Engine ketika mem-parsing kode. Ketika kode tidak terformat dengan benar seperti contoh di atas, JavaScript Engine akan menambahkan sebuah semicolon(;) ke akhir return statement (return;) dan berpikir bahwa tidak value yang dikembalikan. Jadi mengembalikan value sebagai undefined.
Automatic Semicolon Insertion (ASI): Pada saat mengurai kode, JavaScript Engine secara otomatis menyisipkan titik koma di akhir setiap token. Ini terkadang dapat menyebabkan perilaku kode yang tidak terduga. Anda dapat membaca lebih lanjut tentang itu di sini

Dan juga direkomendasikan untuk menambahkan semicolon disetiap akhir statement kode untuk menhindari masalah ASI.

Brackets

  1. Jangan memulai curly brackets ({}) di line selanjutnya. Karena ASI, code kalian mungkin akan berperilaku tidak terduga. 

  2. Selalu memulai curly brackets setelah akhir dari statement (di line yang sama)
Kita bisa menghindari masalah ini, dengan code formatter seperti Prettier atau tools formatting lainnya 

Template Literals

Template literal digunakan untuk membuat sebuah value string. Template literals diapit oleh backtick dan nilai/placeholder dinamis lalu diterukan menggunakan simbol dolar ${dynamicValue}.
Dibawah ini adalah contoh kasus penggunaan template literals.
  1. Template literals bisa digunakan untuk membuat konten HTML yang dinamis

  2. Template literals bisa juga digunakan untuk membuat query database

  3. Template literals bisa juga digunakan untuk membuat URL dinamis (satu baris).

  4. Jangan menggunakan template literals untuk membuat URL yang panjang dengan multi-baris. Karena API tidak mendukung multi-baris. Ada banyak solusi yang tersedia untuk mengatasi beberapa parameter dalam satu baris, tetapi kita tidak akan membahas semuanya di sini.
Kita bisa menghindari sebagian besar masalah yang dibahas dalam artikel ini dengan menggunakan linter dan code formatter. Berikut adalah beberapa linter dan code formatter yang populer.
Linters: ESLint, JSLint
Code Formatters: Prettier

Itu saja pembahasan untuk JavaScript Best Practices kali ini, semoga bermanfaat dan kalian semua menikmatinya!

0 comments

Posting Komentar