Variables

Sebuah mesin kasir tidak cukup hanya menghitung: harga dan jumlah pesanan berubah sepanjang hari, pelanggan bisa menambah pesanan, dan total harus mengikuti perubahan tersebut. Program pun membutuhkan tempat menyimpan nilai yang bisa dibaca ulang dan diperbarui kapan pun. Tempat itu disebut variable — sebuah wadah bernama yang memegang satu nilai selama program berjalan.

Chapter ini melatih siklus dasar penggunaan variabel: mendeklarasikan wadah, mengisinya, membacanya, lalu memperbaruinya dengan nilai baru. Kita menguji semuanya lewat satu berkas contoh di Node, dan menutup dengan satu perilaku penting: apa yang terjadi ketika wadah belum diisi.

Deklarasi dan Assignment #

Statement deklarasi dengan kata kunci let membuat wadah bernama, lalu tanda = mengisinya dengan hasil evaluasi expression di sebelah kanan. Proses pengisian pertama ini disebut assignment (lebih tepatnya, inisialisasi). Kedua langkah boleh digabung dalam satu baris:

let namaKopi = "Kopi Gayo"; // deklarasi + assignment sekaligus

Ketika engine membaca baris tersebut, engine menciptakan wadah bernama namaKopi, mengevaluasi expression "Kopi Gayo", lalu menyimpan hasilnya ke dalam wadah itu. Nama let bisa diingat sebagai penanda “wadah yang isinya diperbolehkan berubah” — perbandingan penuh dengan const dan var kita bahas di chapter berikutnya.

Membaca dan Memperbarui Nilai #

Isi variabel dibaca cukup dengan menyebut namanya. Setiap kali engine menemui nama variabel di dalam expression, engine mengganti nama itu dengan nilai yang sedang disimpan:

let hargaCangkir = 18000;
console.log(hargaCangkir);

Nilai lama juga bisa ditimpa dengan assignment baru, termasuk menimpa dengan hasil perhitungan dari nilai lamanya. Pola ini akan terus kita pakai, misalnya untuk menambah saldo:

let saldo = 50000;
saldo = saldo + 25000; // nilai lama 50000 dibaca, dijumlahkan, lalu disimpan kembali
console.log(saldo);

Output yang Dihasilkan:

75000

Engine mengevaluasi sisi kanan terlebih dahulu: nilai saldo saat itu (50000) dijumlahkan dengan 25000, menghasilkan 75000, dan hasil inilah yang disimpan kembali ke saldo. Bentuk ringkas untuk pola seperti ini (+= dan kawan-kawannya) menunggu kita di section Operators.

Wadah Tanpa Isi: undefined #

Deklarasi tanpa assignment tetap sah. Wadahnya tercipta, tetapi belum memegang nilai apa pun; ketika dibaca, wadah tersebut menghasilkan nilai khusus bernama undefined. Nilai ini adalah penanda bawaan JavaScript untuk “belum diisi”, bukan pesan kesalahan:

let catatanPesanan;
console.log(catatanPesanan); // wadah ada, isinya masih undefined

Output yang Dihasilkan:

undefined

Setelah diisi belakangan, wadah yang sama berperilaku seperti variabel biasa. Kita akan melihat kedua fase ini dalam satu berkas pada contoh utama.

Variabel Baru Tersedia Setelah Deklarasinya #

Engine mengeksekusi statement berurutan, dan nama variabel baru baru bisa dibaca mulai dari baris setelah deklarasinya dieksekusi. Aturan ini menjadikan urutan baris penting dengan cara kedua: selain nilai bergantung pada pembaruan sebelumnya, pembacaan nama pun bergantung pada posisi deklarasinya. Membaca variabel let sebelum baris deklarasinya tidak melanjutkan program, melainkan menghentikannya dengan ReferenceError — perilaku ini kita buktikan langsung di chapter berikutnya.

Contoh Lengkap: Kasir Kopi #

Berkas berikut merangkum seluruh siklus di atas — deklarasi, pembacaan, pembaruan, dan wadah yang diisi belakangan — dalam simulasi mini kasir kedai kopi:

// kasir-kopi.js
// Simulasi mini mesin kasir kedai kopi untuk melatih kerja variabel.

let namaKopi = "Kopi Gayo";   // deklarasi sekaligus assignment
let hargaCangkir = 18000;     // harga per cangkir
let jumlahCangkir = 3;

let total = hargaCangkir * jumlahCangkir;

console.log("Pesanan:", namaKopi);
console.log("Total sementara:", total);

// Pelanggan menambah satu cangkir lagi.
jumlahCangkir = jumlahCangkir + 1;    // nilai lama 3 dievaluasi jadi 4, lalu disimpan
total = hargaCangkir * jumlahCangkir; // dihitung ulang dengan nilai baru

console.log("Jumlah cangkir sekarang:", jumlahCangkir);
console.log("Total akhir:", total);

// Deklarasi tanpa assignment: wadah sudah ada, isinya masih kosong.
let nomorAntrean;
console.log("Nomor antrean:", nomorAntrean);

nomorAntrean = 7; // wadah diisi belakangan
console.log("Nomor antrean:", nomorAntrean);

Output yang Dihasilkan:

Pesanan: Kopi Gayo
Total sementara: 54000
Jumlah cangkir sekarang: 4
Total akhir: 72000
Nomor antrean: undefined
Nomor antrean: 7

Mari kita telaah apa yang terjadi pada baris-baris kode di atas:

1. Baris 4–6 (let namaKopi = "Kopi Gayo"; dst.): tiga wadah dibuat sekaligus — teks nama pesanan, angka harga per cangkir, dan angka jumlah cangkir. Tiga variabel tiga baris lebih mudah dipindai daripada satu baris panjang.
2. Baris 8 (let total = hargaCangkir * jumlahCangkir;): engine mengevaluasi 18000 * 3 menjadi 54000, lalu menyimpan hasilnya ke total. Variabel total bukan rumus yang terus berjalan, melainkan potret nilai pada saat baris ini dieksekusi.
3. Baris 10–11 (console.log(...)): dua pembacaan pertama menampilkan isi namaKopi dan total sesuai urutan statement.
4. Baris 14 (jumlahCangkir = jumlahCangkir + 1;): nilai lama 3 dibaca, ditambah satu, dan hasilnya (4) disimpan kembali ke wadah yang sama. Inilah pola pembaruan berbasis nilai lama.
5. Baris 15 (total = hargaCangkir * jumlahCangkir;): total dihitung ulang dengan jumlahCangkir yang baru. Tanpa baris ini, total akan tetap 54000 meskipun jumlah cangkir sudah berubah — kesalahan klasik yang sering muncul.
6. Baris 17–18 (console.log(...)): keluaran Jumlah cangkir sekarang: 4 dan Total akhir: 72000 membuktikan bahwa pembaruan dua baris di atas benar-benar berdampak.
7. Baris 21–22 (let nomorAntrean; lalu console.log(...)): wadah dideklarasikan tanpa isi, sehingga pembacaannya menghasilkan undefined.
8. Baris 24–25 (nomorAntrean = 7; lalu console.log(...)): wadah yang tadi kosong diisi 7; pembacaan berikutnya menampilkan 7, bukan undefined.

Satu hal terakhir yang perlu diingat: wadah bernilai undefined bukan error, tetapi sering menjadi gejala bug (misalnya typo pada nama variabel). Chapter Debugging Dasar di akhir section ini memperlihatkan cara melacaknya. Sekarang, mari kita perketat aturan wadah itu sendiri dengan const dan perbandingan var — topik chapter berikutnya.

// kasir-kopi.js
// Simulasi mini mesin kasir kedai kopi untuk melatih kerja variabel.

let namaKopi = "Kopi Gayo";   // deklarasi sekaligus assignment
let hargaCangkir = 18000;     // harga per cangkir
let jumlahCangkir = 3;

let total = hargaCangkir * jumlahCangkir;

console.log("Pesanan:", namaKopi);
console.log("Total sementara:", total);

// Pelanggan menambah satu cangkir lagi.
jumlahCangkir = jumlahCangkir + 1;    // nilai lama 3 dievaluasi jadi 4, lalu disimpan
total = hargaCangkir * jumlahCangkir; // dihitung ulang dengan nilai baru

console.log("Jumlah cangkir sekarang:", jumlahCangkir);
console.log("Total akhir:", total);

// Deklarasi tanpa assignment: wadah sudah ada, isinya masih kosong.
let nomorAntrean;
console.log("Nomor antrean:", nomorAntrean);

nomorAntrean = 7; // wadah diisi belakangan
console.log("Nomor antrean:", nomorAntrean);