Array Sort JavaScript: Sintaks dan Contoh Penggunaan
sort merupakan method array di JavaScript yang berfungsi untuk mengurutkan array.
Secara default, elemen diurutkan ascending dengan mengubah setiap elemen menjadi string lalu membandingkan urutan nilai Unicode UTF-16.
Tapi, kita bisa mengatur urutannya sesuai kebutuhan entah itu ascending (naik) maupun descending (menurun) menggunakan fungsi pembanding yang diterima method sort.
Di sini kita akan belajar mengurutkan data angka, string, tanggal, hingga objek dalam array.
Mari kita mulai.
Sintaks
// compare function
sort(fnPembanding);
// arrow function
sort((elemenPertama, elemenKedua) => { ... })
Parameter
fnPembanding(opsional): fungsi yang membandingkan elemen, menentukan urutan elemen. Jika dihilangkan, elemen diubah menjadi string dan diurutkan berdasarkan Unicode UTF-16. Menerima dua argumen berikut:elemenPertama: elemen pertama untuk perbandingan.elemenKedua: elemen kedua untuk perbandingan.
Nilai Kembalian
Mengembalikan array yang telah diurutkan.
Penjelasan
fnPembanding bersifat opsional, artinya boleh ditulis boleh tidak.
Jika tidak, semua elemen non-array selain undefined diurutkan dengan mengubahnya menjadi string dan membandingkan string tersebut dalam urutan unit kode UTF-16.
Misalnya, string "apel" diurutkan/ditempatkan lebih awal daripada "belimbing".
Bagaimana dengan angka?
Dalam urutan numerik/angka, 5 tentunya akan diurutkan lebih awal dari 40.
Tapi, karena dikonversi ke string, maka "40" akan ditempatkan lebih awal dari "5", perhatikan angka pertamanya.
Jika array mengandung nilai undefined, semuanya nilai tersebut akan ditempatkan diakhir.
Itu jika kita tidak menentukan fnPembanding.
Jika fungsi fnPembanding ditentukan, semua elemen array selain undefined diurutkan berdasarkan nilai kembalian fungsi tersebut.
Kapan elemenPertama diurutkan terlebih dahulu daripada elemenKedua atau sebaliknya? berikut aturannya:
- Jika
fnPembanding(elemenPertama, elemenKedua)mengembalikan nilai > 0, urutkanelemenPertamasetelahelemenKedua. - Jika
fnPembanding(elemenPertama, elemenKedua)mengembalikan nilai < 0, urutkanelemenPertamasebelumelemenKedua. - Jika
fnPembanding(elemenPertama, elemenKedua)mengembalikan 0,elemenPertamadanelemenKeduadianggap sama, pertahankan.
Mari kita gunakan contoh.
Mengurutkan String
Ascending
Jika kita ingin mengurutkan string di dalam array secara ascending (a-z).
Kita tidak perlu menulis fungsi fnPembanding karena ini adalah perilaku default method sort.
const buah = ['blewah', 'delima', 'apel', 'ceri', 'anggur'];
buah.sort();
console.log(buah); // [ 'anggur', 'apel', 'blewah', 'ceri', 'delima' ]
Tapi, hati-hati jika Anda mengurutkan angka.
const angka = [3, 1, 5, 0, 10, 13, 20, 27];
angka.sort();
console.log(angka); // [ 0, 1, 10, 13, 20, 27, 3, 5 ]
Ini terjadi karena perilaku default method sort mengubah setiap elemen menjadi string dan mengurutkannya sesuai Unicode UTF-16.
Jadi kita perlu menulis fungsi pembanding secara manual yang kita bahas dalam contoh berikutya.
Descending
Untuk mengurutkan string dalam urutuan menurun, kita bisa menulis fungsi pembanding atau tanpa fungsi pembanding dengan kombinasi method reverse.
Mari kita gunkaan fungsi pembanding terlebih dahulu.
const buah = ['blewah', 'delima', 'apel', 'ceri', 'anggur'];
buah.sort((a, b) => {
if (a > b) return -1;
if (a < b) return 1;
return 0;
});
console.log(buah); // [ 'delima', 'ceri', 'blewah', 'apel', 'anggur' ]
Dan ini jika kita menggunakan method reverse.
const buah = ['blewah', 'delima', 'apel', 'ceri', 'anggur'];
buah.sort().reverse();
console.log(buah); // [ 'delima', 'ceri', 'blewah', 'apel', 'anggur' ]
Mengurutkan Angka
Untuk mengurutkan angka lebih mudah daripada string kita hanya perlu menggunakan operator artimatika pengurangan (-), ini akan mengembalikan nilai yang sesuai dengan aturan fungsi pmebanding.
Ascending
Untuk urutan ascending, kita bisa mengurangi elemen pertama dengan elemen kedua.
const angka = [3, 1, 5, 0, 10, 13, 20, 27];
angka.sort((a, b) => a - b);
console.log(angka); // [ 0, 1, 3, 5, 10, 13, 20, 27 ]
Descending
Untuk urutan descending kita bisa mengurangi elemen kedua dengan elemen pertama.
const angka = [3, 1, 5, 0, 10, 13, 20, 27];
angka.sort((a, b) => b - a);
console.log(angka); // [ 27, 20, 13, 10, 5, 3, 1, 0 ]
Mengurutkan Tanggal
Untuk mengurutkan tanggal, kita bisa memperlakukannya seperti angka.
Tapi pastikan nilai dari tanggal tersebut adalah instance dari objek Date, kalau datanya string kita bisa membuat instance secara manual dengan cara new Date(tanggalStr).
Selain itu, pastikan format tanggal valid.
Ascending
Seperti halnya angka, untuk mengurutkan tanggal secara ascending, kita bisa mengurangi elemen pertama dengan elemen kedua.
const angka = [
'2021-08-30T07:03:23.755Z',
'2021-09-01T07:03:23.755Z',
'2021-08-31T07:03:23.755Z',
];
angka.sort((a, b) => new Date(a) - new Date(b));
console.log(angka);
/* output:
[
'2021-08-30T07:03:23.755Z',
'2021-08-31T07:03:23.755Z',
'2021-09-01T07:03:23.755Z'
]
*/
Descending
Untuk descending, kurangi elemen kedua dengan elemen pertama.
const angka = [
'2021-08-30T07:03:23.755Z',
'2021-09-01T07:03:23.755Z',
'2021-08-31T07:03:23.755Z',
];
angka.sort((a, b) => new Date(b) - new Date(a));
console.log(angka);
/* output:
[
'2021-09-01T07:03:23.755Z',
'2021-08-31T07:03:23.755Z',
'2021-08-30T07:03:23.755Z'
]
*/
Mengurutkan Objek Dalam Array
Untuk mengurutkan objek yang ada di dalam array berdasarkan nilai dari properti objek, sebetulnya sama saja.
Ini bergantung dengan nilai dari properti yang ingin diurutkan.
Karena di sini kita ingin mengurutkan berdasarkan properti nilai yang bertipe angka, maka kita urutkan seperti halnya angka.
Ascending
const mahasiswa = [
{ nama: 'dodi', nilai: 90 },
{ nama: 'adnan', nilai: 75 },
{ nama: 'caca', nilai: 80 },
{ nama: 'budi', nilai: 80 },
];
mahasiswa.sort((a, b) => a.nilai - b.nilai);
console.log(mahasiswa);
/* output:
[
{ nama: 'adnan', nilai: 75 },
{ nama: 'caca', nilai: 80 },
{ nama: 'budi', nilai: 80 },
{ nama: 'dodi', nilai: 90 }
]
*/
Descending
const mahasiswa = [
{ nama: 'dodi', nilai: 90 },
{ nama: 'adnan', nilai: 75 },
{ nama: 'caca', nilai: 80 },
{ nama: 'budi', nilai: 80 },
];
mahasiswa.sort((a, b) => b.nilai - a.nilai);
console.log(mahasiswa);
/* output:
[
{ nama: 'dodi', nilai: 90 },
{ nama: 'caca', nilai: 80 },
{ nama: 'budi', nilai: 80 },
{ nama: 'adnan', nilai: 75 }
]
*/
Perhatikan mashsiswa bernama caca dan budi, keduanya memiliki nilai yang sama.
Karena JavaScript menggunakan algoritma pengurutan yang dijamin stabil sejak ES2019, urutan caca dan budi dipertahankan sesuai dengan urutan aslinya.
Jadi, urutan caca akan selalu lebih awal daripada budi.