let dan const — Mengontrol Reassignment dan Redeclaration

Baik kamu sedang menjumlahkan total order atau menampilkan nama user yang login, kamu perlu memberi value sebuah nama supaya bisa merujuknya berulang kali. Nama itu adalah variable (nama yang melekat pada sebuah value — tulis namanya, dan kamu dapat value yang sama lagi).

JavaScript memberimu 2 cara membuat variable, const dan let, dan mana yang kamu pilih menentukan apakah kamu bisa menukar ke value lain nanti.

Menamai Sebuah Value — Memilih Antara const dan let

Tulis value yang sama langsung di banyak tempat di kodemu, dan kamu harus mencari tiap kemunculannya saat perlu diubah. Beri value seperti harga satuan atau tax rate sebuah nama di awal, dan rujuk nama itu sejak saat itu.

Baris tempat kamu menamainya disebut declaration (baris yang membuat nama sebuah variable dan memberinya value pertama).

Declaration JavaScript memutuskan, di saat yang sama saat membuat namanya, apakah isi nama itu bisa ditukar nanti. Pakai const kalau tidak, let kalau bisa.

Memasukkan value berbeda ke nama yang sudah ada disebut reassignment (memberi nama yang sudah dideklarasikan value berbeda belakangan). Nama yang dideklarasikan dengan const tidak bisa di-reassign, jadi default yang berguna adalah tulis const dulu, dan baru ganti ke let kalau muncul baris yang perlu me-reassign-nya.

const — Untuk Value yang Tidak Kamu Tukar

const mengunci sebuah value di baris tempat kamu mendeklarasikannya, dan nama itu tidak pernah menerima value berbeda setelah itu. Hal-hal seperti nama produk, harga satuan, atau tax rate — value yang tetap sama selagi proses berlanjut — cocok di sini, dan sebagian besar value dalam program cocok di sini.

Sederet karakter yang dibungkus tanda kutip, seperti "Insulated Mug", disebut string, dan angka seperti 1200 adalah number. Keduanya dibahas lebih detail di artikel 3 dan 4.

console.log, yang muncul di contoh kode berikutnya, adalah instruksi yang menampilkan value apa pun yang kamu berikan padanya, di dalam tanda kurung, ke layar hasil sebagai text. Console situs ini tidak punya layar, jadi kamu berikan padanya value apa pun yang mau kamu cek.

Semua yang dimulai dari // sampai akhir baris adalah comment (text penjelasan yang ditinggalkan di kode dan tidak pernah dijalankan) dan tidak akan muncul di output. Baris seperti // ① yang sudah tertulis di latihan adalah catatan sejenis ini juga.

// Value yang tidak kamu tukar pakai const
const productName = "Insulated Mug";
const unitPrice = 1200;

console.log(productName);   // Insulated Mug
console.log(unitPrice);     // 1200

Simpan satu produk online store ke dalam variable dan tampilkan.

① Deklarasikan productName sebagai "Insulated Mug", unitPrice sebagai 1200, dan quantity sebagai 3, semuanya dengan const.

② Tampilkan isi productName.

③ Hitung subtotal dari harga satuan dan quantity, lalu tampilkan.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

let — Variable yang Akan Kamu Tukar Value-nya Belakangan

Pakai let untuk hal-hal seperti jumlah stok atau running total — value yang isinya berubah selagi proses berlanjut. Sisi kanan = membaca value saat ini apa adanya, jadi kamu bisa membaca value saat ini, menghitung dengannya, dan me-reassign hasilnya kembali ke nama yang sama.

let orderTotal = 0;

orderTotal = orderTotal + 1200;  // Baca 0 saat ini, tambah 1200, reassign
orderTotal = orderTotal + 400;   // Baca 1200 saat ini, tambah 400, reassign

console.log(orderTotal);         // 1600

Jumlah stok sebuah gudang berubah tiap kali ada pengiriman dan penerimaan. stockCount sudah dideklarasikan dengan let.

① Setelah pengiriman mengurangi stok sebanyak 3, reassign jumlah barunya ke stockCount dan tampilkan.

② Lalu, setelah penerimaan menambah 10, reassign jumlah barunya ke stockCount dan tampilkan.

Reassignment vs Redeclaration — Dua Error yang Menghentikan Eksekusi

Memilih const berarti memutuskan, langsung di kode itu, bahwa isi nama ini tidak pernah berubah.

Beri value berbeda setelah itu, dan JavaScript menghentikan eksekusi di baris itu dan melempar TypeError (error karena memakai value dengan cara yang salah). Tidak ada yang berjalan setelah baris itu.

Cara lain menghentikan eksekusi adalah redeclaration (mendeklarasikan lagi nama yang sudah dipakai, di scope yang sama). Baik const maupun let tidak mengizinkannya — kamu dapat SyntaxError (error karena kode sama sekali tidak mengikuti grammar bahasanya).

Ini langsung menangkap typo di nama, atau nama yang tidak sengaja dipakai ulang untuk hal lain.

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

Kalau kamu cuma mau menukar value, deklarasikan hanya sekali, lalu assign ke namanya di tiap baris setelahnya. Baris tanpa keyword declaration adalah reassignment, jadi dengan let itu tidak akan menghentikan eksekusi.

let itemQuantity = 1;

itemQuantity = 2;            // Tanpa keyword declaration, jadi ini reassignment
console.log(itemQuantity);   // 2

Error-nya Muncul di Waktu yang Berbeda

TypeError dari reassignment muncul di baris itu, begitu eksekusi sampai di sana — jadi apa pun yang berjalan sebelumnya tetap muncul di output.

SyntaxError dari redeclaration muncul saat kode sedang di-parse, jadi tidak ada yang berjalan, bahkan baris 1 pun tidak. Kalau kamu tidak melihat output sama sekali, curigai syntax error dulu.

Value yang tidak berubah, seperti tax rate, dideklarasikan dengan const. Kode di bawah mencoba me-reassign tax rate itu setelahnya. Jalankan apa adanya dan cek sejauh mana itu berjalan dan message apa yang menghentikannya. (Kali ini kamu cukup menjalankan kode dan membaca hasilnya — tanpa mengedit.)

Menamai Variable — camelCase dan Karakter yang Diizinkan

Nama variable adalah tempat kamu memberitahu pembaca apa sebenarnya value itu. Nama seperti a atau data membuatmu balik lagi ke declaration tiap kali membaca baris yang jauh. Nama seperti unitPrice atau stockCount membuat isinya bisa langsung terbaca dari namanya.

Nama bisa memakai huruf, angka, underscore, dan tanda dolar, dan tidak bisa dimulai dengan angka. Huruf besar-kecil berpengaruh, jadi stockcount dan stockCount adalah variable yang berbeda.

Kata yang sudah diberi makna oleh JavaScript, seperti const / let / if (reserved word), tidak bisa dipakai sebagai nama.

Untuk nama yang terdiri dari 2 kata atau lebih, pakai camelCase (mulai kata pertama dengan huruf kecil, kapitalkan hanya huruf pertama tiap kata setelahnya). priceWithTax atau orderTotal berbentuk seperti ini.

Built-in function dan property JavaScript juga mengikuti bentuk yang sama, jadi menyesuaikannya membuat namamu sendiri tidak menonjol aneh.

const listPrice = 1250;
const discountRate = 0.15;                 // Diskon member 15%

// Namanya memberitahu apa arti amount ini
const discountedPrice = listPrice * (1 - discountRate);
console.log(discountedPrice);              // 1062.5

// Bulatkan ke bawah untuk apa pun di bawah 1
console.log(Math.floor(discountedPrice));  // 1062

Hitung total untuk 2 unit item makanan yang kena tax rate 8% (rate lebih rendah). unitPrice, quantity, dan taxRate sudah dideklarasikan.

① Simpan subtotal sebelum pajak ke variable dengan nama camelCase.

② Simpan harga sudah termasuk pajak — subtotal yang sudah dikenakan pajak — ke nama camelCase yang berbeda, lalu tampilkan.

Kenapa Bukan var

Kode lama dan tutorial lama memperkenalkan declaration ketiga, var. var membiarkanmu mendeklarasikan ulang nama yang sama berapa kali pun, tidak error kalau kamu merujuknya sebelum baris declaration-nya, dan cuma lanjut dengan value yang belum di-set. Scope tempat sebuah nama berlaku juga bekerja berbeda dari const / let.

Karena tidak menandai kesalahan di tempat, melacak penyebabnya jadi lebih lama.

Kode Baru Tidak Memakai var

const dan let sama-sama menandai redeclaration dan referensi sebelum declaration sebagai error. Kursus ini juga tidak memakai var mulai dari sini. Mekanisme lengkap scope sendiri dibahas di artikel scope pada kategori syntax.

Artikel ini membahas menamai value dengan const dan let, TypeError dari reassign sebuah const, SyntaxError dari redeclaration, dan aturan penamaan termasuk camelCase. Value yang tidak kamu tukar pakai const; hanya value yang akan kamu tukar yang pakai let — pilihan itu terbawa di setiap kode mulai dari sini.