Sintaks dan Titik Koma JavaScript: Penjelasan Aturan ASI

Kode JavaScript adalah rangkaian pernyataan

Program JavaScript adalah daftar pernyataan, yaitu instruksi yang dijalankan engine dari atas ke bawah. Mendeklarasikan variabel adalah pernyataan. Memanggil fungsi adalah pernyataan. Blok if atau for adalah pernyataan. Antarpernyataan dipisahkan oleh titik koma.

let name = "Ada";
let age = 30;
console.log(name, age);

Tiga pernyataan, tiga titik koma. Engine menjalankan yang pertama, lalu yang kedua, lalu yang ketiga. Cukup sederhana.

Whitespace dan indentasi tidak berarti apa-apa bagi parser. Kamu bisa menaruh ketiganya di satu baris dengan titik koma di antaranya dan hasilnya sama persis. Kita membuat indentasi untuk pembaca manusia, bukan untuk engine.

Blok mengelompokkan pernyataan

Kurung kurawal { } membuat blok, yaitu kelompok pernyataan yang diperlakukan engine sebagai satu kesatuan. Kamu akan melihat blok di mana-mana: badan fungsi, cabang if, badan perulangan.

let score = 85;

if (score >= 60) {
    console.log("pass");
    console.log("score was", score);
}

Dua pemanggilan console.log di dalam kurung kurawal adalah badan dari if. Perhatikan bahwa tidak ada titik koma setelah } penutup: blok bukan pernyataan yang perlu diakhiri. Pernyataan if secara keseluruhan berakhir saat bloknya berakhir.

Ini sering mengejutkan orang yang datang dari bahasa yang meminta ; setelah setiap }. Di JavaScript, blok yang berdiri sendiri atau blok alur kontrol tidak memerlukannya.

Ekspresi vs. pernyataan

Satu perbedaan yang sebaiknya dipahami sejak awal: ekspresi menghasilkan nilai, pernyataan melakukan sesuatu.

• 2 + 3 adalah ekspresi. Hasilnya 5.
• let x = 2 + 3; adalah pernyataan. Ia mendeklarasikan variabel dan mengisinya dengan hasil sebuah ekspresi.
• console.log("hi") adalah ekspresi (pemanggilan fungsi mengembalikan undefined), tapi saat ditulis di barisnya sendiri dengan titik koma, ia menjadi expression statement.

let total = (10 + 5) * 2;   // expression on the right, statement overall
console.log(total);          // expression statement

Sebagian besar waktu, kamu tidak perlu memikirkan ini. Hal ini baru penting saat kamu bertemu arrow function, ternary, dan tempat-tempat yang meminta ekspresi padahal kamu memberinya pernyataan (atau sebaliknya).

Soal titik koma

Jawaban jujurnya: JavaScript punya fitur bernama Automatic Semicolon Insertion (ASI) yang menyisipkan titik koma yang hilang untukmu di sebagian besar pergantian baris. Artinya kode seperti ini berjalan dengan baik:

let a = 1
let b = 2
console.log(a + b)

Tanpa titik koma, tanpa error. ASI melihat setiap pergantian baris dan bertanya, "bisakah token berikutnya melanjutkan pernyataan saat ini?" Kalau tidak, ia menyisipkan titik koma.

Karena ada ASI, dua gaya yang sah sama-sama dipakai di luar sana:

• Selalu pakai titik koma. Sebagian besar codebase, sebagian besar tutorial, sebagian besar panduan gaya.
• Tanpa titik koma. Dipakai sebagian proyek modern (gaya Standard, beberapa codebase React). Mengandalkan ASI ditambah beberapa trik pengaman.

Keduanya berhasil. Tidak ada yang "salah." Yang salah adalah tidak konsisten: mencampur gaya dalam satu file membuat bug lebih sulit ditemukan.

Saat ASI menjebakmu

ASI bertindak benar sekitar 99% dari waktu. Sisanya, 1%, adalah baris yang diawali token yang bisa melanjutkan baris sebelumnya. Biang masalahnya adalah [, (, `, +, -, dan /.

Lihat ini:

let x = 5
let y = 10
[x, y] = [y, x]
console.log(x, y)

Kamu berharap x dan y bertukar nilai. Ternyata ASI tidak menyisipkan titik koma sebelum [x, y] karena 10[x, y] sah secara sintaks (mengakses indeks pada angka 10). Parser membaca baris 2 dan baris 3 sebagai satu ekspresi besar, dan kamu mendapat error saat runtime atau output yang kacau.

Solusinya adalah titik koma di akhir baris 2:

let x = 5;
let y = 10;
[x, y] = [y, x];
console.log(x, y);

Atau, kalau kamu menulis dengan gaya tanpa titik koma, titik koma di awal baris yang berisiko:

let x = 5
let y = 10
;[x, y] = [y, x]
console.log(x, y)

; di awal baris itulah trik pengaman yang dipakai codebase tanpa titik koma. Kelihatannya aneh sampai kamu tahu kenapa ia ada di sana.

Jebakan return

Satu kasus ASI perlu dihafal karena menghasilkan bug yang diam. Kalau kamu menaruh pergantian baris tepat setelah return, ASI menyisipkan titik koma di sana, dan fungsinya mengembalikan undefined:

function getUser() {
    return
    {
        name: "Ada",
        age: 30
    };
}

console.log(getUser());   // undefined

Penulisnya bermaksud mengembalikan object. ASI melihat return di akhir baris dan langsung mengakhiri pernyataan di situ. Object literal itu menjadi kode yang tidak pernah tercapai.

Solusinya adalah memulai nilainya di baris yang sama dengan return:

function getUser() {
    return {
        name: "Ada",
        age: 30
    };
}

console.log(getUser());

Aturan yang sama berlaku untuk throw, break, continue, dan yield: jangan menaruh pergantian baris di antara kata kunci dan nilainya.

Satu aturan sederhana yang berhasil

Kalau kamu baru mulai, jalan termudahnya adalah:

1. Tulis titik koma secara eksplisit di akhir setiap pernyataan.
2. Jangan menaruhnya setelah } penutup blok untuk if, for, while, deklarasi fungsi, atau badan class.
3. Taruh setelah } untuk object literal atau fungsi ekspresi yang disimpan ke variabel: const f = function() {};.
4. Pakai formatter (Prettier, ESLint dengan aturan gaya) lalu berhenti memikirkannya. Formatter menegakkan apa pun yang diputuskan timmu.

// statement - semicolon
const greeting = "hello";

// function declaration - no semicolon after }
function greet(name) {
    return `${greeting}, ${name}`;
}

// function expression assigned to a variable - semicolon after }
const shout = function(name) {
    return greet(name).toUpperCase();
};

console.log(greet("Ada"));
console.log(shout("Boris"));

Aturan ini bukan hukum universal, melainkan konvensi yang akan kamu lihat di sebagian besar JavaScript yang kamu baca. Pegang aturan ini sampai kamu punya alasan untuk tidak memakainya.

Case sensitivity dan identifier

Dua aturan kecil yang juga tinggal di sini:

• JavaScript bersifat case-sensitive. userName, username, dan UserName adalah tiga identifier yang berbeda.
• Identifier boleh berisi huruf, digit, _, dan $, tapi tidak boleh diawali digit. Identifier tidak boleh berupa kata yang dicadangkan seperti class, return, atau function.

let userName = "ada";
let $price = 99;
let _internal = true;

console.log(userName, $price, _internal);

$ sah, tapi menurut kebiasaan biasanya disisihkan untuk hal-hal khusus library (dulu dipakai jQuery, dan beberapa sistem template masih memakainya). Kamu jarang memilihnya sendiri.

Berikutnya: strict mode

JavaScript modern diam-diam berjalan dalam varian bahasa yang lebih ketat bernama strict mode, yang mengubah sejumlah perilaku ceroboh menjadi error sungguhan. ES module dan isi class strict secara default, tapi ada baiknya kamu tahu apa yang sebenarnya diubahnya. Itulah halaman berikutnya.