Lecture ini membahas method baru pada Set yang diperkenalkan di ES2025, terutama untuk melakukan operasi matematika pada himpunan seperti union, intersection, dan difference.

Kalau sebelumnya kita harus menulis beberapa baris logic sendiri, sekarang JavaScript menyediakan method khusus sehingga kodenya jauh lebih sederhana.

1. Gambaran besar materi

Di lecture sebelumnya kita sudah belajar bahwa Set cocok untuk menyimpan data yang unik.

Misalnya:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

Kalau kita gambarkan:

set1 = {1, 2, 3}

set2 = {3, 4, 5}

Keduanya mempunyai satu nilai yang sama:

3

Dengan dua Set tersebut kita bisa melakukan beberapa operasi matematika:

Union
Intersection
Difference
Symmetric Difference
Subset
Superset
Disjoint

ES2025 menyediakan method bawaan untuk melakukan operasi-operasi tersebut.

Yang dibahas secara detail di lecture ini adalah:

1. union()
2. intersection()
3. difference()

Kemudian diperkenalkan juga beberapa method lainnya:

• symmetricDifference()
• isDisjointFrom()
• isSubsetOf()
• isSupersetOf()

2. Sebelum ES2025: kita harus menulis logic sendiri

Ini adalah poin penting dari lecture.

Misalnya kita punya:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

Kita ingin mendapatkan union.

Secara matematika:

A = {1, 2, 3}
B = {3, 4, 5}

A ∪ B = {1, 2, 3, 4, 5}

Sebelum ES2025, kita bisa membuat logic sendiri, misalnya:

const union = new Set([
  ...set1,
  ...set2
]);

Kita menggabungkan semua nilai dari kedua Set, kemudian karena hasil akhirnya adalah Set, duplikat 3 otomatis dihilangkan.

Namun sekarang ada cara yang lebih jelas:

const union = set1.union(set2);

Jauh lebih mudah dibaca.

3. Apa itu Union?

Kita mulai dari konsep matematika.

Union berarti:

Gabungkan semua elemen dari Set A dan Set B, tetapi jangan menyimpan duplikat.

Misalnya:

A = {1, 2, 3}

B = {3, 4, 5}

Union:

A ∪ B

hasilnya:

{1, 2, 3, 4, 5}

Perhatikan angka 3.

3 ada di:

A

dan juga:

B

Tetapi hasil union hanya memiliki satu 3.

4. Union menggunakan ES2025

Sekarang JavaScript menyediakan:

union()

Contohnya:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

const union = set1.union(set2);

console.log(union);

Hasil:

Set {1, 2, 3, 4, 5}

Cara membacanya:

set1.union(set2)

artinya:

“Ambil union dari set1 dengan set2.”

5. Hal penting: union() menghasilkan Set

Perhatikan:

const union = set1.union(set2);

Hasilnya adalah:

Set

bukan Array.

Jadi kita bisa melakukan:

union instanceof Set

dan hasilnya:

true

Kalau kita ingin mengubahnya menjadi Array:

const unionArray = [...union];

hasilnya:

[1, 2, 3, 4, 5]

6. Apa itu Intersection?

Sekarang kita masuk ke operasi kedua:

intersection()

Intersection berarti:

Ambil elemen yang terdapat di kedua Set.

Misalnya:

A = {1, 2, 3}

B = {3, 4, 5}

Elemen yang terdapat di keduanya hanyalah:

3

Jadi:

A ∩ B = {3}

7. Cara lama melakukan Intersection

Sebelum ES2025, kita bisa melakukan sesuatu seperti:

const intersection = [...set1].filter(value => {
  return set2.has(value);
});

Mari kita pahami.

Pertama:

[...set1]

mengubah Set menjadi Array:

[1, 2, 3]

Kemudian kita gunakan:

.filter()

Untuk setiap angka, kita cek:

set2.has(value)

Untuk 1

set2.has(1)

hasil:

false

Jadi 1 tidak dimasukkan.

Untuk 2

set2.has(2)

hasil:

false

Jadi 2 tidak dimasukkan.

Untuk 3

set2.has(3)

hasil:

true

Jadi 3 dimasukkan.

Hasil akhirnya:

[3]

8. Masalah dengan cara lama

Logic tersebut memang bekerja, tetapi cukup panjang:

const intersection = [...set1].filter(value => {
  return set2.has(value);
});

Dan ada hal penting:

hasilnya adalah Array.

Padahal kita sedang melakukan operasi terhadap Set.

ES2025 memberikan method khusus:

intersection()

9. Intersection menggunakan ES2025

Sekarang kita bisa menulis:

const intersection = set1.intersection(set2);

Contoh lengkap:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

const intersection = set1.intersection(set2);

console.log(intersection);

Hasil:

Set {3}

Lebih sederhana dan lebih jelas.

Dan yang paling penting:

hasilnya Set

bukan Array.

10. Union vs Intersection

Supaya tidak tertukar:

Union

Semua elemen dari kedua Set.

A = {1, 2, 3}
B = {3, 4, 5}

Union
↓
{1, 2, 3, 4, 5}

Intersection

Hanya elemen yang ada di kedua Set.

A = {1, 2, 3}
B = {3, 4, 5}

Intersection
↓
{3}

Cara mengingatnya:

Union = gabungkan

Intersection = cari yang sama

11. Apa itu Difference?

Operasi ketiga adalah:

difference()

Difference sedikit berbeda.

Misalnya:

A = {1, 2, 3}

B = {3, 4, 5}

Kita ingin:

Elemen yang ada di A tetapi tidak ada di B.

Maka:

A - B

hasilnya:

{1, 2}

Kenapa?

Karena:

1 → ada di A, tidak ada di B → ambil
2 → ada di A, tidak ada di B → ambil
3 → ada di A dan B → jangan ambil

Jadi:

A - B = {1, 2}

12. Difference menggunakan cara lama

Sebelum ES2025, kita bisa menggunakan:

const difference = [...set1].filter(value => {
  return !set2.has(value);
});

Perhatikan tanda:

!

Ini berarti NOT.

Jadi:

!set2.has(value)

artinya:

“value TIDAK ada di set2.”

13. Mari kita bedah logic Difference

Misalnya:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

Kita lakukan:

[...set1].filter(value => {
  return !set2.has(value);
});

Value = 1

set2.has(1)

hasil:

false

Kemudian:

!false

menjadi:

true

Maka 1 masuk hasil.

Value = 2

set2.has(2)

hasil:

false

Kemudian:

!false

menjadi:

true

Maka 2 masuk hasil.

Value = 3

set2.has(3)

hasil:

true

Kemudian:

!true

menjadi:

false

Maka 3 tidak masuk hasil.

Hasil:

[1, 2]

14. Difference menggunakan ES2025

Sekarang jauh lebih mudah:

const difference = set1.difference(set2);

Contoh:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

const difference = set1.difference(set2);

console.log(difference);

Hasil:

Set {1, 2}

Jadi tidak perlu lagi:

[...set1].filter(...)

15. Hati-hati: Difference bersifat directional

Ini sangat penting.

Perhatikan:

set1.difference(set2)

tidak selalu sama dengan:

set2.difference(set1)

Contoh:

set1 = {1, 2, 3}
set2 = {3, 4, 5}

Kalau:

set1.difference(set2)

hasil:

{1, 2}

Tetapi kalau:

set2.difference(set1)

hasil:

{4, 5}

Kenapa?

Karena pertanyaannya berbeda.

set1.difference(set2)

Apa yang ada di set1 tetapi tidak ada di set2?

Jawab:

{1, 2}

set2.difference(set1)

Apa yang ada di set2 tetapi tidak ada di set1?

Jawab:

{4, 5}

16. Visualisasi sederhana

Misalkan:

Set A              Set B

  1                  4
  2                  5
   \                /
    \      3       /
     \____________/

Lebih mudah kalau menggunakan konsep Venn diagram:

        Set A              Set B
      _________          _________
     /         \        /         \
    /   1   2   \______/   4   5   \
    \            3              /
     \___________/ \____________/

Union

Semua:

1, 2, 3, 4, 5

Intersection

Bagian tengah:

3

A difference B

Bagian A saja:

1, 2

B difference A

Bagian B saja:

4, 5

17. Ringkasan ketiga method

Dengan:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

kita mendapatkan:

Dan semuanya menghasilkan Set.

18. Method baru lainnya

Lecture juga menyebut beberapa method lain yang tersedia pada Set.

Tidak dibahas secara detail, tetapi penting untuk tahu namanya:

symmetricDifference()
isDisjointFrom()
isSubsetOf()
isSupersetOf()

Mari kita pahami konsepnya secara singkat.

symmetricDifference()

Ini berarti:

Elemen yang hanya ada di salah satu Set, tetapi tidak ada di keduanya.

Contoh:

A = {1, 2, 3}
B = {3, 4, 5}

Yang hanya ada di A:

1, 2

Yang hanya ada di B:

4, 5

Maka symmetric difference:

{1, 2, 4, 5}

Angka 3 tidak masuk karena 3 ada di kedua Set.

19. isDisjointFrom()

Disjoint berarti dua Set tidak mempunyai elemen yang sama.

Misalnya:

A = {1, 2, 3}
B = {4, 5, 6}

Tidak ada nilai yang sama.

Maka:

set1.isDisjointFrom(set2)

menghasilkan:

true

Sedangkan:

A = {1, 2, 3}
B = {3, 4, 5}

mempunyai 3 yang sama.

Maka:

set1.isDisjointFrom(set2)

menghasilkan:

false

20. isSubsetOf()

Subset berarti semua elemen Set A terdapat di Set B.

Contoh:

A = {1, 2}
B = {1, 2, 3, 4}

Semua elemen A ada di B.

Jadi:

A adalah subset dari B

Secara JavaScript:

setA.isSubsetOf(setB)

hasil:

true

21. isSupersetOf()

Superset adalah kebalikan dari subset.

Misalnya:

A = {1, 2, 3, 4}
B = {1, 2}

Semua elemen B ada di A.

Maka:

A adalah superset dari B

JavaScript:

setA.isSupersetOf(setB)

hasil:

true

22. Kenapa ES2025 menambahkan method-method ini?

Karena operasi seperti:

Union
Intersection
Difference
Subset
Superset

sebenarnya adalah konsep matematika yang sudah sangat lama.

JavaScript sekarang menyediakan API yang secara langsung merepresentasikan konsep tersebut.

Dibandingkan kita menulis:

[...set1].filter(...)

kita bisa mengatakan secara langsung:

set1.intersection(set2)

Kode menjadi lebih:

• pendek
• mudah dibaca
• mudah dipahami
• lebih sesuai dengan konsep matematika Set

23. Perbandingan sebelum dan sesudah ES2025

Ini mungkin bagian paling penting dari lecture.

Union

Cara manual:

const union = new Set([
  ...set1,
  ...set2
]);

ES2025:

const union = set1.union(set2);

Intersection

Cara manual:

const intersection = [...set1].filter(value => {
  return set2.has(value);
});

ES2025:

const intersection = set1.intersection(set2);

Difference

Cara manual:

const difference = [...set1].filter(value => {
  return !set2.has(value);
});

ES2025:

const difference = set1.difference(set2);

Jauh lebih clean.

24. Satu hal penting: hasilnya adalah Set

Ini perlu benar-benar diperhatikan.

Misalnya:

const intersection = set1.intersection(set2);

Hasil:

Set

Bukan:

Array

Jadi kita bisa langsung melakukan operasi Set lainnya.

Misalnya:

const result = set1
  .union(set2)
  .difference(set3);

Karena method tersebut menghasilkan Set, kita bisa melakukan operasi Set berikutnya.

Kalau membutuhkan Array di akhir:

const resultArray = [
  ...set1.intersection(set2)
];

25. Contoh penggunaan nyata

Bayangkan kita mempunyai dua kelompok user.

const premiumUsers = new Set([
  "Budi",
  "Andi",
  "Siti"
]);

const activeUsers = new Set([
  "Siti",
  "Joko",
  "Andi"
]);

Siapa saja yang premium ATAU aktif?

Gunakan union:

const users = premiumUsers.union(activeUsers);

Hasil:

Budi
Andi
Siti
Joko

Siapa yang premium DAN aktif?

Gunakan intersection:

const users = premiumUsers.intersection(activeUsers);

Hasil:

Andi
Siti

Siapa yang premium tetapi tidak aktif?

Gunakan difference:

const users = premiumUsers.difference(activeUsers);

Hasil:

Budi

Ini contoh yang jauh lebih mudah dipahami kalau kita melihat operasi Set sebagai pertanyaan.

26. Jangan merasa harus menghafal semuanya sekarang

Lecture juga mengatakan bahwa untuk seorang front-end developer, method-method ini mungkin tidak terlalu sering digunakan dalam pekerjaan sehari-hari.

Dan itu normal.

Yang penting sekarang adalah kamu memahami konsepnya.

Kalau suatu saat kamu melihat:

usersA.intersection(usersB)

kamu langsung tahu:

“Oh, ini sedang mencari data yang terdapat di kedua Set.”

Atau:

usersA.union(usersB)

kamu tahu:

“Oh, ini menggabungkan kedua Set tanpa duplikat.”

Atau:

usersA.difference(usersB)

kamu tahu:

“Oh, ini mencari data yang ada di A tetapi tidak ada di B.”

Itulah tujuan utama mempelajari API seperti ini.

27. Cheat sheet lengkap

Misalkan:

const A = new Set([1, 2, 3]);
const B = new Set([3, 4, 5]);

Maka:

// Union
A.union(B);
// Set {1, 2, 3, 4, 5}

// Intersection
A.intersection(B);
// Set {3}

// Difference
A.difference(B);
// Set {1, 2}

// Reverse difference
B.difference(A);
// Set {4, 5}

// Symmetric difference
A.symmetricDifference(B);
// Set {1, 2, 4, 5}

// Apakah tidak punya elemen yang sama?
A.isDisjointFrom(B);
// false

// Apakah A subset dari B?
A.isSubsetOf(B);
// false

// Apakah A superset dari B?
A.isSupersetOf(B);
// false

28. Cara paling gampang mengingatnya

Bayangkan dua kelompok:

A = kelompok mahasiswa kelas pagi
B = kelompok mahasiswa kelas sore

union()

Semua mahasiswa yang ada di kelas pagi atau sore.

A.union(B)

intersection()

Mahasiswa yang terdaftar di kedua kelas.

A.intersection(B)

difference()

Mahasiswa yang ada di kelas pagi tetapi tidak ada di kelas sore.

A.difference(B)

symmetricDifference()

Mahasiswa yang hanya ada di salah satu kelas, bukan keduanya.

A.symmetricDifference(B)

isSubsetOf()

Apakah semua mahasiswa di A juga ada di B?

A.isSubsetOf(B)

isSupersetOf()

Apakah B seluruhnya tercakup di A?

A.isSupersetOf(B)

isDisjointFrom()

Apakah A dan B sama sekali tidak punya anggota yang sama?

A.isDisjointFrom(B)

Kesimpulan

Lecture ini sebenarnya adalah penyempurnaan dari materi Set sebelumnya.

Dulu kita belajar bahwa operasi seperti union, intersection, dan difference bisa dibuat secara manual menggunakan spread, filter(), dan has().

Sekarang, dengan API Set modern, kita punya method khusus:

set1.union(set2)

set1.intersection(set2)

set1.difference(set2)

Dan beberapa method lainnya:

set1.symmetricDifference(set2)

set1.isDisjointFrom(set2)

set1.isSubsetOf(set2)

set1.isSupersetOf(set2)

Mental model paling penting:

UNION
A ATAU B
↓
Semua anggota

INTERSECTION
A DAN B
↓
Anggota yang sama

DIFFERENCE
A TAPI BUKAN B
↓
Anggota A saja

Jadi kalau kamu melihat:

const result = setA.intersection(setB);

jangan melihatnya sebagai syntax yang harus dihafal saja. Bacalah seperti kalimat:

“Saya ingin mendapatkan anggota yang dimiliki oleh setA dan setB sekaligus.”

Itulah inti dari Set methods baru di ES2025.