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


1. JavaScript Tidak Memiliki Tipe Data float
atau double
Terpisah
JavaScript hanya memiliki tipe angka tunggal yaitu
Number
yang 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
10
dikirim dari JS, Dart melihatnya sebagaiint
bukandouble
Jika di Dart properti
lat
/lng
bertipedouble
, maka parsing dariint
tanpa 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 kedouble
harus 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
10
Di 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 dariint
kedouble
.Buat fungsi parsing yang aman dari berbagai tipe.
Untuk operasi matematika penting, lakukan pembulatan atau gunakan library angka presisi.
Subscribe to my newsletter
Read articles from Ariska Hidayat directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Ariska Hidayat
Ariska Hidayat
I am an enthusiastic researcher and developer with a passion for using technology to innovate in business and education.