Konversi Tipe Data

Analogi: Penukaran Mata Uang

Kamu memegang uang dolar tapi warung di depanmu hanya terima rupiah. Kamu tidak bisa belanja sebelum menukar dolar itu ke rupiah di money changer. Nilai kekayaannya sama, tapi bentuknya harus disesuaikan dengan siapa yang menerimanya.

Konversi tipe data persis seperti itu. Data dari input formulir selalu datang sebagai string ("12"), tapi untuk dihitung ia harus jadi number (12). Data dari perhitungan harus diubah jadi string dulu sebelum digabung ke kalimat ("Total: 20"). Bentuknya disesuaikan dengan operasi yang akan dilakukan.

Kenapa Konsep Ini Ada?

JavaScript adalah bahasa yang longgar soal tipe: ia sering menebak konversi sendiri secara diam-diam, yang disebut koersi implisit. Masalah yang dipecahkan konversi eksplisit (yang disengaja) ada tiga. Pertama, data dari dunia luar hampir selalu string: input form, parameter URL, data dari API atau file. Kedua, operasi butuh tipe yang tepat: penjumlahan butuh number, penggabungan kalimat butuh string, kondisi butuh boolean. Ketiga, menebak sendiri itu berbahaya: "5" + 1 menghasilkan "51" (teks!), bukan 6, dan bug seperti ini bisa lolos tanpa error lalu merusak total belanja di aplikasi kasir.

Aturan mainnya: konversi yang kamu lakukan sendiri (eksplisit) itu aman dan jelas; konversi yang dilakukan JavaScript diam-diam (implisit) itu sumber kejutan. Programmer berpengalaman selalu eksplisit.

Contoh Kode

Contoh 1: Konversi eksplisit yang aman

// String -> Number
console.log(Number("42"));       // 42
console.log(parseInt("42px"));   // 42 (ambil angka di depan)
console.log(parseFloat("3.14")); // 3.14

// Number -> String
console.log(String(42));  // "42"
console.log((3.14).toFixed(1)); // "3.1" (1 angka di belakang koma)

// Apa pun -> Boolean
console.log(Boolean(0));   // false
console.log(Boolean(""));  // false
console.log(Boolean("Budi")); // true (string tidak kosong = truthy)

Number() itu ketat: "42px" gagal jadi NaN. parseInt lebih longgar: ia mengambil angka yang bisa diambil dari depan. Pilih sesuai kebutuhan: untuk validasi ketat pakai Number(), untuk mengurai teks campur pakai parseInt/parseFloat.

Contoh 2: Koersi implisit dan jebakannya di kasir

// Data dari input form SELALU string!
const hargaInput = "12000"; // seolah dari <input>
const jumlahInput = "3";

// Jebakan: + menggabung string, bukan menjumlah!
console.log(hargaInput + jumlahInput); // "120003" -> SALAH TOTAL

// Perbaikan: konversi dulu, baru hitung
const harga = Number(hargaInput);
const jumlah = Number(jumlahInput);
const total = harga * jumlah; // 36000, benar!

// Tampilkan sebagai kalimat: number -> string otomatis saat digabung
console.log("Total belanja: Rp" + total); // "Total belanja: Rp36000"

Contoh kedua ini adalah bug paling klasik di aplikasi nyata: programmer lupa bahwa nilai dari <input> selalu string, lalu total belanja jadi "120003" bukannya 36000. Solusinya satu baris: bungkus dengan Number() sebelum operasi matematika apa pun. Operator selain + (seperti -, *, /) memang otomatis mengubah string jadi number, tapi jangan mengandalkannya: eksplisit selalu lebih aman.

Sebagai pelengkap, hafalkan nilai falsy: false, 0, "", null, undefined, NaN. Semua nilai lain truthy, termasuk [] dan {} kosong yang sering mengecoh.

Kesalahan Umum Pemula

1. Menjumlah string tanpa konversi. Contoh yang salah: const total = "12" + "8"; menghasilkan "128". Yang benar: const total = Number("12") + Number("8"); menghasilkan 20. Setiap kali menjumlah data dari input, tanyakan dulu: "ini sudah number belum?"

2. Memakai parseInt untuk desimal. Contoh yang salah: parseInt("3.99") menghasilkan 3, koma-nya hilang, harga jadi salah. Yang benar: untuk desimal pakai parseFloat("3.99") atau Number("3.99").

3. Tidak menangani NaN. Contoh yang salah: Number("abc") menghasilkan NaN, lalu NaN merambat ke semua perhitungan tanpa error yang jelas. Yang benar: cek dengan Number.isNaN(hasil) sebelum memakai nilai, dan ingat NaN !== NaN (satu-satunya nilai yang tidak sama dengan dirinya sendiri).

4. Mengira array/object kosong itu falsy. Contoh yang salah: if ([]) { ... } dikira tidak jalan. Yang benar: [] dan {} kosong itu truthy. Untuk cek array kosong pakai arr.length === 0, untuk object kosong pakai Object.keys(obj).length === 0.

Ringkasan

Ubah tipe secara eksplisit dengan Number(), String(), Boolean(), parseInt, dan parseFloat sebelum operasi yang butuh tipe tertentu. Waspadai koersi implisit, terutama operator + yang menggabung string alih-alih menjumlah. Hafalkan daftar falsy, dan selalu curigai data dari input form: ia string sampai kamu mengubahnya sendiri.