Memahami Perbedaan var, let, dan const di JavaScript

Pendahulpendahuluan

Halo, selamat datang kembali! Jika kamu baru saja menyelesaikan artikel pertama kita tentang dasar-dasar JavaScript, kamu pasti sudah mulai familiar dengan bagaimana JavaScript bekerja di dalam browser. Pada artikel sebelumnya, kita sudah membahas gambaran umum bagaimana JavaScript bisa membuat halaman web menjadi hidup dan interaktif.

Dalam perjalanan membangun Aplikasi Kuis Interaktif kita, ada satu fondasi yang sangat krusial yang harus kamu kuasai: Variabel. Bayangkan variabel sebagai sebuah wadah atau kotak penyimpanan di dalam memori komputer. Kamu butuh wadah untuk menyimpan nama pemain seperti “Budi”, menyimpan skor saat ini, hingga menyimpan daftar pertanyaan kuis yang kita buat.

Namun, di JavaScript, kita tidak hanya punya satu jenis “kotak”. Ada var, `

Mengenal var: Sang Legenda yang Perlu Berhati-hati

Dahulu, sebelum tahun 2015 (era ES6), var adalah satu-satunya cara bagi developer untuk membuat variabel. Jika kamu melihat kode-kode lama di proyek-proyek besar atau tutorial jadul, kamu akan sangat sering menjumpai var.

var memiliki karakteristik yang disebut dengan Function Scope. Artinya, variabel yang dideklarasikan dengan var hanya akan terbatas di dalam fungsi tempat ia dibuat. Jika dideklarasikan di luar fungsi, ia akan menjadi global. Masalahnya, var tidak mengenal apa yang kita sebut sebagai block scope (seperti di dalam if statement atau for loop).

Selain itu, var memiliki sifat Hoisting. Hoisting adalah perilaku JavaScript yang seolah-olah “mengangkat” deklarasi variabel ke bagian paling atas dari cakupannya sebelum kode dijalankan. Ini seringkali membingungkan pemula.

Mari kita lihat contoh perilaku var yang bisa memicu bug:

// Contoh masalah scope pada var
function cekStok() {
    if (true) {
        var namaBarang = "Sepatu Lari";
        var hargaBarang = 250000; // Rp 250.000
        console.log("Di dalam block:", namaBarang);
    }
    
    // Masalah: variabel ini tetap bisa diakses di luar block 'if'
    // karena var tidak mengenal block scope, hanya function scope.
    console.log("Di luar block (tapi masih dalam fungsi):", nama

    // Redeklarasi juga diperbolehkan pada var, yang bisa merusak logika
    var namaBarang = "Sandal Jepit"; 
    console.log("Setelah redeklarasi:", namaBarang);
}

cekStok();

Dalam pengembangan aplikasi skala besar seperti Tokopedia atau Gojek, penggunaan var yang tidak terkontrol bisa menyebabkan variabel “bocor” ke bagian kode lain yang tidak seharusnya, menyebabkan bug yang sangat sulit dilacak.

Mengenal let: Solusi Modern untuk Nilai yang Berubah

Seiring berkembangnya JavaScript (ES6), diperkenalkanlah let. let hadir untuk memperbaiki kelemahan var. Perbedaan paling fundamental adalah let menggunakan Block Scope.

Block scope artinya variabel hanya akan hidup di dalam kurung kurawal { ... } tempat ia dideklarasikan. Jika kamu membuat let di dalam sebuah if atau loop, variabel tersebut akan “mati” setelah blok tersebut selesai dieksekusi. Ini jauh lebih aman dan rapi.

let juga tidak memperbolehkan kita melakukan redeklarasi dalam scope yang sama. Jadi, jika kamu tidak sengaja menulis nama variabel yang sama dua kali, JavaScript akan langsung protes.

// Contoh penggunaan let yang aman
function simulasiBelanja() {
    let totalBelanja = 50000; // Rp 50.000
    let namaPembeli = "Siti";

    if (totalBelanja > 20000) {
        let diskon = 5000; // Rp 5.000
        totalBelanja = totalBelanja - diskon; // Reassignment (mengubah nilai) diperbolehkan
        console.log("Diskon diterapkan. Total sekarang:", totalBelanja);
    }

    // console.log(diskon); // Error! 'diskon' tidak dikenal di luar block 'if'
    
    console.log("Total akhir belanja", namaPembeli, "adalah:", totalBelanja);
}

simulasiBelanja();

Gunakan let ketika kamu tahu bahwa nilai dari variabel tersebut akan berubah di tengah jalan, misalnya untuk penghitung (counter) atau akumulator nilai.

Mengenal const: Si Tetap yang Tidak Bisa Diganti

Nama const berasal dari kata constant (konstan). Sesuai namanya, const digunakan untuk mendeklarasikan variabel yang nilainya tidak boleh diubah setelah diberikan nilai awal (assignment).

Sama seperti let, const juga memiliki Block Scope. Perbedaan utamanya adalah kamu wanda (wajib) memberikan nilai saat deklarasi, dan kamu tidak bisa melakukan reassignment (mengisi ulang nilai) pada variabel tersebut.

Namun, ada satu catatan penting bagi developer: jika const berisi sebuah Object atau Array, kamu masih bisa mengubah isi di dalam object/array tersebut, namun kamu tidak bisa mengganti seluruh object/array-nya dengan yang baru.

// Contoh penggunaan const
const namaAplikasi = "Kuis Pintar"; // Nama aplikasi tidak akan berubah
const pajakPBB = 0.1; // Nilai pajak tetap

// const tahun = 2024; // Error! Harus langsung diberi nilai saat deklarasi
// tahun = 2025; // Error! Nilai const tidak bisa diubah (reassignment)

// Contoh const dengan Array (Object)
const daftarPertanyaan = ["Apa ibukota Indonesia?", "Siapa presiden pertama RI?"];

// Kita tidak bisa mengganti isi array secara total
// daftarPertanyaan = ["Pertanyaan Baru"]; // Error!

// TAPI, kita bisa menambah atau mengubah isi di dalamnya
daftarPertanyaan.push("Berapa 1 + 1?"); 
console.log("Daftar pertanyaan terbaru:", daftarPertanyaan);

Dalam praktik profesional, sangat disarankan untuk menggunakan const sebagai pilihan utama. Gunakan let hanya jika kamu benar-benar tahu bahwa variabel tersebut perlu diubah nilainya. Hindari var kecuali kamu sedang mengerjakan proyek warisan (legacy code) yang sangat lama.

Implementasi dalam Proyek: Aplikasi Kuis Interaktif

Sekarang, mari kita terapkan ilmu ini ke dalam proyek Aplikasi Kuis Interaktif kita. Kita akan melihat bagaimana pembagian peran antara const dan let dalam kode nyata.

Perhatikan file script.js di bawah ini:

// 1. Gunakan const untuk data yang bersifat statis (tidak berubah)
const quizData = [
    {
        question: "Siapa penemu JavaScript?",
        a: "Brendan Eich",
        b: "Mark Zuckerberg",
        c: "Bill Gates",
        correct: "a",
    },
    {
        question: "Apa singkatan dari DOM?",
        a: "Document Object Model",
        b: "Data Object Management",
        c: "Digital Online Media",
        correct: "a",
    }
];

// 2. Gunakan let untuk data yang nilainya akan berubah selama kuis berjalan
let currentQuestionIndex = 0;
let score = 0;

// Fungsi untuk mengecek jawaban
function checkAnswer(answer) {
    const correctAnswer = quizData[currentQuestion].correct;
    
    if (answer === correctAnswer) {
        score++; // Nilai skor bertambah
        alert("Benar!");
    } else {
        alert("Salah!");
    }
}

// Logika sederhana untuk berpindah pertanyaan
function nextQuestion() {
    currentQuestion++;
    // ... logika selanjutnya
}

Dalam skenario ini, quizData tidak akan pernah berubah isinya selama aplikasi berjalan, maka const adalah pilihan terbaik. Sementara score dan currentQuestion akan terus bertambah, sehingga kita wajib menggunakan let.

Kesimpulan Ringkas

Langkah berikutnya: Panduan Lengkap Tipe Data dan Operator JavaScript — setelah tahu cara menyimpan data, sekarang pelajari jenis-jenis data dan cara memanipulasinya.

Dengan memahami kapan harus menggunakan let dan const, kode Anda akan menjadi lebih aman, lebih mudah dibaca, dan terhindar dari bug yang tidak terduga akibat perubahan variabel yang tidak disengaja.