JavaScript ES6: Panduan Lengkap let, const & Arrow Function

JavaScript modern ES6 (ECMAScript 2015) mentransformasi arsitektur pemrograman web melalui sistem deklarasi variabel berbasis block scope (let dan const) serta fungsi ringkas Arrow Function. Pembaruan ini dirancang untuk mengatasi kelemahan bawaan kata kunci var yang rentan memicu bug akibat hoisting dan kebocoran cakupan memori, sekaligus menyederhanakan penulisan kode asinkron serta menstabilkan pengikatan konteks this leksikal pada aplikasi web modern.

Saat mengaudit basis kode JavaScript pada proyek web klien yang sering mengalami perilaku aneh di lingkungan produksi, sumber masalahnya hampir selalu berakar pada variabel lama yang saling menimpa. Banyak pengembang pemula belum menyadari bahwa mesin JavaScript di peramban mengeksekusi alokasi memori secara berbeda sejak standarisasi ES6 diresmikan.

Memahami batasan ruang lingkup variabel dan mekanisme fungsi panah bukan sekadar menghafal sintaks baru, melainkan langkah krusial untuk mencegah kebocoran memori, mempercepat eksekusi skrip di sisi klien, serta menjaga kestabilan basis kode saat Anda beralih ke framework modern seperti React atau Vue.

1. Mengapa Menghindari 'var'? Perbedaan Scope dan Hoisting

Sebelum era ES6, seluruh variabel dideklarasikan menggunakan kata kunci var yang menganut sistem function scope. Artinya, variabel yang dibuat di dalam blok percabangan if atau perulangan for tetap bocor dan dapat diakses bebas dari luar blok kurung kurawal tersebut.

Selain masalah kebocoran cakupan, var mengalami fenomena hoisting penuh, di mana deklarasi variabel diangkat ke puncak fungsi dan diinisialisasi otomatis dengan nilai undefined. Perilaku ini memungkinkan variabel dipanggil sebelum baris deklarasinya ditulis tanpa memunculkan galat eksplisit, yang sering meloloskan kesalahan logika fatal ke server produksi.

Sebaliknya, let dan const menerapkan block scope ketat. Kedua kata kunci ini terikat di dalam area Temporal Dead Zone (TDZ) sejak awal blok hingga baris deklarasi selesai dieksekusi, sehingga peramban akan langsung melempar galat ReferenceError jika variabel dipanggil sebelum waktu inisialisasinya.

Tips Praktis dari Pengalaman Saya: Terapkan prinsip Const by Default dalam setiap baris kode Anda. Selalu gunakan const untuk setiap deklarasi variabel, dan hanya ubah menjadi let jika nilai referensinya memang benar-benar perlu dihitung ulang (seperti variabel akumulator atau pencacah perulangan). Hindari pemakaian kata kunci var sepenuhnya pada proyek web modern.

Tabel Komparasi Spesifikasi: var vs let vs const

Agar Anda memiliki panduan teknis yang presisi saat menulis atau meninjau kode JavaScript, perhatikan perbedaan karakteristik antara ketiga deklarasi variabel berikut:

Parameter Teknis var (Warisan ES5) let (Modern ES6) const (Modern ES6) Ruang Lingkup (Scope) Function Scope Block Scope ({ ... }) Block Scope ({ ... }) Deklarasi Ulang Diizinkan (Rawan tabrakan nama) Ditolak (SyntaxError) Ditolak (SyntaxError) Reassign (Penugasan Ulang) Diizinkan Diizinkan Ditolak (TypeError: Assignment to constant) Perilaku Hoisting Diangkat dengan nilai undefined Diangkat ke Temporal Dead Zone (TDZ) Diangkat ke Temporal Dead Zone (TDZ) Wajib Inisialisasi Nilai Tidak wajib Tidak wajib Wajib langsung diberi nilai saat dibuat

2. Penerapan Nyata: Kapan Menggunakan 'let' vs 'const'?

Gunakan let ketika nilai variabel memang direncanakan untuk mengalami perubahan sepanjang siklus hidup program, seperti indeks perulangan atau status form. Sementara itu, tetapkan const sebagai deklarasi baku untuk konfigurasi API, elemen DOM, maupun fungsi.

// 1. Contoh penggunaan let: Nilai berubah di dalam blok terisolasi
let totalSkor = 50;

if (true) {
  let totalSkor = 100; // Terisolasi di dalam blok if
  console.log('Skor lokal:', totalSkor); // Output: 100
}

console.log('Skor global:', totalSkor); // Output: 50

// 2. Contoh penggunaan const untuk data permanen
const URL_API = 'https://api.domain.com/v1';
// URL_API = 'https://api.lain.com'; // TypeError: Assignment to constant variable

Kesalahan Umum yang Sering Terjadi (Troubleshooting): Banyak pemula mengira bahwa mendeklarasikan objek atau larik menggunakan const membuat isi datanya tidak bisa diubah (immutable). Perlu diingat bahwa const hanya mengunci alamat referensi memorinya, bukan nilai properti di dalamnya. Perintah seperti const user = { nama: 'Budi' }; user.nama = 'Andi'; tetap valid dan tidak akan memicu galat. Jika Anda benar-benar butuh mengunci seluruh properti objek secara permanen, gunakan metode bawaan Object.freeze(user).

3. Transformasi Sintaks ke Arrow Function

Arrow Function menyediakan sintaks yang jauh lebih ringkas untuk mendefinisikan fungsi tanpa kata kunci function eksplisit. Fitur ini sangat efektif digunakan pada fungsi panggilan balik (callback) seperti metode larik map, filter, reduce, atau penanganan event listener DOM.

// 1. Gaya Deklarasi Klasik (Function Declaration)
function kaliDua(angka) {
  return angka * 2;
}

// 2. Gaya Arrow Function Standar (Block Body)
const kaliDuaArrow = (angka) => {
  return angka * 2;
};

// 3. Gaya Ringkas (Implicit Return)
// Tanda kurung kurawal dan kata 'return' ditiadakan untuk ekspresi satu baris
const kaliDuaRingkas = angka => angka * 2;

// Contoh pemanfaatan pada metode map larik
const daftarAngka = [1, 2, 3, 4];
const hasilKuadrat = daftarAngka.map(n => n * 2);
console.log(hasilKuadrat); // Output: [2, 4, 6, 8]

Pola penulisan ringkas (implicit return) membuat alur transformasi data menjadi jauh lebih bersih dan mudah dibaca oleh tim pengembang saat basis kode proyek mulai membesar.

4. Perilaku Lexical 'this' pada Arrow Function

Perbedaan paling substansial antara fungsi biasa dan Arrow Function terletak pada cara pengikatan konteks this. Fungsi biasa membuat konteks this dinamis miliknya sendiri tergantung pada bagaimana atau di mana fungsi tersebut dipanggil saat runtime.

Sebaliknya, Arrow Function tidak memiliki pengikatan this, arguments, maupun super bawaan. Arrow Function mewarisi nilai this secara leksikal dari lingkup induk tempat fungsi tersebut dideklarasikan.

Karakteristik leksikal ini mengeliminasi kebutuhan pola lama seperti var self = this; atau pemanggilan manual .bind(this) saat menjalankan timer atau fungsi callback di dalam metode objek:

// Contoh penyelesaian masalah konteks timer dengan Lexical this
const pengaturWaktu = {
  detik: 0,
  mulai: function () {
    // Arrow function mewarisi 'this' dari metode mulai() milik pengaturWaktu
    setInterval(() => {
      this.detik++;
      console.log('Detik berjalan:', this.detik);
    }, 1000);
  }
};

pengaturWaktu.mulai();

FAQ: Pertanyaan Umum Seputar ES6, Variabel, dan Arrow Function

1. Kapan Arrow Function sebaiknya TIDAK digunakan?

Hindari penggunaan Arrow Function untuk metode objek yang membutuhkan akses ke instans objek itu sendiri melalui this, fungsi konstruktor objek (karena Arrow Function tidak bisa dipanggil dengan operator new), serta penanganan event handler DOM jika Anda memerlukan referensi ke elemen target menggunakan this.

2. Apa yang dimaksud dengan Temporal Dead Zone (TDZ) pada let dan const?

Temporal Dead Zone adalah kondisi temporal di mana variabel let atau const sudah terdaftar di dalam ruang lingkupnya tetapi belum dapat diakses sebelum baris deklarasi dan inisialisasi nilainya dieksekusi oleh mesin JavaScript.

3. Apakah Arrow Function lebih cepat performanya dibanding fungsi biasa?

Dari sisi kecepatan eksekusi mesin V8 peramban, perbedaannya hampir tidak signifikan. Keunggulan utama Arrow Function terletak pada keringkasan penulisan kode serta kemampuannya mengikat konteks this leksikal secara otomatis tanpa alokasi fungsi .bind() tambahan.

4. Bagaimana cara mengembalikan objek secara implisit pada Arrow Function?

Jika ingin mengembalikan objek langsung dalam satu baris ekspresi, bungkus kurung kurawal objek menggunakan tanda kurung biasa: const buatUser = (nama) => ({ nama: nama, status: 'aktif' });. Tanpa tanda kurung pembungkus, peramban akan mengira kurung kurawal tersebut sebagai blok isi fungsi biasa.