Strict Mode: Biarkan JavaScript Marah Lebih Awal
Mengenal "use strict": mode ketat yang mengubah kesalahan diam-diam menjadi error jelas, supaya bug tertangkap sejak ditulis, bukan saat production.
Kenapa Strict Mode Ada
JavaScript terkenal "pemurah": banyak kesalahan tidak melempar error, melainkan diam-diam melakukan sesuatu yang aneh. Typo nama variabel? JavaScript membuatkan variabel global baru untukmu. Lupa return di setter? Tidak apa-apa, nilainya hilang begitu saja. Kemurahan ini terdengar baik sampai kamu debugging 2 jam hanya untuk menemukan satu huruf salah ketik. Strict mode, diaktifkan dengan string "use strict", mengubah perilaku ini: kesalahan yang tadinya diam menjadi error yang jelas dan langsung.
Cara Mengaktifkan
"use strict"; // di baris paling atas file: berlaku untuk seluruh file
function hitung() {
"use strict"; // atau di dalam fungsi: hanya berlaku di sini
}Catatan: module ES (import/export) otomatis strict tanpa perlu menulisnya. Jadi kalau kamu memakai module modern, kamu sudah dilindungi.
Contoh 1: Assignment Tanpa Deklarasi
Ini jebakan paling terkenal:
"use strict";
total = 100; // ReferenceError: total is not definedTanpa strict mode, baris itu diam-diam membuat variabel GLOBAL total. Variabel global liar seperti ini adalah sumber bug misterius: nilainya bisa tertimpa dari file lain tanpa kamu sadari, dan tidak ada yang memberi tahu. Dengan strict mode, typo langsung ketahuan saat baris itu dieksekusi.
Contoh 2: Hal Lain yang Ditangkap
"use strict";
// 1. duplikat nama parameter dilarang
// function tambah(a, a) {} // SyntaxError
// 2. menghapus variabel dilarang
let x = 1;
// delete x; // SyntaxError
// 3. angka oktal gaya lama dilarang (membingungkan!)
// let n = 010; // SyntaxError: 010 itu 8, bukan 10
// 4. kata kunci masa depan tidak boleh jadi nama variabel
// let static = 5; // SyntaxError
// let yield = 5; // SyntaxErrorMasing-masing kasus di atas, tanpa strict mode, entah berjalan dengan arti yang mengejutkan atau gagal diam-diam.
Contoh 3: this yang Jujur
"use strict";
function siapaAku() {
console.log(this);
}
siapaAku(); // undefinedTanpa strict mode, this di dalam fungsi biasa otomatis menjadi object global (window). Ini perilaku warisan yang membingungkan dan nyaris tidak pernah diinginkan. Strict mode membuatnya undefined: jujur dan mudah dipahami.
Kapan Tidak Perlu Khawatir
Kode lama yang ditulis sebelum 2009 mungkin rusak kalau dipaksa strict, karena mengandalkan perilaku longgar. Untuk kode BARU, selalu pakai strict mode (atau module ES yang otomatis strict). Tidak ada alasan modern untuk menulis JavaScript longgar.
Jebakan Umum
Pertama, "use strict" harus persis di baris pertama (atau pertama dalam fungsi): komentar boleh di atasnya, tapi kode lain tidak. Kalau ditaruh di tengah file, ia hanya menjadi string biasa yang tidak berpengaruh. Kedua, strict mode tidak memperbaiki logika yang salah: ia hanya memastikan kesalahan sintaks dan perilaku diam-diam menjadi terlihat. Kamu tetap perlu testing (lihat modul testing-dasar). Ketiga, jangan mencampur file strict dan non-strict dalam satu bundel tanpa memahami cakupannya: direktif di tingkat file hanya berlaku untuk file itu.
Catatan teknis: Strict mode juga menonaktifkan beberapa fitur bermasalah seperti
withstatement dan membatasiargumentsagar tidak ter-alias dengan parameter. Secara filosofi, strict mode adalah contoh "fail fast": lebih baik program berteriak keras di awal daripada diam-diam menghasilkan data salah yang baru ketahuan berminggu-minggu kemudian di production.
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Perangkap Variabel Liar
Di codebase nyata yang besar, satu variabel global liar akibat typo bisa ditimpa file lain dan menimbulkan bug yang hanya muncul sesekali, mimpi buruk untuk di-debug. Tantanganmu: tulis skrip dengan "use strict" di baris pertama berisi fungsi hitungTotal(harga, jumlah) yang SENGAJA punya typo (misalnya menulis totaal tanpa deklarasi), bungkus pemanggilannya dengan try-catch, dan cetak nama error yang tertangkap. Lalu perbaiki typo-nya dan tunjukkan fungsi berjalan normal.
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <h1>Halo JS</h1> <p>Buka console preview untuk melihat output.</p> <script src="index.js"></script> </body> </html>