let vs const vs var JavaScript: Scope, Hoisting, dan Kapan Memakainya

Tiga Kata Kunci, Satu Tugas

JavaScript punya tiga cara untuk mendeklarasikan variabel: var, let, dan const. Semuanya mengikat sebuah nama ke sebuah nilai, tetapi berbeda dalam hal scope, aturan pengisian ulang, dan perilakunya sebelum deklarasi berjalan. Kode modern paling sering memakai const, memakai let saat sebuah nilai perlu berubah, dan jarang sekali, kalau pernah, memakai var.

Versi singkatnya:

const pi = 3.14159;      // can't be reassigned
let count = 0;           // can be reassigned
var legacy = "old school"; // works, but avoid

count = count + 1;
console.log(pi, count, legacy);

Sisa halaman ini menjelaskan mengapa ketiga baris itu berperilaku seperti itu.

const: Pilihan Default

const membuat binding yang tidak bisa diisi ulang. Begitu kamu menulis const x = 5, kamu tidak bisa lagi menulis x = 6 nanti, karena engine akan memunculkan TypeError.

const rate = 0.08;
console.log(rate);

// rate = 0.09;   // TypeError: Assignment to constant variable.

Itulah seluruh aturannya. Karena sebagian besar variabel dalam program yang ditulis dengan baik tidak perlu diisi ulang, const cocok untuk sebagian besar kasus. Memilih const lebih dulu membuat tempat-tempat di mana sebuah nilai memang berubah jadi menonjol.

Satu sumber kebingungan yang umum: const melindungi binding-nya, bukan nilainya. Kalau nilainya berupa objek atau array, isinya tetap bisa diubah:

const user = { name: "Ada" };
user.name = "Boris";         // fine - mutating the object
user.role = "admin";         // fine - adding a property
console.log(user);

// user = { name: "Rosa" };  // TypeError - reassigning the binding

const berarti "nama ini selalu menunjuk ke objek ini." Bukan berarti "objek ini tidak pernah berubah." Kalau kamu butuh objeknya sendiri dibekukan, Object.freeze(user) adalah alatnya, tetapi dalam praktiknya kebanyakan kode cukup mengandalkan konvensi bahwa objek const sebaiknya tidak diubah.

let: Saat Kamu Benar-Benar Perlu Mengisi Ulang

let sama dengan const dalam segala hal, kecuali kamu bisa mengisinya ulang. Pakai untuk counter, akumulator, variabel loop, dan di mana pun sebuah nilai memang berubah seiring waktu.

let attempts = 0;
while (attempts < 3) {
    attempts += 1;
    console.log("attempt", attempts);
}

Kalau kamu mendapati dirimu menulis let tetapi tidak pernah mengisi ulang variabelnya, ganti menjadi const. Linter di kebanyakan proyek akan mengingatkanmu.

Block Scope

let dan const sama-sama memiliki scope blok. Blok adalah apa pun di antara { dan }: isi sebuah if, sebuah for, sebuah fungsi, atau bahkan blok { ... } yang berdiri sendiri. Variabel yang dideklarasikan di dalam blok tidak ada di luarnya.

if (true) {
    const message = "hello from inside";
    console.log(message);
}

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

Inilah yang kamu inginkan. Variabel tetap terbatas pada pekerjaan yang menjadi tempatnya, dan bentrok nama yang tidak disengaja jadi mustahil terjadi.

var tidak melakukan ini, dan itulah alasan utama untuk menghindarinya.

var: Scope Fungsi dan Kejutan-Kejutannya

Scope var adalah fungsi terdekat, bukan blok terdekat. Artinya var yang dideklarasikan di dalam if atau for bocor keluar ke fungsi di sekitarnya:

function demo() {
    if (true) {
        var leaked = "I escaped";
        let contained = "I did not";
    }
    console.log(leaked);       // "I escaped"
    // console.log(contained); // ReferenceError
}

demo();

Scope yang longgar itu adalah sumber daftar panjang bug klasik JavaScript, yang paling terkenal adalah loop di mana setiap iterasi memakai var i yang sama dan semua callback akhirnya melihat nilai terakhirnya.

var juga membiarkanmu mendeklarasikan ulang nama yang sama di scope yang sama tanpa protes, yang menyembunyikan salah ketik:

var count = 1;
var count = 2;   // silently fine with var
console.log(count);

let total = 1;
// let total = 2;   // SyntaxError: Identifier 'total' has already been declared

Kode modern hampir hanya memakai let dan const. var muncul di codebase lawas, jawaban Stack Overflow yang sudah tua, dan script yang harus berjalan di lingkungan yang sangat lama.

Hoisting dan Temporal Dead Zone

Ketiga deklarasi mengalami hoisting, artinya engine sudah mengetahuinya sebelum menjalankan kode di bloknya, tetapi perilakunya berbeda sebelum baris deklarasinya berjalan.

var mengalami hoisting dan diinisialisasi dengan undefined. Kamu bisa merujuknya sebelum baris var tanpa error:

console.log(early);   // undefined - no error
var early = "hello";
console.log(early);   // "hello"

let dan const mengalami hoisting tetapi tidak diinisialisasi. Menyentuhnya sebelum deklarasi akan memunculkan error. Jendela antara masuk ke scope dan berjalannya deklarasi ini disebut temporal dead zone (TDZ):

// console.log(planned);   // ReferenceError: Cannot access 'planned' before initialization
let planned = "hello";
console.log(planned);

TDZ adalah fitur, bukan bug. Ia mengubah "dipakai sebelum dideklarasikan" dari undefined yang diam-diam menjadi error yang lantang, sehingga menangkap banyak salah ketik dan kesalahan urutan.

Variabel Loop const di for...of

Kasus kecil tetapi umum: loop for...of membuat binding baru di setiap iterasi, jadi kamu bisa memakai const untuk variabel loop-nya walaupun nilainya "berubah" di antara iterasi.

const names = ["Ada", "Boris", "Rosa"];

for (const name of names) {
    console.log(name);
}

Setiap iterasi mendapat binding name sendiri; tidak ada satu variabel yang diisi ulang. for (let i = 0; i < n; i++) klasik tetap butuh let, karena i adalah satu binding yang terus ditambah.

Aturan Praktis

Pilih deklarasi dengan urutan preferensi ini:

• const sebagai default. Kalau nilainya tidak akan diisi ulang, nyatakan begitu.
• let saat binding-nya memang perlu berubah.
• var hanya saat bekerja di codebase yang mewajibkannya.

Kalau diterapkan secara konsisten, maksud setiap variabel jadi jelas sekilas: bisa diisi ulang atau tidak, terbatas pada blok ini atau fungsi ini.

const MAX_RETRIES = 3;
const users = ["Ada", "Boris", "Rosa"];

let successful = 0;
for (const user of users) {
    // pretend we tried to do something
    successful += 1;
}

console.log(`${successful}/${users.length} succeeded, up to ${MAX_RETRIES} retries`);

MAX_RETRIES dan users tidak pernah berubah, jadi const. successful bertambah, jadi let. user adalah binding baru di setiap iterasi, jadi const. Membaca dari atas ke bawah, kamu bisa tahu nilai mana yang berubah dan mana yang tidak tanpa menjalankan kodenya.

Berikutnya: Tipe Primitif

Sekarang kamu sudah bisa mendeklarasikan variabel, pertanyaan berikutnya adalah jenis nilai apa yang bisa disimpannya. JavaScript punya sekumpulan kecil tipe primitif, seperti angka, string, boolean, dan beberapa lainnya, masing-masing dengan keanehannya sendiri. Itu topik halaman berikutnya.