Filter Array Untuk Mendapatkan Nilai Unik (Distinct)
JavascriptBerikut beberapa cara untuk memfilter nilai unik dalam javascript.
1. Menggunakan Set
Set diperkenalkan pada ES6, yang mana mirip dengan array tapi tidak membolehkan terdapat nilai ganda atau duplikat. Berikut contoh penggunaannya:
const duplicate_1 = ["bambang", "susi", "julian", "bambang"];
const unique_1 = Array.from(new Set(duplicate_1));
console.log(unique_1);
Untuk melakukan filter nilai yang duplikat di array, array dengan nama "duplicate_1" kita masukan ke dalam "new Set" lalu kita ubah lagi menjadi array dengan "Array.from".
Contoh diatas cocok untuk array string atau number, tapi tidak cocok untuk array object.
const duplicate_2 = [
{ name: "Tommy", address: "Jakarta" },
{ name: "Max", address: "Surabaya" },
{ name: "Lucy", address: "Manado" },
{ name: "Cooper", address: "Salatiga" },
{ name: "Tommy", address: "Jakarta" },
{ name: "Lucy", address: "Manado" },
];
const unique_2 = Array.from(new Set(duplicate_2));
console.log(unique_2);
Contoh diatas. tidak akan menghasilkan filter nilai unik yang kita harapkan. Tommy dan Lucy akan tetap tampil sebanyak dua kali.
Ini terjadi karena ketika objek dibandingkan, mereka dibandingkan dengan referensi dan bukan dengan nilai. Lalu bagaimana solusinya untuk menghandle array object? Kita bisa menggunakan cara selanjutnya.
2. Menggunakan Filter
Yuk kita cek contoh dibawah ini:
const duplicate_2 = [
{ name: "Tommy", address: "Jakarta" },
{ name: "Max", address: "Surabaya" },
{ name: "Lucy", address: "Manado" },
{ name: "Cooper", address: "Salatiga" },
{ name: "Tommy", address: "Jakarta" },
{ name: "Lucy", address: "Manado" },
];
const unique_2 = duplicate_2.filter(
(element, index) =>(
duplicate_2.findIndex((obj) => obj.address === element.address) === index
)
);
Contoh diatas berhasil melakukan filter data yang duplikat, sehingga Tommy dan Lucy hanya tampil sekali saja.
Solusi ini akan bekerja untuk semua tipe array tetapi kita harus melakukan perulangan untuk setiap elemen dalam array. Bisa dibayangkan kalau ingin memfilter sebuah array dengan ribuan object, pasti akan sangat berat. Pendekatan ini bukan yang efisien, dengan time complexity O(n^2).
3. Menggunakan Pendekatan Flag
Yuk kita cek lagi contoh dibawah ini:
const duplicate_2 = [
{ name: "Tommy", address: "Jakarta" },
{ name: "Max", address: "Surabaya" },
{ name: "Lucy", address: "Manado" },
{ name: "Cooper", address: "Salatiga" },
{ name: "Tommy", address: "Jakarta" },
{ name: "Lucy", address: "Manado" },
];
const removeDuplicateWithFlag = (duplicate_2) => {
const flag = {};
const unique = [];
duplicate_2.forEach((element) => {
if (!flag[element.address]) {
flag[element.address] = true;
unique.push(element);
}
});
return unique;
};
console.log(removeDuplicateWithFlag(duplicate_2));
Sedikit lebih panjang dari cara nomor 2 ya?
Pertama-tama kita buat function untuk melakukan filter duplikat, yang mana nanti kita panggil array sebagai parameter dari function tersebut.
Dengan metode ini, kita hanya akan melakukan perulangan sebanyak 1 kali, mau sebanyak apapun object dalam array, kita hanya akan memanggilnya sebanyak satu kali. Sehingga jauh lebih ringan jika di aplikasikan pada data yang besar sekalipun. Metode ini memiliki time complexity O(n).