Masukkan Password
99 Perulangan pada Peta dalam JavaScript
Lecture ini membahas cara melakukan looping/iterasi pada Map di JavaScript.
Ada dua cara utama yang dibahas:
- Menggunakan
for...of - Menggunakan
forEach()
Yang paling penting untuk dipahami adalah: ketika kita melakukan loop pada Map, apa sebenarnya yang kita dapatkan di setiap iterasi?
1. Kita mulai dari Map-nya
Lecture menggunakan Array seperti ini:
const address = [
["city", "London"],
["country", "UK"],
["zip", 12345],
["street", "Oxford Street"]
];
Kemudian Array tersebut digunakan untuk membuat Map:
const myMap = new Map(address);
Hasilnya:
Map {
"city" => "London",
"country" => "UK",
"zip" => 12345,
"street" => "Oxford Street"
}
Kalau digambarkan:
KEY VALUE
-----------------------
city → London
country → UK
zip → 12345
street → Oxford Street
Map ini memiliki 4 entries.
2. Map adalah iterable
Sebelumnya kita sudah belajar bahwa beberapa struktur data JavaScript disebut iterable.
Contohnya:
- Array
- String
- Set
- Map
Kalau sesuatu adalah iterable, kita bisa melakukan iterasi terhadap isinya.
Misalnya Array:
const numbers = [10, 20, 30];
for (const number of numbers) {
console.log(number);
}
Hasil:
10
20
30
Map juga bisa digunakan dengan for...of.
3. Loop Map menggunakan for...of
Sintaks dasarnya:
for (const element of myMap) {
console.log(element);
}
Karena myMap adalah iterable, JavaScript akan mengambil entry satu per satu.
Misalnya:
const myMap = new Map([
["city", "London"],
["country", "UK"],
["zip", 12345],
["street", "Oxford Street"]
]);
Kemudian:
for (const element of myMap) {
console.log(element);
}
Hasilnya:
["city", "London"]
["country", "UK"]
["zip", 12345]
["street", "Oxford Street"]
Nah, ini adalah bagian yang sangat penting.
4. Apa isi element?
Pada setiap iterasi, element berisi sebuah Array yang terdiri dari dua elemen:
[key, value]
Contohnya iterasi pertama:
element
isinya:
["city", "London"]
Jadi:
element[0]
adalah:
"city"
dan:
element[1]
adalah:
"London"
Iterasi kedua:
element
menjadi:
["country", "UK"]
Maka:
element[0] // "country"
element[1] // "UK"
5. Kenapa for...of menghasilkan Array?
Karena entry dari Map berbentuk:
[key, value]
Map:
"city" → "London"
"country" → "UK"
Ketika di-loop, masing-masing entry diberikan sebagai:
["city", "London"]
["country", "UK"]
Jadi jangan membayangkan for...of Map seperti:
city
country
zip
street
atau:
London
UK
12345
Oxford Street
Yang diberikan secara default adalah pasangan key-value:
["city", "London"]
["country", "UK"]
["zip", 12345]
["street", "Oxford Street"]
6. Mengakses key dan value dengan element[0] dan element[1]
Karena element adalah Array:
["city", "London"]
kita bisa menggunakan index.
element[0]
→ key
element[1]
→ value
Misalnya:
for (const element of myMap) {
console.log("Key:", element[0]);
console.log("Value:", element[1]);
}
Hasil:
Key: city
Value: London
Key: country
Value: UK
Key: zip
Value: 12345
Key: street
Value: Oxford Street
7. Menggunakan template literal
Lecture kemudian menggunakan template literal.
for (const element of myMap) {
console.log(
`Key: ${element[0]}, Value: ${element[1]}`
);
}
Hasil:
Key: city, Value: London
Key: country, Value: UK
Key: zip, Value: 12345
Key: street, Value: Oxford Street
Ini sangat berguna karena kita bisa melakukan sesuatu terhadap setiap entry.
Misalnya:
for (const element of myMap) {
const key = element[0];
const value = element[1];
console.log(`${key}: ${value}`);
}
Hasil:
city: London
country: UK
zip: 12345
street: Oxford Street
8. Ada cara yang lebih nyaman: destructuring
Walaupun lecture belum membahasnya secara mendalam, ada satu syntax JavaScript yang sangat cocok untuk kasus ini, yaitu array destructuring.
Daripada:
for (const element of myMap) {
console.log(element[0], element[1]);
}
kita bisa menulis:
for (const [key, value] of myMap) {
console.log(key, value);
}
Jauh lebih mudah dibaca.
Kenapa bisa?
Karena setiap element sebenarnya berbentuk:
["city", "London"]
Maka:
const [key, value] = ["city", "London"];
akan menghasilkan:
key = "city"
value = "London"
Jadi:
for (const [key, value] of myMap) {
console.log(`${key}: ${value}`);
}
adalah bentuk yang sangat umum digunakan dalam JavaScript modern.
9. Loop Map menggunakan forEach()
Selain for...of, Map juga memiliki method:
forEach()
Sintaks sederhananya:
myMap.forEach(function() {
// logic
});
forEach() membutuhkan sebuah callback function.
Contoh:
myMap.forEach(function() {
console.log("Callback called");
});
Karena myMap punya 4 entry, callback akan dijalankan 4 kali.
Hasil:
Callback called
Callback called
Callback called
Callback called
Jadi konsepnya:
Map punya 4 entry
↓
forEach()
↓
callback dipanggil 4 kali
10. Callback pada Map.forEach() memiliki 3 parameter
Ini bagian yang sangat penting.
Callback Map.forEach() bisa menerima tiga parameter:
myMap.forEach(function(value, key, map) {
// ...
});
Urutannya:
parameter 1 → value
parameter 2 → key
parameter 3 → map
Jadi:
function(value, key, map)
bukan:
function(key, value, map)
Ini sering menjadi sumber kebingungan.
11. Parameter pertama = value
Contoh:
myMap.forEach(function(value) {
console.log(value);
});
Hasil:
London
UK
12345
Oxford Street
Karena parameter pertama adalah value.
Untuk entry:
"city" → "London"
maka:
value = "London"
Untuk:
"country" → "UK"
maka:
value = "UK"
Begitu seterusnya.
12. Parameter kedua = key
Kalau kita tulis:
myMap.forEach(function(value, key) {
console.log(key);
});
hasil:
city
country
zip
street
Karena parameter kedua adalah key.
Jadi:
function(value, key)
berarti:
value → nilai
key → key
13. Parameter ketiga = Map itu sendiri
Parameter ketiga adalah Map yang sedang di-loop.
myMap.forEach(function(value, key, map) {
console.log(map);
});
Pada setiap iterasi, map akan berisi:
Map {
"city" => "London",
"country" => "UK",
"zip" => 12345,
"street" => "Oxford Street"
}
Jadi parameter ketiga:
map
adalah Map yang sedang menjalankan forEach() tersebut.
14. Kenapa parameter value dulu baru key?
Ini memang agak membingungkan kalau kita terbiasa dengan Object atau Map.
Pada Map:
myMap.forEach(function(value, key, map) {
});
urutan parameternya adalah:
value → key → map
Bukan:
key → value → map
Misalnya:
myMap.forEach(function(value, key) {
console.log(value, key);
});
hasil pertama:
London city
Bukan:
city London
Karena:
value = London
key = city
15. Bandingkan for...of dan forEach()
Ini bagian yang sangat penting untuk dihafalkan.
for...of
for (const element of myMap) {
console.log(element);
}
Yang kita dapatkan:
["city", "London"]
["country", "UK"]
["zip", 12345]
Jadi:
element → [key, value]
forEach()
myMap.forEach(function(value, key, map) {
console.log(value, key);
});
Yang kita dapatkan langsung:
value → London
key → city
map → myMap
16. Supaya lebih jelas, lihat tabel ini
Misalnya Map:
const myMap = new Map([
["city", "London"],
["country", "UK"]
]);
for...of
for (const element of myMap) {
console.log(element);
}
| Iterasi | element |
|---|---|
| 1 | ["city", "London"] |
| 2 | ["country", "UK"] |
forEach()
myMap.forEach(function(value, key, map) {
});
| Iterasi | value | key |
|---|---|---|
| 1 | "London" | "city" |
| 2 | "UK" | "country" |
Dan:
map
selalu menunjuk ke myMap.
17. Contoh penggunaan forEach()
Misalnya kita ingin menampilkan semua data:
myMap.forEach(function(value, key) {
console.log(`${key}: ${value}`);
});
Hasil:
city: London
country: UK
zip: 12345
street: Oxford Street
Ini sangat mirip dengan:
for (const [key, value] of myMap) {
console.log(`${key}: ${value}`);
}
Keduanya bisa menghasilkan output yang sama.
18. Kapan menggunakan for...of?
for...of cocok kalau kita ingin melakukan looping dengan kontrol yang lebih fleksibel.
Misalnya kita ingin berhenti ketika menemukan zip:
for (const [key, value] of myMap) {
if (key === "zip") {
break;
}
console.log(key, value);
}
for...of juga terasa natural kalau kita ingin menggunakan:
breakcontinuereturndalam konteks tertentu
Contoh sederhana:
for (const [key, value] of myMap) {
if (key === "zip") {
break;
}
console.log(`${key}: ${value}`);
}
19. Kapan menggunakan forEach()?
forEach() cocok ketika kita ingin mengatakan:
“Untuk setiap entry dalam Map, lakukan sesuatu.”
Misalnya:
myMap.forEach(function(value, key) {
console.log(`${key}: ${value}`);
});
Atau dalam aplikasi web:
myMap.forEach(function(value, key) {
// tampilkan data ke UI
});
Ini sesuai dengan contoh yang diberikan lecture.
Misalnya kita punya data:
product1 → Laptop
product2 → Mouse
product3 → Keyboard
Kita bisa melakukan:
products.forEach(function(product, id) {
// buat HTML
// tampilkan product
});
Jadi setiap entry bisa digunakan untuk menghasilkan sesuatu di UI.
20. Jangan salah memahami forEach()
Ada perbedaan penting antara:
myMap.forEach(...)
dan:
myMap.entries()
entries() memberikan iterator berisi:
[key, value]
Sedangkan forEach() langsung memanggil callback untuk setiap entry.
Contoh:
myMap.entries()
→ iterator
Sedangkan:
myMap.forEach(function(value, key) {
});
→ menjalankan callback satu kali untuk setiap entry.
21. Hubungannya dengan keys(), values(), dan entries()
Kita sudah belajar sebelumnya:
myMap.keys()
→ mendapatkan keys
myMap.values()
→ mendapatkan values
myMap.entries()
→ mendapatkan [key, value]
Kalau di-loop:
Hanya keys
for (const key of myMap.keys()) {
console.log(key);
}
Hasil:
city
country
zip
street
Hanya values
for (const value of myMap.values()) {
console.log(value);
}
Hasil:
London
UK
12345
Oxford Street
Key + value
for (const [key, value] of myMap.entries()) {
console.log(key, value);
}
Hasil:
city London
country UK
zip 12345
street Oxford Street
Dan karena Map secara default melakukan iterasi terhadap entries, ini:
for (const [key, value] of myMap) {
console.log(key, value);
}
hasilnya sama dengan:
for (const [key, value] of myMap.entries()) {
console.log(key, value);
}
22. Ada satu hal penting: Map tidak punya index seperti Array
Ini berbeda dengan Array.
Array:
const arr = ["Budi", "Andi", "Siti"];
kita bisa:
arr[0] // "Budi"
arr[1] // "Andi"
Karena Array punya index.
Map:
const map = new Map([
["name", "Budi"],
["age", 25]
]);
tidak digunakan seperti:
map[0]
Kita menggunakan:
map.get("name");
Untuk looping, kita tidak berpikir:
index 0
index 1
index 2
Tetapi:
key + value
23. Contoh dunia nyata
Misalnya kita mempunyai Map untuk harga produk:
const products = new Map([
["Laptop", 1000],
["Mouse", 20],
["Keyboard", 50]
]);
Kita ingin menampilkan:
Laptop: $1000
Mouse: $20
Keyboard: $50
Dengan for...of:
for (const [product, price] of products) {
console.log(`${product}: $${price}`);
}
Dengan forEach():
products.forEach(function(price, product) {
console.log(`${product}: $${price}`);
});
Perhatikan lagi:
function(price, product)
karena untuk Map.forEach():
parameter 1 = value
parameter 2 = key
24. Contoh yang lebih realistis untuk UI
Misalnya kita mempunyai:
const users = new Map([
[1, "Budi"],
[2, "Andi"],
[3, "Siti"]
]);
Kemudian kita ingin membuat elemen HTML.
Secara konsep:
users.forEach(function(name, id) {
console.log(`User ${id}: ${name}`);
});
Hasil:
User 1: Budi
User 2: Andi
User 3: Siti
Dalam aplikasi nyata, bagian:
console.log(...)
bisa diganti dengan logic untuk:
- membuat HTML
- memasukkan data ke DOM
- membuat list
- menampilkan card
- dan sebagainya.
Inilah alasan lecture mengatakan forEach() akan digunakan pada project berikutnya untuk render data ke UI.
25. Ringkasan super penting
Ada dua pola utama yang perlu kamu ingat.
for...of
for (const [key, value] of myMap) {
console.log(key, value);
}
Mental model:
Ambil satu entry Map setiap iterasi.
Entry tersebut:
[key, value]
forEach()
myMap.forEach(function(value, key, map) {
console.log(key, value);
});
Mental model:
Untuk setiap entry, jalankan callback.
Parameternya:
value → nilai
key → key
map → Map-nya
26. Cheat sheet
const myMap = new Map([
["name", "Budi"],
["age", 25],
["city", "Madiun"]
]);
Loop semua entry dengan for...of
for (const [key, value] of myMap) {
console.log(key, value);
}
Loop semua entry dengan forEach
myMap.forEach(function(value, key) {
console.log(key, value);
});
Hanya key
for (const key of myMap.keys()) {
console.log(key);
}
Hanya value
for (const value of myMap.values()) {
console.log(value);
}
Entry secara eksplisit
for (const [key, value] of myMap.entries()) {
console.log(key, value);
}
🧠Mental model terakhir
Bayangkan Map seperti ini:
Map
│
├── "name" → "Budi"
├── "age" → 25
└── "city" → "Madiun"
Dengan for...of:
for (const [key, value] of map)
kamu mengambil:
[key, value]
[key, value]
[key, value]
Sedangkan dengan forEach():
map.forEach((value, key) => {})
JavaScript langsung memberikan:
value
key
map
Satu hal yang paling wajib diingat karena sering bikin salah:
map.forEach((value, key) => {})
bukan:
map.forEach((key, value) => {})
Untuk Map.forEach(), urutannya adalah:
value → key → map
Sedangkan kalau menggunakan for...of, kamu biasanya bisa membuatnya jauh lebih intuitif dengan destructuring:
for (const [key, value] of map) {
console.log(key, value);
}
Kalau sudah memahami dua pola ini, kamu sudah punya dasar yang kuat untuk mulai menggunakan Map dalam aplikasi JavaScript nyata.