Cara Menghapus Duplikat di Array JavaScript Cuma 1 Baris Kode
Sebagai seorang web developer, kamu pasti sering banget berurusan dengan data berbentuk array. Mulai dari data pengguna, daftar produk di keranjang belanja, hingga hasil fetching API dari server. Masalahnya, data yang kita terima dari dunia nyata itu tidak selalu bersih. Sering kali, ada data ganda alias duplikat yang ikut masuk ke dalam sistem kita.
Kalau data duplikat ini dibiarkan, aplikasi kamu bisa melambat, memori jadi boros, dan yang paling parah, visual di halaman web bisa berantakan karena menampilkan item yang sama berulang kali. Dulu, untuk membersihkan data ini, kita harus menulis fungsi yang cukup panjang menggunakan perulangan (looping) seperti for atau metode filter().
Tapi tahu tidak? Di era JavaScript modern (ES6 ke atas), kamu bisa membuang semua kode ribet itu. Kamu bisa menghapus duplikat di array hanya dengan satu baris kode saja! Rahasianya ada pada sebuah fitur canggih bernama Set. Yuk, kita bedah tuntas bagaimana cara kerjanya dan kenapa trik ini wajib kamu kuasai!
Mengapa Data Duplikat di Array Itu Mengesalkan?
Sebelum kita masuk ke tutorial kodenya, mari kita samakan persepsi dulu. Kenapa sih kita harus peduli dengan data duplikat? Bayangkan kamu sedang membangun aplikasi e-commerce. Ketika pengguna menyegarkan (refresh) halaman, sistem tidak sengaja memasukkan ID produk yang sama dua kali ke dalam array keranjang belanja.
Efek domino yang bisa terjadi antara lain:
- Bug pada Kalkulasi: Total harga yang harus dibayar konsumen bisa jadi salah hitung.
- Masalah Render UI: Jika kamu menggunakan library seperti React atau Vue, duplikasi key pada saat looping komponen akan memicu error di konsol browser.
- Pemborosan Memori: Memproses ribuan data duplikat yang tidak perlu akan membuat performa perangkat pengguna menurun.
Oleh karena itu, melakukan data cleansing atau pembersihan data di sisi klien (client-side) sebelum data diolah adalah langkah optimasi yang sangat krusial.
Cara Lama vs Cara Modern (The Power of Set)
Agar kamu bisa melihat perbedaannya dengan jelas, mari kita tengok sejenak bagaimana developer zaman dulu menyelesaikan masalah ini.
Menggunakan filter() dan indexOf()
Sebelum tahun 2015, ini adalah salah satu cara paling populer untuk menyaring data unik di JavaScript:
const buah = ['apel', 'jeruk', 'apel', 'mangga', 'jeruk'];
const buahUnik = buah.filter((item, index) => buah.indexOf(item) === index);
console.log(buahUnik); // Hasil: ['apel', 'jeruk', 'mangga']Meskipun kodenya terlihat cukup keren, pendekatan ini punya kelemahan besar dari sisi performa. Metode indexOf() akan memindai ulang seluruh array untuk setiap elemen yang diperiksa oleh filter(). Jika array kamu berisi puluhan ribu data, aplikasi kamu bisa langsung lag atau membeku sesaat.
Solusi 1 Baris Kode: Berkenalan dengan Objek 'Set'
Nah, sekarang mari kita gunakan cara modern yang jauh lebih elegan, cepat, dan pastinya ramah memori. Kuncinya adalah memanfaatkan objek Set bawaan JavaScript.
Secara definisi, Set adalah koleksi objek khusus di mana setiap nilai di dalamnya HARUS unik. Set sama sekali tidak mengizinkan adanya duplikasi. Jika kamu mencoba memasukkan nilai yang sama dua kali, Set akan mengabaikannya secara otomatis.
Ini dia satu baris kode sakti yang kamu butuhkan:
const arrayUnik = [...new Set(namaArrayKamu)];Contoh Praktis
Mari kita langsung praktikkan ke dalam baris kode nyata. Salin kode di bawah ini dan coba jalankan di konsol browsermu:
// Kita punya array yang penuh dengan angka duplikat
const kumpulanAngka = [1, 2, 2, 3, 4, 4, 4, 5, 1, 6];
// Hapus duplikat dalam satu baris!
const angkaUnik = [...new Set(kumpulanAngka)];
console.log(angkaUnik);
// Hasil yang tampil: [1, 2, 3, 4, 5, 6]Sangat bersih dan mudah dibaca, bukan? Kamu tidak perlu lagi pusing memikirkan logika perulangan yang rumit.
Cara Kerja Satu Baris Kode
Mungkin kamu penasaran, bagaimana bisa satu baris kode sependek itu bisa bekerja dengan begitu ajaib? Mari kita bedah sintaksisnya menjadi dua bagian utama agar kamu benar-benar paham luar dalam.
Langkah 1: Membuat Objek Set Baru (new Set())
Ketika kamu menuliskan new Set(kumpulanAngka), JavaScript akan mengambil array bawaanmu dan mengubahnya menjadi objek Set. Di saat proses konversi inilah JavaScript menyaring dan membuang semua nilai yang ganda.
Namun, ada satu masalah kecil: hasil dari new Set() bukanlah sebuah array, melainkan sebuah Objek Set. Bentuknya akan terlihat seperti ini di konsol: Set(6) {1, 2, 3, 4, 5, 6}. Karena tipe datanya bukan array, kamu tidak bisa langsung menggunakan metode array seperti .map(), .reduce(), atau .length.
Langkah 2: Mengubah Kembali Menjadi Array dengan Spread Operator (...)
Untuk mengubah objek Set tersebut kembali menjadi array biasa yang siap pakai, kita menggunakan fitur yang bernama Spread Operator (disimbolkan dengan tiga titik: ...) dan membungkusnya dengan kurung siku [ ].
Spread operator bertugas membongkar isi dari objek Set dan menyebarkannya kembali ke dalam struktur array yang baru. Hasil akhirnya? Kamu mendapatkan array murni yang datanya sudah benar-benar bersih dari duplikat.
Alternatif Lain: Menggunakan Array.from()
Selain menggunakan spread operator (...), ada satu cara alternatif lagi yang tidak kalah rapi untuk mengubah kembali objek Set menjadi sebuah array. Kamu bisa menggunakan metode Array.from().
Berikut adalah contoh kodenya:
const dataGanda = ['A', 'B', 'A', 'C', 'B'];
const dataBersih = Array.from(new Set(dataGanda));
console.log(dataBersih); // Hasil: ['A', 'B', 'C']Kedua cara ini (Spread Operator vs Array.from()) memiliki performa yang hampir mirip. Kamu bebas memilih mana yang paling nyaman untuk dibaca oleh tim developermu.
Kenapa Set Jauh Lebih Cepat?
Dalam dunia pemrograman profesional, keindahan kode saja tidak cukup. Kita juga harus memikirkan aspek performa (time complexity).
Jika kita berbicara menggunakan notasi Big O, metode lama yang menggunakan filter() dan indexOf() memiliki kompleksitas waktu O(N²). Artinya, jika jumlah datanya bertambah banyak, waktu eksekusinya akan melambat secara eksponensial.
Sebaliknya, objek Set di JavaScript dioptimalkan di tingkat mesin (engine level) browser dengan menggunakan struktur data hash table. Hal ini membuat kompleksitas waktunya menjadi O(N). Proses pencarian dan penyaringan data terjadi jauh lebih instan, bahkan ketika kamu harus membersihkan array yang berisi ratusan ribu item sekaligus.
Keterbatasan Metode Set
Meskipun trik satu baris kode ini terlihat sempurna, sebagai developer yang bijak, kamu harus tahu kapan trik ini tidak bisa digunakan.
Metode new Set() hanya bekerja dengan sangat baik untuk data dengan tipe primitif, seperti:
- String (
'apel','jeruk') - Number (
1,2,3) - Boolean (
true,false)
Bagaimana dengan Array yang Berisi Objek (Array of Objects)?
Jika kamu memiliki array berisi objek seperti data user dari database, trik satu baris ini tidak akan berhasil. Mengapa? Karena JavaScript membandingkan objek berdasarkan referensi memorinya (reference), bukan berdasarkan isinya.
Perhatikan contoh kegagalan ini:
const user = [
{ id: 1, nama: 'Budi' },
{ id: 1, nama: 'Budi' } // Isinya sama, tapi referensi memorinya berbeda
];
const userUnik = [...new Set(user)];
console.log(userUnik.length); // Hasilnya tetap 2 (Gagal menghapus duplikat)Untuk kasus khusus seperti Array of Objects di atas, kamu tetap harus kembali menggunakan metode manual seperti filter() dikombinasikan dengan findIndex(), atau menggunakan bantuan library eksternal seperti Lodash (_.uniqBy).
Kesimpulan
Menghapus duplikat di array kini bukan lagi pekerjaan yang menyebalkan. Hanya dengan memanfaatkan kombinasi new Set() dan spread operator, kamu bisa menulis kode yang jauh lebih bersih (clean code), modern, dan memiliki performa yang sangat tinggi.
Trik satu baris kode ini adalah bukti betapa JavaScript terus berkembang untuk memudahkan kehidupan kita sebagai developer. Jadi, mulailah tinggalkan cara-cara lama yang membuat kodenya panjang dan beralihlah ke pendekatan modern yang lebih efisien ini.
Selamat mencoba di projek tokomu atau aplikasimu selanjutnya, dan rasakan sendiri peningkatan performa kodinganmu! Kalau kamu punya trik JavaScript seru lainnya, jangan ragu untuk berbagi ya..
Komentar