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

Ariska HidayatAriska Hidayat
4 min read

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 ke double lat, Dart menganggap ini int, 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 sebagai int bukan double

  • Jika di Dart properti lat/lng bertipe double, maka parsing dari int tanpa desimal bisa memunculkan error atau peringatan tipe

  • Ini 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 ke double 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() langsung

  • Gunakan 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 dari int ke double.

  • Buat fungsi parsing yang aman dari berbagai tipe.

  • Untuk operasi matematika penting, lakukan pembulatan atau gunakan library angka presisi.

0
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.