Lesson semicolon pada JavaScript akan membahas syntax dalam penggunaan semicolon.
Bagi programmer dimana JavaScript adalah second language, syntax dalam JavaScript kadang agak sulit dimengerti. Karena JavaScript bekerja sedikit berbeda dibanding bahasa programming lainnya.
Semicolons atau tanda titik koma, dalam JavaScript digunakan untuk penutup token baris perintah.
Semicolons banyak menimbulkan perdebatan dikomunitas programmer JavaScript. Dari mereka yang mengatakan “semicolons adalah wajib” atau “Tidak perlu gunakan semicolons” dan mereka yang berada diantara keduanya, dan masing-masing ada pro dan kontra.
Oleh karena itu kita perlu melihat kembali aturan standard dari ECMAScript.
“Certain ECMAScript statements (..) must be terminated with semicolons.”
ECMAScript Standard
“For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted…”
Dari standard diatas, kita perlu paham tentang aturan penambahan otomatis semicolon Auto Semicolon Insertion (ASI). Ada 3 aturan ASI
“When, as a Script or Module is parsed from left to right, a token (called the offending token) is encounterd that is not allowed by any production of the grammar,”
Rule 1
Mari gunakan contoh agar lebih jelas, dimana semicolon dihilangkan dahulu.
var a = 10
var b = 12
if(a){console.log(a)}
console.log(a+b)
Compiler akan mulai dari deklarsi variable pertama, mulai dari v….. terus hingga 10. Lalu baris baru, deklarasi variable ke-2, saat membaca huruf v, compiler akan melihat v tersebut membentur rule NOT ALLOWED by any production of grammar diatas.
Oleh karena itu, rule 1a, berikut akan dijalankan
“If the offending token is separated from the previous token by at least one line terminator.”
Rule 1a
Pada contoh, v pada deklarasi variable ke-2 dipisahkan oleh 1 line terminator, maka semicolon akan ditambahkan otomatis pada akhir deklarasi variable pertama. Begitu juga dengan deklarasi variable ke-2.
var a = 10;
var b = 12;
if(a){console.log(a)}
console.log(a+b)
Berikutnya compiler akan membaca baris code if, hingga melihat tanda curly braces “}”. Berikut ECMAScript standard tentang curly braces.
The offending token is “}”
Rule 1b
var a = 10;
var b = 12;
if(a){console.log(a);}
console.log(a+b)
“When, as a Script or Module is parsed from left to right, the end of the input stream of tokens is encountered, then a semicolon is automatically inserted at the end of the input stream.”
Rule 2
Maksud rule diatas adalah, bila end of file (eof), tambahkan semicolon. Berdasarkan rule diatas, baris console.log(a+b) adalah eof, maka semicolon akan ditambahkan.
var a = 10;
var b = 12;
if(a){console.log(a);}
console.log(a+b);
Bila kita berhenti sampai disini, dapat diambil kesimpulan, bahwa semicolon tidak perlu, biarkan auto insertion saja.
Namun tidak demikian kenyataanya, pada kondisi tertentu, auto insertion akan menyebabkan error yang membuat kita menghabiskan waktu cukup banyak untuk mencari error tersebut.
Mari kembali ke rule pertama, perhatikan kata not allowed.
“When, as a Script or Module is parsed from left to right, a token (called the offending token) is encountered that is not allowed by any production of the grammar,”
Jika compiler melihat suatu token sebagai not allowed, maka akan otomatis ditambahkan semicolon. Namun apa yang terjadi jika compiler melihat itu sebagai sesuatu yang allowed (diperbolehkan). Untuk jelasnya lihat program dibawah.
var a = 10
var b = 12
var c = b + a
['menu', 'items', 'listed']
.forEach(function(element)
{
console.log(element)
})
Untuk baris var a, var b dan console.log tidak akan terjadi masalah. ASI menambahkan semicolon dengan benar.
Namun pada baris var c, akan terjadi masalah. Saat compiler mencapai pada akhir var c = b + a. compiler akan melihat new line, lalu melihat open bracket “[“.
Dalam context JavaScript, opening bracket tersebut diperbolehkan. Karena kita bisa mengatakan itu bagian dari a. Jadi compiler melihat itu sebagai var c = b + a [‘menu’, ‘items’, ‘listed’]
Kejadian ini akan menyebabkan error karena ada block .forEach
Walau ini bukan kasus yang sering terjadi, dan cukup mudah menyelesaikannya, yaitu dengan menambahkan semicolon manual pada baris var c.
Yang umum terjadi dan cukup sering terjadi adalah contoh kasus IIFE (immediately invoked function expression) syntax.
var a = 10
var b = 12
var c = b + a
(function(){
console.log("text1");
console.log("text2");
}())
ketika compiler sampe pada akhir baris var c = b + a, kembali compiler melihat kondisi ini diperbolehkan, dan semicolon tidak akan ditambahkan.
Kondisi diatas sebetulnya jarang, tidak semua programmer membuat function dengan cara IIFE. Namun hal ini bisa terjadi saat menggunakan library orang lain misalnya. Saat file javascript digabungkan, hal ini bisa terjadi.
“When, a token is encountered that is allowed by some production of the grammar, but the production is a restricted production and the token would be the first token of a restricted production, and the restricted token is separated from the previous token by at least one LineTerminato, then a semicolon is automatically inserted before the restricted token.”
Rule 3
Restricted Production adalah perintah continue, break, return dan throw.
Jadi kalau ada 1 line terminator setelah perintah diatas, maka semicolon akan ditambahkan otomatis.
function returnObject()
{
if(somethingtrue)
{
return
{
hi: 'hello'
}
}
}
Pada contoh diatas, semicolon akan ditambahkan otomatis oleh ASI pada akhir return. Dan block hi:’hello’ tidak akan diexecute. Jadi seharusnya tidak ada semicolon, namun ditambahkan otomatis karena terbentur rule ke-3.
Hal ini umum terjadi, karena ada beberapa programmer memiliki style menulis curly bracket “{” pada baris baru, seperti contoh diatas. Dan kejadian diatas tidak dapat dihindari, walaupun Anda seorang programmmer yang strict dalam menggunakan semicolon.
Hal ini dapat diselesaikan hanya dengan memindahkan curly braces sejajar dengan perintah return.
function returnObject()
{
if(somethingtrue)
{
return{
hi: 'hello'
}
}
}
Jadi bagaimana cara kita mendeteksi kemungkinan error ini? Menggunakan linter akan sangat membantu.
Linter adalah plugin yang membantu pre-compile saat kita membuat program. Linter akan memberitahu kemungkinan error yang terjadi. Pilihan plugin linter: JSLint, JSHint atau ESLint
Salah satu best practice untuk JavaScript programmer adalah, menggunakan semicolon dan menggunakan linter untuk mencegah error seperti masalah diatas.
Namun ini kembali ke masing-masing programmer, apakah akan menggunakan semicolon, atau tidak, atau menggunakan linter untuk mencegah error pada contoh diatas.
Tujuan dari tutorial ini adalah memahami automatic semicolon insertion dan aturan yang berada dibelakangnya dan menggunakan pengetahuan ini untuk memudahkan kita dalam melakukan JavaScript programming.