Di lecture ini fokusnya adalah bagaimana melakukan looping/iterasi terhadap Set di JavaScript.

Ada 2 cara utama yang dibahas:

1. Menggunakan for...of
2. Menggunakan forEach()

Karena sebelumnya kita sudah membahas Set, sekarang kita hubungkan konsep tersebut dengan looping.

1. Mengingat kembali apa itu Set

Set adalah struktur data yang menyimpan nilai-nilai unik.

Contohnya:

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London",
  "Berlin"
]);

Isi mySet:

Delhi
Tokyo
London
Berlin

Karena Set tidak memiliki index seperti Array, kita tidak bisa melakukan:

mySet[0]

Hasilnya:

undefined

Jadi bagaimana kalau kita ingin mengambil semua nilai di dalam Set satu per satu?

Nah, di sinilah looping digunakan.

2. Looping Set menggunakan for...of

Cara pertama adalah menggunakan for...of.

Bentuk dasarnya:

for (const value of mySet) {
  // lakukan sesuatu
}

Contoh:

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London",
  "Berlin"
]);

for (const value of mySet) {
  console.log(value);
}

Output:

Delhi
Tokyo
London
Berlin

Apa yang sebenarnya terjadi?

Perhatikan:

for (const value of mySet)

Kita mempunyai variabel:

value

Variabel ini akan mendapatkan satu nilai dari Set pada setiap iterasi.

Jadi kira-kira prosesnya seperti ini:

Iterasi pertama

value = "Delhi"

Kemudian:

console.log(value);

menghasilkan:

Delhi

Iterasi kedua

value = "Tokyo"

Output:

Tokyo

Iterasi ketiga

value = "London"

Output:

London

Iterasi keempat

value = "Berlin"

Output:

Berlin

Setelah semua elemen selesai, looping berhenti.

3. Kenapa for...of bisa digunakan pada Set?

Ini berkaitan dengan konsep iterable.

Sebelumnya kita mungkin sudah menggunakan for...of pada Array:

const numbers = [10, 20, 30];

for (const number of numbers) {
  console.log(number);
}

Dan juga bisa digunakan pada String:

const name = "Budi";

for (const character of name) {
  console.log(character);
}

Kenapa bisa?

Karena Array dan String merupakan iterable.

Nah, Set juga merupakan iterable.

Jadi:

for (const value of mySet)

valid karena mySet bisa di-iterasi.

Cara mudah mengingatnya

for...of bisa digunakan untuk mengambil nilai-nilai dari sesuatu yang iterable.

Contoh:

// Array
for (const value of array) {}

// String
for (const value of string) {}

// Set
for (const value of set) {}

4. Apakah value harus diberi nama value?

Tidak.

Nama variabelnya bebas.

Misalnya:

for (const city of mySet) {
  console.log(city);
}

Atau:

for (const item of mySet) {
  console.log(item);
}

Atau:

for (const data of mySet) {
  console.log(data);
}

Semuanya valid.

Yang penting kita memahami bahwa variabel tersebut akan berisi elemen Set yang sedang diproses.

Contoh:

const cities = new Set([
  "Delhi",
  "Tokyo",
  "London"
]);

for (const city of cities) {
  console.log(city);
}

Di sini city akan berisi:

Delhi
Tokyo
London

satu per satu.

5. Kita bisa melakukan logic di dalam for...of

Tidak hanya console.log.

Kita bisa melakukan berbagai operasi.

Misalnya:

const numbers = new Set([10, 20, 30, 40]);

for (const number of numbers) {
  console.log(number * 2);
}

Output:

20
40
60
80

Atau:

const cities = new Set([
  "Delhi",
  "Tokyo",
  "London"
]);

for (const city of cities) {
  if (city === "Tokyo") {
    console.log("Tokyo ditemukan!");
  }
}

Output:

Tokyo ditemukan!

Jadi konsepnya sebenarnya sederhana:

Ambil elemen Set satu per satu, kemudian lakukan sesuatu terhadap elemen tersebut.

6. Looping Set menggunakan forEach()

Cara kedua adalah menggunakan method:

forEach()

Menariknya, forEach() bukan hanya milik Array.

Set juga mempunyai forEach().

Contohnya:

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London",
  "Berlin"
]);

mySet.forEach(function(value) {
  console.log(value);
});

Output:

Delhi
Tokyo
London
Berlin

Jadi sama seperti for...of, kita bisa mengambil setiap elemen Set satu per satu.

7. Bagaimana cara kerja forEach()?

Perhatikan:

mySet.forEach(function(value) {
  console.log(value);
});

Kita memberikan sebuah callback function kepada forEach().

function(value) {
  console.log(value);
}

Callback function tersebut akan dijalankan untuk setiap elemen di dalam Set.

Misalnya Set kita:

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London",
  "Berlin"
]);

Maka callback akan dipanggil 4 kali.

Secara konsep:

function("Delhi") {
  console.log("Delhi");
}

function("Tokyo") {
  console.log("Tokyo");
}

function("London") {
  console.log("London");
}

function("Berlin") {
  console.log("Berlin");
}

Tentu saja JavaScript yang melakukan proses tersebut secara otomatis.

8. Callback forEach() bisa menggunakan Arrow Function

Tidak harus menggunakan:

function(value) {
  console.log(value);
}

Kita juga bisa menggunakan arrow function:

mySet.forEach((value) => {
  console.log(value);
});

Atau karena hanya satu statement:

mySet.forEach(value => console.log(value));

Ketiganya pada dasarnya digunakan untuk tujuan yang sama.

9. Ada 3 parameter pada callback Set.forEach()

Nah, bagian ini sangat penting.

Pada Set.forEach(), callback bisa menerima 3 parameter:

mySet.forEach(function(value, key, set) {
  
});

Ketiga parameter tersebut adalah:

1. value
2. key
3. set

Tapi ada hal yang agak aneh di sini.

Untuk Set, value dan key ternyata sama.

Mari kita bahas satu per satu.

10. Parameter pertama: value

Parameter pertama adalah:

value

Ini adalah nilai dari Set yang sedang diproses.

Contoh:

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London"
]);

mySet.forEach(function(value) {
  console.log(value);
});

Output:

Delhi
Tokyo
London

Jadi:

Ini cukup masuk akal.

11. Parameter kedua: key

Nah, di sinilah biasanya pemula bingung.

Pada Array, kita mengenal:

array.forEach(function(value, index) {
  
});

Contoh:

const cities = [
  "Delhi",
  "Tokyo",
  "London"
];

cities.forEach(function(value, index) {
  console.log(value, index);
});

Output:

Delhi 0
Tokyo 1
London 2

Karena Array memiliki index:

Delhi  -> index 0
Tokyo  -> index 1
London -> index 2

Tetapi Set tidak memiliki index.

Set juga tidak memiliki pasangan:

key -> value

seperti Object atau Map.

Jadi kita mungkin bertanya:

Kalau Set tidak punya key dan tidak punya index, lalu parameter kedua isinya apa?

Jawabannya:

Parameter kedua juga berisi value yang sama.

Contoh:

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London"
]);

mySet.forEach(function(value, key) {
  console.log(value, key);
});

Output:

Delhi Delhi
Tokyo Tokyo
London London

Perhatikan:

value    key
Delhi    Delhi
Tokyo    Tokyo
London   London

value dan key sama.

12. Kenapa JavaScript membuat key kalau Set tidak punya key?

Ini lebih kepada konsistensi API JavaScript.

forEach() digunakan pada beberapa struktur data.

Misalnya Array:

array.forEach(function(value, index, array) {

});

Untuk struktur lain seperti Map, konsepnya juga memiliki beberapa parameter.

JavaScript ingin menjaga pola/signature callback yang konsisten.

Jadi pada Set tetap tersedia:

(value, key, set)

meskipun sebenarnya Set tidak mempunyai key seperti Map.

Untuk Set:

value → nilai Set
key   → nilai Set yang sama
set   → Set itu sendiri

Jadi jangan menganggap:

key

pada Set sebagai key sungguhan seperti key pada Object atau Map.

13. Parameter ketiga: set

Parameter ketiga adalah Set itu sendiri.

Contoh:

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London"
]);

mySet.forEach(function(value, key, set) {
  console.log(value);
  console.log(key);
  console.log(set);
});

Untuk setiap iterasi:

value → elemen saat ini
key   → elemen saat ini
set   → mySet

Misalnya iterasi pertama:

value = "Delhi"
key   = "Delhi"
set   = mySet

Iterasi kedua:

value = "Tokyo"
key   = "Tokyo"
set   = mySet

Iterasi ketiga:

value = "London"
key   = "London"
set   = mySet

Perhatikan bahwa set selalu merupakan Set yang sama.

14. Apakah ketiga parameter tersebut wajib ditulis?

Tidak.

Semuanya optional.

Kita bisa hanya menggunakan:

mySet.forEach(function() {
  console.log("Callback dijalankan");
});

Ini valid.

Misalnya Set memiliki 4 elemen:

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London",
  "Berlin"
]);

Kemudian:

mySet.forEach(function() {
  console.log("Callback dijalankan");
});

Output:

Callback dijalankan
Callback dijalankan
Callback dijalankan
Callback dijalankan

Kenapa 4 kali?

Karena Set mempunyai 4 elemen.

Callback dijalankan sekali untuk setiap elemen.

15. Kalau hanya membutuhkan value

Biasanya kita cukup menulis:

mySet.forEach(function(value) {
  console.log(value);
});

Tidak perlu:

mySet.forEach(function(value, key, set) {
  console.log(value);
});

Karena kita tidak menggunakan key dan set.

Bahkan dengan arrow function:

mySet.forEach(value => {
  console.log(value);
});

Ini jauh lebih sederhana.

16. Perbandingan Array forEach() vs Set forEach()

Ini bagian yang bagus untuk dihafalkan.

Array

const numbers = [10, 20, 30];

numbers.forEach(function(value, index, array) {
  console.log(value, index, array);
});

Parameter:

value → nilai
index → index
array → Array

Contohnya:

10 → 0 → array
20 → 1 → array
30 → 2 → array

Set

const numbers = new Set([10, 20, 30]);

numbers.forEach(function(value, key, set) {
  console.log(value, key, set);
});

Parameter:

value → nilai
key   → nilai yang sama
set   → Set

Contohnya:

10 → 10 → set
20 → 20 → set
30 → 30 → set

Jadi perbedaan pentingnya:

Ini juga menjelaskan kenapa lecture mengatakan JavaScript mempertahankan tiga parameter untuk konsistensi.

17. for...of vs forEach() pada Set

Sekarang kita bandingkan dua cara yang baru kita pelajari.

for...of

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London"
]);

for (const value of mySet) {
  console.log(value);
}

forEach()

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London"
]);

mySet.forEach(function(value) {
  console.log(value);
});

Keduanya menghasilkan:

Delhi
Tokyo
London

Jadi untuk sekadar melakukan sesuatu terhadap setiap elemen, keduanya bisa digunakan.

18. Mana yang lebih mudah?

Untuk pemula, saya sarankan memahami for...of terlebih dahulu karena sintaksnya cukup natural:

for (const value of mySet) {
  console.log(value);
}

Cara membacanya:

“Untuk setiap value yang ada di mySet, lakukan sesuatu.”

Sedangkan forEach():

mySet.forEach(value => {
  console.log(value);
});

bisa dibaca:

“Panggil fungsi ini untuk setiap value yang ada di mySet.”

Keduanya sama-sama penting.

19. Kapan menggunakan for...of?

for...of sangat nyaman ketika kita ingin melakukan kontrol terhadap looping.

Contohnya kita bisa menggunakan:

break

Misalnya:

const cities = new Set([
  "Delhi",
  "Tokyo",
  "London",
  "Berlin"
]);

for (const city of cities) {
  console.log(city);

  if (city === "London") {
    break;
  }
}

Output:

Delhi
Tokyo
London

Setelah menemukan London, looping berhenti.

Ini salah satu alasan for...of sering terasa lebih fleksibel.

20. Contoh penggunaan Set + for...of

Misalnya kita mempunyai daftar username unik:

const usernames = new Set([
  "budi",
  "andi",
  "siti",
  "joko"
]);

Kita ingin membuat pesan untuk setiap user:

for (const username of usernames) {
  console.log(`Hello, ${username}!`);
}

Output:

Hello, budi!
Hello, andi!
Hello, siti!
Hello, joko!

21. Contoh penggunaan Set + forEach()

Kita bisa melakukan hal yang sama:

usernames.forEach(function(username) {
  console.log(`Hello, ${username}!`);
});

Atau lebih modern:

usernames.forEach(username => {
  console.log(`Hello, ${username}!`);
});

22. Jangan salah: for...of bukan for...in

Ini penting karena nama keduanya mirip.

for...of

Mengambil value:

for (const value of mySet) {
  console.log(value);
}

Untuk Set, ini yang biasanya kita inginkan.

for...in

Lebih berkaitan dengan property/key pada object.

Jangan berpikir:

for (const x in mySet)

adalah cara standar untuk mengambil elemen Set.

Untuk Set, gunakan:

for (const value of mySet)

atau:

mySet.forEach(value => {
  // ...
});

23. Hubungkan dengan konsep Set yang sudah kita pelajari

Sekarang kita gabungkan semuanya.

Misalnya:

const numbers = new Set([
  10,
  20,
  30,
  20,
  40,
  10
]);

Karena Set hanya menyimpan nilai unik, hasilnya:

10
20
30
40

Kemudian kita loop:

for (const number of numbers) {
  console.log(number);
}

Output:

10
20
30
40

Perhatikan bahwa 20 dan 10 yang duplikat tidak muncul dua kali.

Kenapa?

Bukan karena looping-nya.

Tetapi karena Set memang sudah menghilangkan duplikat ketika data dimasukkan.

Ini penting untuk dibedakan.

24. Contoh yang lebih realistis

Misalnya kita mempunyai daftar email yang mungkin duplikat:

const emails = [
  "a@gmail.com",
  "b@gmail.com",
  "a@gmail.com",
  "c@gmail.com",
  "b@gmail.com"
];

Kita ubah menjadi Set:

const uniqueEmails = new Set(emails);

Sekarang:

a@gmail.com
b@gmail.com
c@gmail.com

Kemudian kita loop:

for (const email of uniqueEmails) {
  console.log(`Mengirim email ke ${email}`);
}

Output:

Mengirim email ke a@gmail.com
Mengirim email ke b@gmail.com
Mengirim email ke c@gmail.com

Jadi kombinasi:

Array
   ↓
Set
   ↓
hilangkan duplikat
   ↓
loop dengan for...of

bisa sangat berguna dalam aplikasi nyata.

25. Cheat sheet

Membuat Set

const mySet = new Set([
  "Delhi",
  "Tokyo",
  "London"
]);

Loop dengan for...of

for (const value of mySet) {
  console.log(value);
}

Loop dengan forEach()

mySet.forEach(function(value) {
  console.log(value);
});

atau:

mySet.forEach(value => {
  console.log(value);
});

forEach() dengan tiga parameter

mySet.forEach(function(value, key, set) {
  console.log(value);
  console.log(key);
  console.log(set);
});

Pada Set:

value = elemen Set
key   = elemen Set yang sama
set   = Set itu sendiri

26. Kesimpulan paling penting

Ada beberapa poin yang sebaiknya benar-benar kamu pahami dari lecture ini.

1. Set bisa di-loop

Karena Set adalah iterable, kita bisa menggunakan:

for...of

Contoh:

for (const value of mySet) {
  console.log(value);
}

2. Set juga memiliki forEach()

Contoh:

mySet.forEach(value => {
  console.log(value);
});

Callback akan dijalankan satu kali untuk setiap elemen Set.

3. forEach() memiliki 3 parameter

(value, key, set)

Tetapi khusus Set:

value → nilai
key   → nilai yang sama
set   → Set

Jadi:

mySet.forEach((value, key, set) => {
  console.log(value, key, set);
});

akan menghasilkan value dan key yang sama.

4. Set tidak mempunyai index

Jangan berharap:

mySet[0]
mySet[1]
mySet[2]

akan mengambil elemen.

Set berbeda dengan Array.

Kalau ingin mengambil elemen satu per satu, gunakan:

for...of

atau:

forEach()

5. Mental model yang paling mudah

Bayangkan Set seperti kotak berisi barang-barang unik.

Set
┌─────────────┐
│ Delhi       │
│ Tokyo       │
│ London      │
│ Berlin      │
└─────────────┘

for...of:

“Ambil barang satu per satu dari kotak.”

for (const item of mySet) {
  console.log(item);
}

forEach():

“Untuk setiap barang di dalam kotak, jalankan fungsi ini.”

mySet.forEach(item => {
  console.log(item);
});

Dan karena kotak itu adalah Set, barang duplikat memang tidak ada.

Inti lecture ini: Set tidak memiliki index, tetapi tetap bisa di-loop. Cara paling umum adalah for...of dan Set.forEach(). Yang perlu paling diingat adalah keunikan forEach() pada Set: parameter pertama dan kedua sama-sama menerima value, sedangkan parameter ketiga menerima Set-nya sendiri.