🧐 Analisa Masalah Tipe Data Float dan Precision di Integrasi JavaScript & Flutter

I am an enthusiastic researcher and developer with a passion for using technology to innovate in business and education.
1. JavaScript Tidak Memiliki Tipe Data float atau double Terpisah
JavaScript hanya memiliki tipe angka tunggal yaitu
Numberyang secara internal menggunakan format 64-bit floating point (IEEE 754)Contohnya:
const a = 10; // Integer (no decimal part)
const b = 10.0; // Sama saja dengan a, nilai numerik sama: 10
Jadi kalau kamu kirim nilai 10 atau 10.0 dari JS, JSON hasilnya adalah:
{ "value": 10 }
Tidak ada pembeda 10 dan 10.0 secara eksplisit dalam JSON.
2. Dart (Flutter) Memiliki Tipe double dan int Terpisah
Dart membedakan nilai integer (
int) dan floating point (double)Dart mengharapkan tipe yang jelas sesuai deklarasi
Jika API mengirim JSON
{ "lat": 10 }, maka saat di-deserialize kedouble lat, Dart menganggap iniint, lalu butuh konversi eksplisit atau bisa error/bug
3. Masalah Default Nilai Bulat Tanpa Desimal di JS dan Dampaknya di Dart
Ketika data lokasi lat/long yang bernilai
10dikirim dari JS, Dart melihatnya sebagaiintbukandoubleJika di Dart properti
lat/lngbertipedouble, maka parsing dariinttanpa desimal bisa memunculkan error atau peringatan tipeIni bukan bug Flutter, tapi memang beda tipe data
4. Fungsi .toFixed() di JavaScript Mengubah Number Jadi String
- Saat kamu lakukan ini:
let lat = 10.12345;
let latFixed = lat.toFixed(2); // "10.12" (string)
Hasilnya bukan number, tapi string
Kalau langsung kirim ke Flutter, Flutter akan dapat string
"10.12"dan jika parse kedoubleharus ekstra hati-hati
5. Floating Point Precision Issue di JavaScript
- Ini masalah umum di semua bahasa yang menggunakan IEEE 754, misal:
0.1 + 0.2 === 0.3 // false, karena hasilnya 0.30000000000000004
Jadi perhitungan floating point tidak pernah 100% presisi, ini wajar dan perlu dipahami
Solusinya: gunakan pembulatan dengan
toFixed(ingat hasil string), atau paket khusus untuk aritmatika desimal presisi (contoh: decimal.js)
🧰 Rekomendasi Solusi Praktis
A. Pastikan Semua Lat/Long Selalu Number, Jangan String
Jangan kirim nilai desimal hasil
toFixed()langsungGunakan parse ulang untuk convert ke number:
const lat = 10.12345;
const latFixed = Number(lat.toFixed(2)); // 10.12 (Number, bukan string)
B. Kirim JSON dengan Nilai Number Konsisten
Jika nilai lat/long bulat (misal 10), tetap kirim sebagai
10Di Dart, jika tipe
double, cukup lakukan konversi eksplisit saat deserialize:
double lat = (json['lat'] as num).toDouble();
C. Hindari Floating Point Precision Issue dengan Pembulatan
- Saat lakukan operasi seperti penjumlahan, pembulatan dulu hasilnya agar presisi
D. Di Dart, Gunakan Parsing Aman dari num ke double
double parseDouble(dynamic value) {
if (value is int) return value.toDouble();
if (value is double) return value;
if (value is String) return double.tryParse(value) ?? 0.0;
return 0.0;
}
Gunakan fungsi ini untuk deserialize lat/long dari JSON.
📄 Contoh Artikel Lengkap
Kenapa Nilai Float di JavaScript dan Dart Kadang Berbeda dan Cara Mengatasinya
Saat membangun aplikasi mobile Flutter yang berkomunikasi dengan backend JavaScript (Node.js/Express/Next.js), kamu mungkin menemui masalah saat mengirim dan menerima data tipe angka desimal seperti latitude dan longitude.
1. JavaScript Memiliki Satu Tipe Angka: Number
JavaScript tidak membedakan angka bulat dan desimal secara eksplisit. Jadi angka 10 dan 10.0 dianggap sama dan disimpan sebagai 10.
2. Dart Membedakan int dan double
Dart memerlukan konversi eksplisit antara integer dan floating point. Jika backend mengirim 10 tanpa desimal, Flutter bisa menganggapnya int, sedangkan variabel Flutter kamu bertipe double. Ini bisa menyebabkan error.
3. .toFixed() Menghasilkan String
Fungsi .toFixed(2) di JS akan mengubah angka menjadi string, seperti "10.00". Kirim string ini ke Flutter tanpa konversi ke number akan menyebabkan parsing error.
4. Floating Point Presisi Terbatas
Penjumlahan seperti 1.1 + 2.2 di JavaScript bisa menghasilkan angka tidak presisi (3.3000000000000003). Ini masalah umum IEEE 754, dan kamu perlu lakukan pembulatan untuk akurasi.
Solusi
Gunakan
Number(value.toFixed(2))agar hasilnya tetap number, bukan string.Kirim data JSON dengan tipe angka konsisten.
Di Flutter, gunakan
toDouble()untuk convert dariintkedouble.Buat fungsi parsing yang aman dari berbagai tipe.
Untuk operasi matematika penting, lakukan pembulatan atau gunakan library angka presisi.





