Variabel, Tipe Data, dan Operator di JavaScript

Di artikel sebelumnya kita sudah kenalan dengan JavaScript, si otak di balik web yang interaktif. Sekarang saatnya memegang alat pertamamu yang sesungguhnya: variabel. Kalau seri JavaScript Basic ini sebuah perjalanan masak, artikel kemarin itu kita baru masuk dapur dan melihat-lihat. Hari ini kita mulai memegang pisau.

Kenapa variabel dulu? Karena hampir tidak ada program di dunia ini yang tidak menyimpan data. Skor game, nama pengguna, harga barang di keranjang belanja, semua itu disimpan di variabel. Tanpa variabel, JavaScript cuma bisa menghitung lalu langsung lupa hasilnya. Kamu tidak bisa bikin aplikasi to-do list, tidak bisa bikin kalkulator, tidak bisa bikin apa-apa yang berguna.

Di akhir artikel ini kamu akan paham tiga hal: cara menyimpan data dengan let dan const, cara mengenali jenis data dengan tipe data, dan cara mengolahnya dengan operator. Tiga hal ini akan dipakai di setiap artikel JavaScript berikutnya, jadi pastikan fondasinya kokoh.

Variabel Itu Seperti Kotak Berlabel

Bayangkan kamu punya gudang berisi banyak kotak kardus. Setiap kotak ditempeli label: "gula", "tepung", "cabai". Kalau kamu butuh gula, kamu tidak perlu mengingat kotak itu ada di rak nomor berapa, cukup cari label "gula".

Variabel bekerja persis seperti itu. Ia adalah kotak bernama tempat JavaScript menyimpan sebuah nilai. Kamu memberi nama, JavaScript yang mengingat lokasinya di memori.

let nama = "Adit";
let umur = 17;
let sudahMakan = true;

Cara bacanya: "buatkan kotak berlabel nama, isi dengan teks Adit". Kata let artinya "saya mau bikin variabel baru". Isi kotak bisa diganti kapan saja:

let skor = 0;
skor = 10;
skor = skor + 5;
console.log(skor); // 15

Perhatikan baris ketiga. Ini membingungkan pemula di semua bahasa pemrograman: skor = skor + 5. Kalau dibaca sebagai persamaan matematika, ini tidak masuk akal. Tapi tanda = di programming bukan berarti "sama dengan", melainkan "isi kotak di kiri dengan hasil perhitungan di kanan". Jadi: ambil isi kotak skor (10), tambah 5, simpan lagi ke kotak skor. Sekarang isinya 15.

let x = 5;
x = x + 3;
x = x * 2;
console.log(x);

let, const, dan var: Tiga Cara Bikin Kotak

JavaScript punya tiga kata kunci untuk membuat variabel: var, let, dan const. Yang pertama, var, adalah cara lama dari zaman JavaScript purba. Ia punya perilaku aneh (bisa dipakai sebelum dideklarasikan, bisa dideklarasikan ulang tanpa protes) yang jadi sumber bug legendaris. Aturan main di dapur ini: lupakan var. Kamu hanya akan menemukannya di kode lama orang lain.

Tinggal let dan const. Bedanya sederhana:

• let: isi kotaknya boleh diganti. Pakai untuk nilai yang memang berubah, seperti skor, jumlah barang, atau teks input pengguna.
• const: isi kotaknya tidak boleh diganti setelah diisi pertama kali. Pakai untuk nilai yang tetap, seperti nama aplikasi atau harga yang sudah pasti.

const namaToko = "Kompor Kode";
namaToko = "Dapur Kode"; // ERROR! Tidak boleh ganti isi const

Kebiasaan yang bagus: pakai const dulu sebagai bawaan, baru ganti ke let kalau ternyata nilainya memang perlu berubah. Kenapa? Karena kalau sebuah nilai tidak sengaja berubah padahal seharusnya tetap, itu bug yang susah dilacak. Dengan const, JavaScript langsung protes saat kamu mencoba mengubahnya, jadi bugnya ketahuan di awal, bukan tiga minggu kemudian.

const harga = 50000;
let diskon = 10;
harga = 45000;
diskon = 15;

Dua Persepsi yang Sering Salah

Pertama: "const artinya nilainya tidak bisa diubah sama sekali." Hampir benar, tapi ada pengecualian penting yang akan kita bahas tuntas di artikel array dan object nanti. Bocorannya: const mengunci kotaknya (tidak bisa diganti isinya dengan kotak lain), tapi kalau isi kotaknya berupa daftar belanjaan, daftarnya masih bisa ditambah item. Bedakan "ganti kotak" dengan "utak-atik isi kotak".

Kedua: "tipe data harus dihafal semua sebelum ngoding." Tidak. Kamu cukup kenal yang sering dipakai dulu: teks, angka, dan benar/salah. Sisanya akan nempel sendiri seiring kamu praktik. Programmer profesional pun masih sesekali membuka dokumentasi. Yang penting bukan hafalan, tapi paham cara berpikirnya: data itu ada jenisnya, dan jenis yang beda diperlakukan beda.

Tipe Data: Kenali Isi Kotakmu

Kembali ke analogi gudang. Kotak berlabel "gula" isinya gula, kotak "tepung" isinya tepung. Kamu tidak akan menaruh ikan di kotak gula. Di JavaScript, setiap nilai punya tipe, dan tipe menentukan apa yang bisa dilakukan dengannya. Ini tipe yang paling sering kamu temui:

• String (teks): selalu diapit tanda kutip. "Halo", 'Kompor Kode'. Tanpa kutip, JavaScript mengira itu nama variabel.
• Number (angka): 17, 3.14, -5. Tidak ada pemisah ribuan, jadi lima puluh ribu ditulis 50000.
• Boolean (benar/salah): cuma dua nilai, true dan false. Tanpa kutip. Ini bahan bakar utama if yang kita bahas di artikel berikutnya.
• Undefined: kotak sudah dibuat tapi belum diisi. let nama; lalu dicek isinya, hasilnya undefined. Artinya "belum ada isinya".
• Null: kotak yang sengaja dikosongkan. Bedanya dengan undefined: undefined itu "lupa ngisi", null itu "sengaja dikosongkan". let pacar = null;

Untuk mengecek tipe sebuah nilai, ada operator typeof:

console.log(typeof "Halo"); // "string"
console.log(typeof 42);     // "number"
console.log(typeof true);   // "boolean"

console.log(typeof null);

Operator: Cara Mengolah Isi Kotak

Variabel tanpa operator seperti dapur tanpa pisau: bahannya ada tapi tidak bisa diolah. Operator adalah simbol yang melakukan sesuatu terhadap nilai.

Operator aritmatika untuk angka, mirip kalkulator:

let a = 10;
let b = 3;
console.log(a + b); // 13 (tambah)
console.log(a - b); // 7 (kurang)
console.log(a * b); // 30 (kali)
console.log(a / b); // 3.333... (bagi)
console.log(a % b); // 1 (sisa bagi/modulus)

Modulus (%) layak dapat perhatian khusus karena jarang dikenal pemula padahal sering dipakai. Ia menghasilkan sisa pembagian. 10 % 3 = 1 karena 10 dibagi 3 sisa 1. Gunanya? Mengecek genap ganjil (angka % 2 === 0 berarti genap), atau bikin pola berulang, misalnya warna baris tabel yang selang seling.

Operator perbandingan menghasilkan boolean, dan ini jembatan ke artikel if else besok:

console.log(5 > 3);   // true
console.log(5 < 3);   // false
console.log(5 >= 5);  // true
console.log(5 === 5); // true

Nah, soal == vs ===, ini salah satu sumber bug paling klasik di JavaScript. == (dua sama dengan) membandingkan nilai setelah mencoba mengubah tipenya supaya cocok, sedangkan === (tiga sama dengan) menuntut tipe dan nilainya sama persis:

console.log(5 == "5");  // true (angka 5 diubah jadi teks dulu, lalu dibandingkan)
console.log(5 === "5"); // false (tipe beda: number vs string)

Aturan main di dapur ini: selalu pakai ===. Konversi tipe otomatis oleh == itu seperti koki yang diam-diam mengganti bahan masakanmu, hasilnya tidak bisa ditebak. Dengan ===, apa yang kamu tulis itulah yang dibandingkan.

console.log("5" + 2);
console.log("5" - 2);

Latihan: Ubah, Jangan Cuma Dibaca

Membaca artikel ini tanpa praktik itu seperti menonton video masak tanpa pernah menyalakan kompor. Buka console browser (klik kanan, Inspect, tab Console) atau situs latihan JavaScript favoritmu, lalu kerjakan ini:

1. Ubah kode skor. Ambil contoh let skor = 0; skor = 10; skor = skor + 5; lalu ubah jadi program hitung total belanja: tiga variabel harga barang, satu variabel total, tampilkan totalnya. Jangan salin mentah-mentah, tulis ulang dengan idemu sendiri.
2. Bikin jebakan typeof. Buat 5 variabel dengan tipe berbeda, tebak dulu hasil typeof masing-masing sebelum dijalankan, lalu cek. Kalau ada yang meleset, cari tahu kenapa.
3. Perang == vs ===. Tulis 5 perbandingan versimu sendiri yang melibatkan tipe berbeda (angka vs teks, boolean vs angka, null vs undefined), tebak hasilnya, lalu jalankan. Rasakan sendiri betapa licinnya ==.

Habis Ini ke Mana?

Kamu sekarang bisa menyimpan data dan mengolahnya. Tapi program yang cuma menghitung lurus dari atas ke bawah itu kaku. Program yang berguna bisa mengambil keputusan ("kalau skor di atas 100, tampilkan SELAMAT") dan mengulang pekerjaan ("tampilkan 10 baris tanpa nulis 10 kali").

Itulah menu berikutnya: If Else dan Perulangan di JavaScript. Di sana boolean yang kamu kenal hari ini akan jadi bahan bakar utama, dan operator perbandingan === akhirnya unjuk gigi. Siapkan analogi lampu lalu lintas dan mesin fotokopi, sampai jumpa di artikel berikutnya.