Articles
Pengenalan ke JavaScript
`Set` object

`Set` object

Artikel ini menjelaskan tentang objek Set.

Kami akan menjelaskan objek Set dengan contoh praktis.

YouTube Video

Set object

Set adalah objek bawaan yang digunakan untuk menangani kumpulan nilai unik yang tidak memiliki duplikat. Objek ini memungkinkan Anda menghapus duplikat dan memeriksa keberadaan nilai dengan lebih sederhana dibanding array, serta membuat operasi himpunan seperti union dan intersection lebih mudah diimplementasikan.

Dasar: Membuat dan Menggunakan Set

Pertama, mari kita lihat cara membuat Set, menambah dan menghapus elemen, memeriksa keberadaan, serta mendapatkan ukurannya.

Berikut adalah pola dasar yang membuat Set baru dan mendemonstrasikan penggunaan add, has, delete, dan size.

 1// Create a Set and demonstrate add, has, delete, and size
 2const s = new Set();
 3
 4s.add(1);
 5s.add(2);
 6s.add(2); // duplicate, ignored
 7
 8console.log(s.has(1)); // true
 9console.log(s.has(3)); // false
10
11s.delete(2);
12console.log(s.size); // 1
13
14console.log([...s]); // [1]
  • Seperti yang ditunjukkan dalam kode ini, Set secara otomatis menghapus nilai primitif yang duplikat, dan Anda dapat mengetahui jumlah elemennya menggunakan size.

Metode iterasi

Set dapat diiterasi, jadi Anda bisa melakukan loop dengan menggunakan for...of atau forEach. Urutannya sesuai dengan urutan saat elemen dimasukkan.

Berikut adalah cara umum menggunakan for...of dan forEach.

 1// Iterate a Set with for...of and forEach
 2const s = new Set(['a', 'b', 'c']);
 3
 4for (const v of s) {
 5  console.log('for...of:', v);
 6}
 7
 8s.forEach((value, sameValue, setRef) => {
 9  // Note: second arg is same as first for Set API to match Map signature
10  console.log('forEach:', value);
11});
  • Tanda tangan callback untuk forEach adalah value, value, set (untuk kompatibilitas dengan Map), namun pada praktiknya biasanya Anda hanya membutuhkan argumen value pertama.

Konversi antara Array dan Set (berguna untuk menghapus duplikat)

Di sini kami menunjukkan teknik sederhana untuk menghapus duplikat dari array, serta cara mengonversi Set kembali menjadi array.

Berikut adalah contoh menghapus duplikat dari array dengan melewatkannya melalui Set.

1// Deduplicate an array using Set
2const arr = [1, 2, 2, 3, 3, 3];
3const deduped = [...new Set(arr)];
4console.log(deduped); // [1, 2, 3]
5
6// Convert a Set to an array using Array.from
7const s = new Set([4, 5, 6]);
8const arrFromSet = Array.from(s);
9console.log(arrFromSet); // [4, 5, 6]
  • Pola ini singkat dan cepat, sehingga sering digunakan untuk menghapus duplikat pada array. Ini sangat efektif untuk nilai primitif.

Objek dan Penanganan Referensi

Objek dalam Set dibandingkan berdasarkan referensi, sehingga instance berbeda meski kontennya sama akan dianggap sebagai elemen terpisah.

Kode berikut menunjukkan apa yang terjadi ketika Anda menambahkan objek ke dalam Set.

 1// Objects are compared by reference in a Set
 2const obj1 = { x: 1 };
 3const obj2 = { x: 1 };
 4
 5const s = new Set();
 6s.add(obj1);
 7s.add(obj2);
 8
 9console.log(s.size); // 2 (different references)
10console.log(s.has(obj1)); // true
11console.log(s.has({ x: 1 })); // false (different object)
  • Pendeteksian duplikat untuk objek dilakukan berdasarkan identitas referensi, jadi jika Anda ingin menghapus duplikat berdasarkan isi objek saja, Anda harus melakukan serialisasi atau pemrosesan khusus.

Nilai Khusus: Penanganan NaN dan -0/+0

Set menggunakan aturan perbandingan Same-value-zero untuk menentukan kesamaan nilai. Metode perbandingan ini memiliki ciri-ciri berikut terkait angka:.

  • NaN dianggap sama dengan NaN.
  • +0 dan -0 tidak dibedakan dan dianggap sebagai nilai yang sama.

Oleh karena itu, ketika Anda menambahkan nilai-nilai ini ke dalam Set, akan terjadi perilaku sebagai berikut:.

 1// NaN and zero behavior in Set
 2const s = new Set();
 3
 4s.add(NaN);
 5s.add(NaN);
 6console.log(s.size); // 1 (NaN considered the same)
 7
 8s.add(+0);
 9s.add(-0);
10console.log(s.size); // still 2 (NaN + 0)
11console.log([...s]); // [NaN, 0] (order may vary but only one zero)
  • Dalam perbandingan biasa (NaN === NaN), hasilnya false, tetapi di dalam Set, semua nilai NaN dianggap 'nilai yang sama'.
  • +0 dan -0 dapat dibedakan secara matematis, tetapi dalam Set, keduanya diangap sebagai 0.
  • Sebagai hasilnya, hanya satu NaN dan satu 0 yang tersisa dalam Set.
  • Aturan perbandingan pada Set mirip dengan Object.is, tetapi tidak persis sama. Object.is(+0, -0) menghasilkan false, tetapi dalam Set, keduanya dianggap identik. Mohon perhatikan perbedaan ini.

Utilitas Umum: Operasi Set (Union, Intersection, Difference)

Operasi set dapat ditulis dengan lebih jelas menggunakan Set. Berikut adalah contoh implementasi yang umum.

Berikut adalah contoh fungsi untuk union, intersection, dan difference.

 1// Set operations: union, intersection, difference
 2function union(a, b) {
 3  return new Set([...a, ...b]);
 4}
 5
 6function intersection(a, b) {
 7  return new Set([...a].filter(x => b.has(x)));
 8}
 9
10function difference(a, b) {
11  return new Set([...a].filter(x => !b.has(x)));
12}
13
14// Demo
15const A = new Set([1, 2, 3]);
16const B = new Set([3, 4, 5]);
17
18console.log('union', [...union(A, B)]); // [1,2,3,4,5]
19console.log('intersection', [...intersection(A, B)]); // [3]
20console.log('difference A\\B', [...difference(A, B)]); // [1,2]
  • Operasi set dapat ditulis secara sederhana dengan memanfaatkan filter pada kombinasi Set dan array. Saat mengelola dataset besar, performa has yang O(1) membuat operasi menjadi lebih cepat.

Contoh Praktis: Mencari Perbedaan Array (Mendeteksi Item Ditambah/Dihapus)

Contoh berikut mendemonstrasikan bagaimana menggunakan Set untuk menemukan perbedaan antara dua array (daftar lama dan daftar baru). Ini memungkinkan Anda mengetahui elemen mana yang ditambahkan dan mana yang dihapus.

 1// Find added and removed items between two arrays
 2function diffArrays(oldArr, newArr) {
 3  const oldSet = new Set(oldArr);
 4  const newSet = new Set(newArr);
 5
 6  const added = [...newSet].filter(x => !oldSet.has(x));
 7  const removed = [...oldSet].filter(x => !newSet.has(x));
 8
 9  return { added, removed };
10}
11
12const oldList = [1, 2, 3];
13const newList = [2, 3, 4, 5];
14
15console.log(diffArrays(oldList, newList));
16// { added: [4,5], removed: [1] }
  • Metode ini sangat praktis untuk mendeteksi perbedaan dalam daftar ID, tag, dan situasi serupa. Paling mudah digunakan untuk nilai primitif.

Perbedaan Antara WeakSet dan Set (Manajemen Memori)

WeakSet mirip dengan Set, tetapi menggunakan referensi lemah sehingga item di dalamnya dapat dikumpulkan oleh garbage collector. Berikut mendemonstrasikan penggunaan dasar dari WeakSet.

1// WeakSet basics (objects only, not iterable)
2const ws = new WeakSet();
3let obj = { id: 1 };
4ws.add(obj);
5
6console.log(ws.has(obj)); // true
7
8obj = null; // Now the object is eligible for GC; WeakSet won't prevent collection

WeakSet hanya dapat menyimpan objek dan tidak dapat diiterasi. Berikut adalah contoh keterbatasan dari WeakSet—hanya dapat menyimpan objek dan tidak dapat diiterasi.

 1// WeakSet basics (objects only, not iterable)
 2const ws = new WeakSet();
 3
 4// --- Only objects can be added ---
 5try {
 6	ws.add(1); // number
 7} catch (e) {
 8	console.log("Error: WeakSet can only store objects. Adding a number is not allowed.");
 9}
10
11try {
12	ws.add("text"); // string
13} catch (e) {
14	console.log("Error: WeakSet can only store objects. Adding a string is not allowed.");
15}
16
17// --- WeakSet is not iterable ---
18try {
19	for (const value of ws) {
20		console.log(value);
21	}
22} catch (e) {
23	console.log("Error: WeakSet is not iterable. You cannot use for...of to loop over its elements.");
24}
25
26// --- Cannot convert to array ---
27try {
28	console.log([...ws]);
29} catch (e) {
30	console.log("Error: WeakSet cannot be converted to an array because it does not support iteration.");
31}
32
33// The object becomes eligible for garbage collection
34let obj = { id: 1 };
35ws.add(obj);
36obj = null;
  • WeakSet berguna untuk melacak keberadaan objek secara sementara, namun Anda tidak dapat menelusuri elemennya atau mendapatkan ukurannya.

Performa dan Kapan Menggunakannya

Saat memutuskan apakah akan menggunakan Set atau tidak, penting untuk memahami karakteristik performanya dan sifat data Anda.

  • has, add, dan delete biasanya beroperasi dengan performa hampir O(1) secara rata-rata. Oleh karena itu, pada situasi di mana Anda sering memeriksa keberadaan atau menghapus duplikat, Set seringkali lebih unggul daripada array.
  • Hati-hati jika Anda ingin menghapus duplikat objek berdasarkan isi (nilai) mereka. Karena Set membandingkan berdasarkan referensi, cara praktis adalah menggunakan ID atau kunci lain, atau mengubah objek menjadi nilai primitif sebelum menggunakan Set jika Anda memerlukan perbandingan berdasarkan nilai.
  • Set sangat berguna untuk meningkatkan keterbacaan kode pada koleksi kecil hingga sedang. Di sisi lain, jika Anda menangani jumlah elemen yang sangat banyak atau sering mengonversi antara array dan Set, sangat disarankan untuk benar-benar melakukan benchmark dan mengujinya.

Kesalahan Umum

Set memang praktis, namun jika Anda tidak memahami spesifikasinya, Anda bisa bingung oleh perilaku yang tidak terduga. Berikut adalah beberapa poin penting yang perlu diperhatikan:.

  • Objek dibandingkan berdasarkan referensi, jadi meskipun isi objek sama, objek yang berbeda tidak dianggap duplikat.
  • Set mempertahankan urutan penambahan, tapi Anda tidak bisa mengakses elemen berdasarkan indeks seperti pada array. Jika ingin akses berdasarkan indeks, konversikan Set ke array terlebih dahulu.
  • WeakSet tidak dapat diiterasi, dan hanya bisa menyimpan objek. Perhatikan bahwa penggunaannya terbatas.
  • NaN dianggap nilai yang sama, dan +0 dan -0 tidak dibedakan. Ini karena aturan perbandingan Same-value-zero.

Ringkasan

Set adalah struktur data yang praktis yang memungkinkan Anda menangani kumpulan nilai unik secara intuitif. Anda dapat menggunakannya untuk menghapus duplikat pada array, melakukan pengecekan keberadaan dengan cepat, atau mengimplementasikan operasi himpunan seperti union dan intersection dengan kode yang sederhana dan mudah dibaca.

Di sisi lain, karena objek dibandingkan berdasarkan referensi, diperlukan langkah tambahan jika Anda ingin menilai kesamaan berdasarkan isi objek.

Dengan memahami karakteristik ini dan menggunakannya dengan tepat, Set menjadi pilihan yang kuat untuk meningkatkan keterbacaan dan pemeliharaan kode.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Objek `Map`Objek `Date`