Memahami Perbedaan Var, Let, dan Const di JavaScript secara Mendalam

JavaScript merupakan salah satu bahasa pemrograman paling populer di dunia yang digunakan untuk membangun aplikasi web interaktif. Dalam proses pengembangan perangkat lunak menggunakan JavaScript, pemeliharaan dan pengelolaan data di dalam memori dilakukan melalui variabel.

Sebelum hadirnya standar ECMAScript 2015 atau yang lebih dikenal sebagai ES6, para pengembang hanya memiliki satu cara untuk mendeklarasikan variabel, yaitu menggunakan kata kunci var. Namun, pembaruan ES6 membawa perubahan signifikan dengan memperkenalkan dua kata kunci baru, yaitu let dan const.

Bagi pengembang yang baru mempelajari pemrograman web, memahami apa perbedaan var let dan const di javascript merupakan langkah krusial. Pemilihan kata kunci deklarasi yang tepat tidak hanya mencegah timbulnya bug yang sulit dilacak, tetapi juga meningkatkan keterbacaan serta performa kode program Anda.

Memahami Konsep Deklarasi Variabel dalam JavaScript

Variabel dapat dianalogikan sebagai sebuah wadah atau kontainer yang berfungsi untuk menyimpan nilai data di dalam memori komputer. Nilai ini dapat berupa angka, teks, boolean, objek, array, maupun tipe data lainnya.

Proses pembuatan variabel terdiri dari dua tahap utama, yaitu deklarasi dan inisialisasi. Deklarasi adalah proses memperkenalkan nama variabel ke dalam program, sedangkan inisialisasi adalah proses memberikan nilai awal kepada variabel tersebut.

Evolusi dari ES5 ke ES6

Pada era ES5, JavaScript menggunakan skema cakupan fungsi (function scope) untuk mengelola variabel melalui kata kunci var. Sifat fleksibel dari var sering kali menimbulkan perilaku yang tidak terduga dalam skala aplikasi yang besar.

Melihat keterbatasan tersebut, Komite Teknis TC39 merilis spesifikasi ES6 pada tahun 2015. Pembaruan ini memperkenalkan let dan const yang membawa konsep cakupan blok (block scope), memberikan kontrol yang jauh lebih presisi kepada pengembang.

Mengenal Keyword var (Cara Klasik)

Kata kunci var adalah cara tradisional dalam mendeklarasikan variabel di JavaScript sejak awal kemunculan bahasa ini. Meskipun masih didukung untuk menjaga kompatibilitas kode lama (backwards compatibility), penggunaannya pada era modern mulai ditinggalkan.

var nama = "Budi";
console.log(nama); // Output: Budi

Karakteristik Utama var

Variabel yang dideklarasikan dengan var memiliki fleksibilitas yang sangat tinggi. Anda dapat menguji, mengubah, serta mendeklarasikan ulang variabel tersebut di dalam cakupan kode yang sama tanpa memicu pesan kesalahan dari mesin JavaScript.

Cakupan Fungsi (Function Scope)

Salah satu keunikan utama dari var adalah function scope. Artinya, variabel yang dideklarasikan di dalam sebuah fungsi hanya dapat diakses oleh fungsi itu sendiri.

function sapa() 
    var pesan = "Halo Dunia";
    console.log(pesan); // Berhasil diakses


sapa();
// console.log(pesan); // Uncaught ReferenceError: pesan is not defined

Namun, jika var dideklarasikan di dalam blok struktur kontrol seperti if, for, atau while, variabel tersebut tidak terisolasi di dalam blok tersebut. Variabel tersebut akan "bocor" ke luar blok.

if (true) 
    var angka = 10;


console.log(angka); // Output: 10 (Variabel bocor ke luar blok)

Konsep Hoisting pada var

Hoisting adalah perilaku JavaScript yang memindahkan deklarasi variabel dan fungsi ke bagian atas dari cakupannya sebelum kode dieksekusi.

Pada variabel var, proses hoisting akan mengangkat deklarasi ke atas dan menginisialisasinya secara otomatis dengan nilai undefined.

console.log(kota); // Output: undefined (bukan ReferenceError)
var kota = "Jakarta";

Mengenal Keyword let (Pendekatan Modern)

Fitur let diperkenalkan pada ES6 untuk menyelesaikan berbagai kendala yang sering ditemui pada penggunaan var. Kata kunci ini dirancang untuk variabel yang nilainya diperkirakan dapat berubah di kemudian hari selama eksekusi program.

let umur = 20;
umur = 21; // Diizinkan (Re-assignment)
console.log(umur); // Output: 21

Cakupan Blok (Block Scope)

Berbeda dengan var, let mengadopsi sistem block scope. Blok dalam JavaScript ditandai oleh sepasang kurung kurawal .

Variabel yang dideklarasikan di dalam blok menggunakan let hanya dapat diakses dari dalam blok tersebut.

if (true) 
    let skor = 100;
    console.log(skor); // Output: 100


// console.log(skor); // Uncaught ReferenceError: skor is not defined

Larangan Redeklarasi (Re-declaration)

Untuk mencegah ketidaksengajaan menimpa variabel yang sudah ada, let melarang deklarasi ulang variabel dengan nama yang sama di dalam cakupan yang sama.

let pengguna = "Andi";
// let pengguna = "Cici"; // Uncaught SyntaxError: Identifier 'pengguna' has already been declared

Hoisting dan Temporal Dead Zone (TDZ) pada let

Variabel let sebenarnya tetap mengalami hoisting. Namun, tidak seperti var, variabel let tidak diinisialisasi dengan nilai undefined.

Area antara awal cakupan blok hingga baris deklarasi disebut sebagai Temporal Dead Zone (TDZ). Jika Anda mencoba mengakses variabel di area TDZ, JavaScript akan melempar kesalahan ReferenceError.

// console.log(buah); // Uncaught ReferenceError: Cannot access 'buah' before initialization
let buah = "Apel";

Mengenal Keyword const (Untuk Nilai Tetap)

Kata kunci const merupakan singkatan dari constant (konstanta). Sesuai dengan namanya, const digunakan untuk mendeklarasikan variabel yang nilainya bersifat tetap dan tidak boleh diubah setelah proses inisialisasi awal.

const pi = 3.14159;
console.log(pi);

Wajib Diinisialisasi Saat Deklarasi

Saat menggunakan const, Anda wajib memberikan nilai secara langsung pada saat variabel tersebut dideklarasikan. Membiarkan deklarasi const tanpa nilai awal akan menyebabkan kesalahan sintaks.

// const harga; // Uncaught SyntaxError: Missing initializer in const declaration
const harga = 50000; // Benar

Immutability dan Mutabilitas Objek/Array

Sering terjadi kesalahpahaman bahwa nilai yang disimpan di dalam const sama sekali tidak dapat diubah. Pemahaman yang tepat adalah: variabel const mengunci referensi memori, bukan nilai riil di dalamnya jika tipe datanya berupa objek atau array.

Untuk tipe data primitif (seperti string, number, boolean), nilainya memang sama sekali tidak dapat diubah (immutable).

const bahasa = "JavaScript";
// bahasa = "Python"; // Uncaught TypeError: Assignment to constant variable.

Namun, untuk tipe data non-primitif seperti Object dan Array, Anda tetap dapat mengubah, menambah, atau menghapus properti/elemen di dalamnya (mutable).

const mobil = 
    merk: "Toyota",
    warna: "Hitam"
;

// Mengubah properti objek diizinkan
mobil.warna = "Putih"; 
console.log(mobil.warna); // Output: Putih

// Mengganti seluruh referensi objek dilarang
// mobil =  merk: "Honda", warna: "Merah" ; // Uncaught TypeError

Apa Perbedaan Var Let dan Const di Javascript?

Untuk memahami gambaran besarnya, penting bagi kita membandingkan ketiga kata kunci ini berdasarkan beberapa parameter utama. Menjawab pertanyaan tentang apa perbedaan var let dan const di javascript memerlukan analisis terhadap cakupan (scope), reasinyasi (re-assignment), redeklarasi (re-declaration), serta perilaku hoisting.

Berikut adalah penjelasan rinci mengenai poin-poin perbedaannya:

1. Perbedaan Berdasarkan Scope

• var: Menerapkan Function Scope. Variabel terisolasi di dalam fungsi, tetapi dapat diakses di luar blok seperti if atau for.
• let: Menerapkan Block Scope. Variabel hanya hidup di dalam pasangan kurung kurawal tempat ia dideklarasikan.
• const: Menerapkan Block Scope. Sama seperti let, aksesnya terbatas di dalam blok tempat variabel dibuat.

2. Perbedaan Berdasarkan Re-assignment dan Re-declaration

• var: Mendukung re-assignment dan re-declaration tanpa batasan di dalam cakupan yang sama.
• let: Mendukung re-assignment, tetapi menolak re-declaration di dalam cakupan yang sama.
• const: Menolak re-assignment maupun re-declaration. Nilai atau referensinya bersifat tetap.

3. Perbedaan Berdasarkan Hoisting

• var: Di-hoist dan langsung diinisialisasi dengan nilai undefined.
• let: Di-hoist, tetapi tidak diinisialisasi. Berada dalam Temporal Dead Zone hingga baris deklarasinya dieksekusi.
• const: Di-hoist, tidak diinisialisasi, dan berada dalam Temporal Dead Zone. Wajib memiliki nilai saat dideklarasikan.

Tabel Ringkasan Perbedaan

Masalah Umum pada Penggunaan var dalam Praktik

Untuk memahami mengapa industri beralih meninggalkan var, mari kita tinjau contoh kasus klasik yang sering menjadi sumber kebocoran logika (logic bug).

Masalah Asinkron dalam Perulangan (Looping)

Salah satu kasus paling terkenal adalah penggunaan var di dalam perulangan for yang melibatkan fungsi asinkron seperti setTimeout.

for (var i = 1; i <= 3; i++) 
    setTimeout(function() 
        console.log("Angka: " + i);
    , 1000);

Hasil Ekspektasi Pemula:

Angka: 1
Angka: 2
Angka: 3

Hasil Aktual yang Muncul:

Angka: 4
Angka: 4
Angka: 4

Mengapa hal ini terjadi? Karena var bersifat function-scoped, variabel i tidak terisolasi di setiap iterasi perulangan. Hanya ada satu variabel i di memori.

Ketika fungsi di dalam setTimeout dijalankan setelah 1 detik, proses perulangan sudah selesai dan nilai i terakhir adalah 4.

Solusi Menggunakan let

Masalah di atas dapat diselesaikan secara langsung cukup dengan mengganti var menjadi let.

for (let i = 1; i <= 3; i++) 
    setTimeout(function() 
        console.log("Angka: " + i);
    , 1000);

Output:

Angka: 1
Angka: 2
Angka: 3

Karena let memiliki block scope, JavaScript menciptakan cakupan variabel i yang baru dan independen untuk setiap iterasi perulangan.

Panduan dan Praktik Terbaik (Best Practices) Modern

Setelah memahami secara komprehensif apa perbedaan var let dan const di javascript, pertanyaan berikutnya adalah: kapan kita harus menggunakan masing-masing kata kunci tersebut dalam proyek nyata?

Komunitas pengembang JavaScript global dan standar penulisan kode modern (style guide) seperti Airbnb JavaScript Style Guide merekomendasikan aturan praktis sederhana berikut.

1. Gunakan const secara Default

Sebagian besar variabel dalam aplikasi modern tidak membutuhkan perubahan nilai setelah diinisialisasi. Menggunakan const secara default membuat kode Anda lebih aman dari perubahan yang tidak disengaja.

Penggunaan const juga membantu pengembang lain yang membaca kode Anda untuk memahami bahwa nilai tersebut diniatkan untuk tidak berubah.

2. Gunakan let Jika Nilai Variabel Perlu Diubah

Jika Anda memiliki variabel yang nilainya pasti akan dihitung ulang atau diubah di kemudian hari, gunakanlah let.

Contoh penggunaan let yang ideal adalah:

• Variabel penghitung pada perulangan (loop counters).
• Variabel penampung nilai akumulasi.
• Variabel status (state) yang dapat berubah berdasarkan aksi pengguna.

3. Hindari Penggunaan var pada Proyek Baru

Sangat disarankan untuk tidak lagi menggunakan var dalam penulisan kode JavaScript modern. Penggunaan var dapat membuka potensi timbulnya bug akibat hoisting dan ketidakjelasan cakupan variabel.

Satu-satunya alasan menggunakan var saat ini adalah jika Anda sedang memelihara (maintaining) kode warisan (legacy code) berbasis JavaScript lama yang tidak melalui proses build/compilation.

Studi Kasus Pemrograman JavaScript Modern

Mari kita perhatikan bagaimana ketiga kata kunci ini bekerja bersama di dalam sebuah skenario program pengelolaan data transaksi sederhana.

// Menggunakan const untuk konfigurasi dan fungsi yang nilainya tetap
const PAJAK_PERSEN = 0.11;

function hitungTotalBelanja(daftarHarga) 
    // Menggunakan let karena nilainya akan diakumulasi di dalam loop
    let totalAwal = 0;

    for (let i = 0; i < daftarHarga.length; i++) 
        totalAwal += daftarHarga;
    

    // Menggunakan const untuk nilai hasil kalkulasi yang tidak perlu diubah lagi
    const nilaiPajak = totalAwal * PAJAK_PERSEN;
    const totalAkhir = totalAwal + nilaiPajak;

    return 
        totalAwal: totalAwal,
        pajak: nilaiPajak,
        totalAkhir: totalAkhir
    ;


const keranjang = ;
const rincianPembayaran = hitungTotalBelanja(keranjang);

console.log("Total Sebelum Pajak:", rincianPembayaran.totalAwal);
console.log("Besar Pajak:", rincianPembayaran.pajak);
console.log("Total Pembayaran:", rincianPembayaran.totalAkhir);

Pada contoh di atas, penggunaan const dan let secara tepat membuat alur data di dalam fungsi menjadi sangat jelas, prediktif, dan terhindar dari potensi efek samping (side-effects).

Kesimpulan

Memahami konsep variabel merupakan fondasi utama dalam menguasai pemrograman JavaScript. Perubahan dari ES5 ke ES6 melalui kehadiran let dan const telah membawa struktur pemrograman yang lebih teratur dan aman.

Rangkuman poin penting yang perlu diingat:

1. var memiliki cakupan function scope, mengalami hoisting dengan nilai undefined, serta dapat dideklarasikan ulang. Penggunaannya kini dianjurkan untuk dihindari.
2. let memiliki cakupan block scope, nilainya dapat diubah (re-assignable), namun tidak dapat dideklarasikan ulang dalam cakupan yang sama.
3. const memiliki cakupan block scope, nilainya bersifat tetap setelah diinisialisasi, namun properti dari objek atau elemen array di dalamnya masih dapat dimodifikasi.

Dengan menerapkan aturan penulisan variabel secara disiplin—mengutamakan const, memakai let saat dibutuhkan, dan meninggalkan var—Anda dapat menulis kode JavaScript yang lebih bersih, efisien, serta bebas dari kesalahan logika di masa depan.