Type Conversion

Data yang masuk ke program hampir selalu berbentuk teks. Kolom umur pada formulir mengirim "25", bukan 25; nilai dari terminal pun tiba sebagai string. Padahal penghitung umur butuh angka, dan keputusan butuh boolean. Jembatan antara tipe-tipe itu adalah konversi tipe (type conversion) — dan JavaScript menyediakannya lewat dua jalur: konversi eksplisit yang kita minta sendiri, dan konversi implisit yang engine lakukan diam-diam.

Chapter ini melatih jalur eksplisit dengan tiga function konversi bawaan — Number(), String(), dan Boolean() — lalu membandingkan Number() dengan parseInt(), dan menutup dengan jalur implisit yang wajib dikenali supaya tidak mengejutkan. Semua keluaran diuji nyata di Node.

Dua Jalur Konversi #

Konversi eksplisit terjadi ketika kita menuliskan perintahnya: Number("25"), misalnya. Niatnya terbaca di kode, hasilnya mudah diprediksi, dan inilah jalur yang sebaiknya dipilih setiap kali tipe nilai perlu diubah.

Konversi implisit (sering disebut coercion) terjadi ketika engine memaksa sebuah nilai menyesuaikan tipe karena konteks operasinya — misalnya "5" * 2 memaksa "5" menjadi angka. Jalur ini kadang membantu, kadang menghasilkan nilai yang sulit dilacak; kita amati perilakunya di bagian akhir chapter.

Number(), String(), dan Boolean() #

Ketiga function konversi menerima satu nilai dan mengembalikan nilai baru bertipe yang diminta. Nilai aslinya tidak berubah — konversi menghasilkan nilai baru, konsisten dengan sifat immutable yang kita bahas di awal section ini.

Dua baris paling sering mengejutkan: Number("") menghasilkan 0 — kekosongan teks dihitung nol, sehingga perhitungan dengan string kosong tidak pernah error melainkan menghasilkan angka — dan Number("12px") menghasilkan NaN, tanda konversi gagal yang bisa dideteksi dengan Number.isNaN().

Number() versus parseInt() #

Untuk teks yang “kotor” — angka dengan satuan menempel seperti "12px" — Number() langsung menyerah. Method parseInt() dan parseFloat() dibuat untuk kasus ini: keduanya membaca karakter dari depan selama karakternya masih membentuk angka, lalu berhenti di karakter pertama yang tidak sah:

console.log(Number("12px"));     // NaN — menolak seluruh teks
console.log(parseInt("12px"));   // 12 — berhenti di "p"
console.log(parseFloat("3.9kg")); // 3.9 — desimal ikut terbaca

Output yang Dihasilkan:

NaN
12
3.9

Perbedaan kedua method terletak pada titik desimal: parseInt("3.9") menghasilkan 3 — bagian desimal dipotong, bukan dibulatkan — sedangkan parseFloat("3.9") mempertahankannya. Dan bila teksnya tidak diawali angka sama sekali, keduanya menghasilkan NaN: parseInt("Rp1000") menghasilkan NaN karena huruf R berhenti sebelum angka mana pun.

parseInt() juga menerima argumen kedua untuk basis angka — kebiasaan baik yang mencegah salah baca:

console.log(parseInt("11", 2)); // 3 — "11" dibaca sebagai biner

Output yang Dihasilkan:

3

Contoh Lengkap: Mengolah Data Formulir #

Berkas berikut menyimulasikan data yang tiba dari formulir pendaftaran — semuanya string, satu di antaranya kotor — lalu mengonversinya sesuai kebutuhan:

// konversi-form.js
// Konversi eksplisit untuk data formulir yang selalu berbentuk string.

// --- Data yang "tiba" dari formulir pendaftaran (semuanya string) ---
const inputUmur = "25";
const inputHarga = "18000";
const inputSatuan = "12px"; // sengaja kotor: ada huruf menempel

// --- Number() menuntut isi string yang murni angka ---
console.log(Number(inputUmur));   // 25
console.log(Number(inputHarga));  // 18000
console.log(Number(inputSatuan)); // NaN — menolak teks campuran
console.log(Number(""));          // 0 — string kosong menjadi nol

// --- parseInt()/parseFloat() membaca angka di depan string ---
console.log(parseInt(inputSatuan)); // 12
console.log(parseInt("3.9"));       // 3 — dipotong, bukan dibulatkan
console.log(parseFloat("3.9kg"));   // 3.9

// --- String() dan Boolean() ---
console.log(String(15000)); // 15000
console.log(Boolean(0));    // false
console.log(Boolean("0"));  // true — string tidak kosong
console.log(Boolean(""));   // false

Output yang Dihasilkan:

25
18000
NaN
0
12
3
3.9
15000
false
true
false

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

1. Baris 5–7 (const inputUmur = "25"; dst.): tiga nilai formulir disimpan — semuanya string, termasuk yang tampak seperti angka. Tanda kutip adalah pembeda yang menentukan seluruh perilaku berikutnya.
2. Baris 10–11 (console.log(Number(inputUmur)); dst.): dua string murni angka berhasil dikonversi menjadi number dan siap dihitung.
3. Baris 12–13 (console.log(Number(inputSatuan)); dst.): "12px" jatuh ke NaN karena bercampur huruf, dan string kosong jatuh ke 0 — dua wajah ketidakcocokan yang berbeda.
4. Baris 16–18 (console.log(parseInt(inputSatuan)); dst.): parseInt("12px") tetap mendapat 12 dengan membaca dari depan; parseInt("3.9") memotong desimal menjadi 3; parseFloat("3.9kg") mempertahankan 3.9.
5. Baris 21 (console.log(String(15000));): arah sebaliknya — angka menjadi teks, terlihat dari keluaran yang sama tetapi tipenya kini string.
6. Baris 22–24 (console.log(Boolean(0)); dst.): angka 0 dan string kosong menjadi false, sedangkan "0" menjadi true karena string tidak kosong — aturan penilaian ini dibedah habis di chapter berikutnya.

Coercion Implisit #

Sekarang jalur kedua. Ketika operand operasi tidak sesuai, engine mengonversinya diam-diam. Perilakunya bergantung pada operator — dan di sinilah letak bahayanya:

console.log("5" * 2);   // 10 — "5" dipaksa menjadi angka
console.log("5" + 2);   // "52" — 2 dipaksa menjadi string
console.log("1" == 1);  // true — == mengonversi sebelum membandingkan
console.log("1" === 1); // false — === memeriksa tipe juga

Output yang Dihasilkan:

10
52
true
false

Baris pertama dan kedua memakai data yang sama, tetapi hasilnya berbeda karena aturan operatornya berbeda: operator aritmetika seperti * memaksa string menjadi angka, sedangkan operator + memilih penyambungan string bila salah satu sisi adalah string. Maka "5" * 2 menghasilkan angka 10, tetapi "5" + 2 menghasilkan string "52".

Dua baris terakhir menunjukkan perbedaan yang sudah kita singgung sejak chapter null dan undefined: == mengonversi dulu sebelum membandingkan sehingga "1" dan 1 dianggap sama, sedangkan === memeriksa tipe bersama nilainya dan menolak pasangan itu.

Konversi tipe kini berdiri di atas fondasi yang lengkap: kita tahu cara mengonversi secara eksplisit, dan cara engine melakukannya secara implisit. Satu pertanyaan menutup section ini: ketika sebuah nilai diuji kebenarannya — misalnya oleh keputusan program — nilai tipe mana yang dianggap false? Daftar resminya menunggu di chapter penutup, Truthy dan Falsy.

// konversi-form.js
// Konversi eksplisit untuk data formulir yang selalu berbentuk string.

// --- Data yang "tiba" dari formulir pendaftaran (semuanya string) ---
const inputUmur = "25";
const inputHarga = "18000";
const inputSatuan = "12px"; // sengaja kotor: ada huruf menempel

// --- Number() menuntut isi string yang murni angka ---
console.log(Number(inputUmur));   // 25
console.log(Number(inputHarga));  // 18000
console.log(Number(inputSatuan)); // NaN — menolak teks campuran
console.log(Number(""));          // 0 — string kosong menjadi nol

// --- parseInt()/parseFloat() membaca angka di depan string ---
console.log(parseInt(inputSatuan)); // 12
console.log(parseInt("3.9"));       // 3 — dipotong, bukan dibulatkan
console.log(parseFloat("3.9kg"));   // 3.9

// --- String() dan Boolean() ---
console.log(String(15000)); // 15000
console.log(Boolean(0));    // false
console.log(Boolean("0"));  // true — string tidak kosong
console.log(Boolean(""));   // false