Cara Mengatasi Sort Angka Tidak Sesuai Javascript dengan Comparator Tepat

Ditulis oleh JavaScript

Tambahkan fungsi pembanding (a, b) => a – b ke dalam sort() agar angka terurut secara numerik. Tanpa comparator, JavaScript mengubah elemen jadi string lalu membandingkan karakter per karakter. Inilah alasan [1, 10, 2, 21].sort() menghasilkan [1, 10, 2, 21], bukan [1, 2, 10, 21].

Penyebab Sort Angka Terlihat Acak di JavaScript

Perilaku ini bukan bug mesin JavaScript. Ini logic error karena pemakaian sort() default yang memang dirancang untuk string. Berlaku sama di browser dan Node.js.

  • sort() tanpa argumen membandingkan nilai sebagai string UTF-16.
  • Karakter "1" dianggap lebih kecil dari "2", sehingga "10" muncul sebelum "2".
  • Data dari input, localStorage, atau Fetch/API umumnya bertipe string, jadi masalah lebih sering muncul.
  • Ini berbeda dari TypeError atau SyntaxError. Tidak ada pesan error, tetapi hasil urutan salah.

Tabel: Kondisi Sort Angka yang Salah dan Solusinya

Kondisi | Penyebab | Solusi

Tabel berikut merangkum pola paling umum. Gunakan tabel ini untuk diagnosis cepat sebelum mengubah kode.

Kondisi Penyebab Solusi
[1, 10, 2] tidak urut Sort string default Gunakan (a, b) => a – b
Sort menurun salah Comparator naik dipakai Gunakan (a, b) => b – a
Desimal dan negatif acak Tipe campuran atau string Konversi Number lalu a – b
  • Gunakan Number() bila data mungkin string angka bersih seperti "10".
  • Gunakan parseFloat() bila string mengandung desimal dan perlu diambil angka depannya.
  • Bersihkan dulu bila ada simbol, spasi, atau pemisah ribuan sebelum konversi.

BACA JUGA:

Cara Memperbaiki Sort Angka dengan Compare Function

Ikuti urutan ini agar perbaikan tidak menimbulkan masalah baru:

1. Periksa isi array dengan typeof. Pastikan semua elemen number.
2. Tambahkan comparator naik: arr.sort((a, b) => a - b).
3. Untuk desimal dan negatif, comparator yang sama tetap berlaku.
4. Untuk array object, bandingkan properti angkanya.
5. Uji dengan angka 1 digit, 2 digit, desimal, dan negatif.

// Salah: dibandingkan sebagai string
[1, 10, 2, 21].sort();
// Hasil: [1, 10, 2, 21]

// Benar: dibandingkan sebagai angka
[1, 10, 2, 21].sort((a, b) => a - b);
// Hasil: [1, 2, 10, 21]

// Menurun
[1, 10, 2, 21].sort((a, b) => b - a);

// Array object berdasarkan properti angka
users.sort((a, b) => a.umur - b.umur);

Comparator bekerja lewat nilai kembalian. Negatif menaruh a lebih dulu, positif menaruh b lebih dulu, nol mempertahankan posisi relatifnya. Pola a - b menghasilkan ketiga kondisi tersebut secara otomatis.

Cara Mencegah Sort Angka Rusak Lagi

  • Validasi tipe sebelum sort, misalnya dengan arr.every(v => typeof v === "number").
  • Jangan mencampur string angka, null, atau undefined dalam satu array numerik.
  • Konversi data API atau form ke Number segera setelah diterima.
  • Salin array dengan [...arr].sort() bila urutan asli masih dipakai di tempat lain.

FAQ

Kenapa [1, 2, 10] berubah jadi [1, 10, 2] setelah sort()?

Karena sort() default membandingkan sebagai string, sehingga "10" dinilai lebih kecil dari "2".

Apakah sort() mengubah array asli?

Ya, sort() mengurutkan array di tempat dan mengubah array aslinya.

Bagaimana sort angka desimal dan negatif yang benar?

Pastikan semua elemen bertipe number, lalu gunakan sort((a, b) => a - b).

Artikel Terkait