Masukkan Password
98 Membuat Peta dari Array & Objek
Pada lecture ini fokusnya adalah bagaimana mengubah Array ↔ Map ↔ Object. Ini penting karena dalam JavaScript kita sering menerima data dalam bentuk yang berbeda-beda, lalu perlu mengubahnya ke struktur yang paling nyaman digunakan.
1. Review singkat: apa itu Map?
Sebelum masuk ke konversi, ingat dulu bentuk dasar Map.
const userMap = new Map();
userMap.set("name", "Mark");
userMap.set("age", 23);
userMap.set("gender", "male");
Hasilnya kira-kira:
Map {
"name" => "Mark",
"age" => 23,
"gender" => "male"
}
Artinya:
key value
----------------
"name" → "Mark"
"age" → 23
"gender"→ "male"
Untuk mengambil data:
userMap.get("name");
// "Mark"
Jadi secara sederhana:
Map = kumpulan pasangan key-value.
2. Membuat Map dari Array
Ini adalah bagian penting pertama dari lecture.
Misalnya kita punya Array:
const address = [
["city", "London"],
["country", "UK"],
["zip", "12345"],
["street", "Oxford Street"]
];
Perhatikan bentuk Array tersebut.
Ini bukan sekadar:
["city", "London", "country", "UK"]
Tetapi:
[
["city", "London"],
["country", "UK"],
["zip", "12345"],
["street", "Oxford Street"]
]
Jadi ada Array di dalam Array.
Istilah sederhananya adalah nested array.
3. Kenapa harus nested array?
Karena Map membutuhkan data dalam bentuk:
[key, value]
Contohnya:
["city", "London"]
JavaScript akan menganggap:
"city" → key
"London" → value
Kemudian:
["country", "UK"]
menjadi:
"country" → key
"UK" → value
Begitu seterusnya.
Karena itu kita bisa melakukan:
const addressMap = new Map(address);
Hasilnya:
Map {
"city" => "London",
"country" => "UK",
"zip" => "12345",
"street" => "Oxford Street"
}
Jadi rumus sederhananya:
new Map([
[key1, value1],
[key2, value2],
[key3, value3]
]);
4. Cara kerja new Map(array) secara sederhana
Misalnya:
const data = [
["name", "Budi"],
["age", 25],
["city", "Madiun"]
];
const map = new Map(data);
JavaScript membaca satu per satu:
Elemen pertama
["name", "Budi"]
menjadi:
key = "name"
value = "Budi"
Elemen kedua
["age", 25]
menjadi:
key = "age"
value = 25
Elemen ketiga
["city", "Madiun"]
menjadi:
key = "city"
value = "Madiun"
Hasil akhirnya:
Map {
"name" => "Budi",
"age" => 25,
"city" => "Madiun"
}
5. Bagaimana kalau nested array punya lebih dari 2 elemen?
Misalnya:
const data = [
["name", "Budi", "extra"],
["age", 25, "something"]
];
Kemudian:
const map = new Map(data);
Hasilnya tetap:
"name" → "Budi"
"age" → 25
Bagian:
"extra"
"something"
diabaikan.
Jadi Map constructor pada struktur entry seperti ini hanya membutuhkan:
elemen pertama → key
elemen kedua → value
Contoh:
["name", "Budi", "ABC", 123, true]
yang dipakai:
"name" → "Budi"
Sisanya tidak digunakan sebagai key/value tambahan.
6. Bagaimana kalau nested array hanya punya 1 elemen?
Misalnya:
const data = [
["name", "Budi"],
["age", 25],
["city"]
];
Perhatikan:
["city"]
Hanya punya satu elemen.
Maka:
key = "city"
value = undefined
Jadi:
const map = new Map(data);
menghasilkan konsep:
"name" → "Budi"
"age" → 25
"city" → undefined
Kenapa?
Karena:
["city"]
punya:
index 0 → "city"
index 1 → tidak ada
Maka:
key = array[0]; // "city"
value = array[1]; // undefined
7. Bagaimana kalau nested array kosong?
Misalnya:
const data = [
["name", "Budi"],
[],
["age", 25]
];
Untuk:
[]
tidak ada elemen pertama dan kedua.
Jadi:
key = undefined
value = undefined
Hasilnya secara konsep:
"name" → "Budi"
undefined → undefined
"age" → 25
Ini mungkin terlihat aneh, tetapi sebenarnya masuk akal kalau kita menganggap JavaScript mengambil:
entry[0]
entry[1]
dari setiap nested array.
Pada array kosong:
[][0] // undefined
[][1] // undefined
8. Kenapa Array biasa tidak bisa langsung dijadikan Map?
Misalnya:
const arr = [1, 2, 3, 4];
const map = new Map(arr);
Ini akan menghasilkan error.
Kenapa?
Karena Map mengharapkan setiap elemen input berupa pasangan:
[key, value]
Sedangkan Array kita berisi:
1
2
3
4
Angka 1 bukan pasangan [key, value].
Bandingkan:
❌ Salah
const arr = [1, 2, 3, 4];
new Map(arr);
Karena:
1
2
3
4
bukan:
[key, value]
✅ Benar
const arr = [
["a", 1],
["b", 2],
["c", 3]
];
new Map(arr);
Karena setiap elemen berbentuk:
[key, value]
9. Sekarang: Membuat Map dari Object
Misalnya kita memiliki Object:
const user = {
name: "Mark",
age: 23,
gender: "male"
};
Kita ingin mengubahnya menjadi:
Map {
"name" => "Mark",
"age" => 23,
"gender" => "male"
}
Apakah bisa langsung?
new Map(user);
❌ Tidak bisa.
Karena Map constructor mengharapkan iterable yang elemen-elemennya berbentuk entry seperti:
[key, value]
Object biasa bukan dalam format tersebut.
10. Solusinya: Object.entries()
JavaScript menyediakan:
Object.entries()
Tujuannya adalah mengubah Object menjadi Array of Arrays.
Misalnya:
const user = {
name: "Mark",
age: 23,
gender: "male"
};
Kemudian:
const objArray = Object.entries(user);
Hasilnya:
[
["name", "Mark"],
["age", 23],
["gender", "male"]
]
Nah!
Perhatikan bentuknya.
Ini sekarang sudah persis seperti format yang dibutuhkan Map.
[
[key, value],
[key, value],
[key, value]
]
11. Jadi proses Object → Map seperti apa?
Kita bisa membayangkannya sebagai dua tahap.
Tahap 1
Object:
const user = {
name: "Mark",
age: 23,
gender: "male"
};
ubah menjadi Array:
const entries = Object.entries(user);
Hasil:
[
["name", "Mark"],
["age", 23],
["gender", "male"]
]
Tahap 2
Array tersebut dimasukkan ke Map:
const userMap = new Map(entries);
Hasil:
Map {
"name" => "Mark",
"age" => 23,
"gender" => "male"
}
12. Bisa dibuat langsung dalam satu baris
Karena Object.entries() menghasilkan Array yang bisa diterima oleh Map, kita bisa menulis:
const userMap = new Map(Object.entries(user));
Ini adalah pola yang sangat berguna.
Secara visual:
Object
↓
Object.entries()
↓
Array of [key, value]
↓
new Map()
↓
Map
13. Object.entries() sebenarnya sangat penting
Misalnya:
const user = {
name: "Budi",
age: 25
};
Kalau:
Object.entries(user)
hasilnya:
[
["name", "Budi"],
["age", 25]
]
Sedangkan:
Object.keys(user)
menghasilkan:
["name", "age"]
Dan:
Object.values(user)
menghasilkan:
["Budi", 25]
Jadi ingat:
| Method | Hasil |
|---|---|
Object.keys(obj) | Array berisi keys |
Object.values(obj) | Array berisi values |
Object.entries(obj) | Array berisi [key, value] |
Karena Map membutuhkan [key, value], maka Object.entries() sangat cocok untuk membuat Map dari Object.
14. Sekarang kebalikannya: Map → Array
Sekarang kita punya:
const userMap = new Map();
userMap.set("name", "Mark");
userMap.set("age", 23);
userMap.set("gender", "male");
userMap.set("city", "London");
Hasil:
Map {
"name" => "Mark",
"age" => 23,
"gender" => "male",
"city" => "London"
}
Bagaimana cara mengubah Map menjadi Array?
Gunakan spread operator:
const arr = [...userMap];
Hasil:
[
["name", "Mark"],
["age", 23],
["gender", "male"],
["city", "London"]
]
15. Kenapa [...userMap] bisa menjadi Array?
Ini berhubungan dengan konsep iterable.
Kita sudah belajar bahwa Map adalah iterable.
Artinya kita bisa mengambil elemen-elemen yang ada di dalamnya.
Misalnya:
const userMap = new Map([
["name", "Mark"],
["age", 23],
["gender", "male"]
]);
Ketika kita menulis:
[...userMap]
spread operator mengambil seluruh entry dari Map.
Setiap entry Map berbentuk:
["name", "Mark"]
Kemudian:
["age", 23]
dan:
["gender", "male"]
Lalu semuanya dimasukkan ke Array luar:
[
["name", "Mark"],
["age", 23],
["gender", "male"]
]
Jadi:
[...userMap]
berarti kira-kira:
“Ambil semua entry dari
userMap, lalu masukkan semuanya ke dalam Array.”
16. Kenapa hasilnya nested array?
Karena setiap entry dalam Map memang terdiri dari:
[key, value]
Misalnya Map:
"name" → "Mark"
"age" → 23
Ketika diekstrak:
[
["name", "Mark"],
["age", 23]
]
Jadi:
- Array luar = seluruh collection
- Array dalam = masing-masing pasangan key-value
Ini konsep yang sangat penting.
17. Map → Array hanya berisi keys
Bagaimana kalau kita tidak ingin semua entry?
Misalnya kita hanya ingin:
["name", "age", "gender", "city"]
Gunakan:
userMap.keys()
Tetapi hati-hati.
keys() tidak langsung menghasilkan Array.
Ia menghasilkan iterator.
Karena iterator adalah iterable, kita bisa menggunakan spread:
const keys = [...userMap.keys()];
Hasil:
["name", "age", "gender", "city"]
18. Kenapa harus pakai [...]?
Ini:
userMap.keys()
adalah iterator.
Sedangkan kita ingin Array.
Maka:
[...userMap.keys()]
berarti:
Ambil semua hasil iterator tersebut dan masukkan ke Array.
Contoh:
const keys = [...userMap.keys()];
hasil:
["name", "age", "gender", "city"]
19. Map → Array hanya berisi values
Kalau yang kita inginkan hanya value:
["Mark", 23, "male", "London"]
gunakan:
const values = [...userMap.values()];
Hasil:
["Mark", 23, "male", "London"]
Jadi:
userMap.keys()
→ iterator keys
userMap.values()
→ iterator values
userMap.entries()
→ iterator key-value pairs
Dan kalau ingin Array:
[...userMap.keys()]
[...userMap.values()]
[...userMap.entries()]
20. entries() pada Map
Kita juga punya:
userMap.entries()
Hasilnya adalah iterator yang berisi:
["name", "Mark"]
["age", 23]
["gender", "male"]
["city", "London"]
Kalau ingin Array:
const entries = [...userMap.entries()];
hasil:
[
["name", "Mark"],
["age", 23],
["gender", "male"],
["city", "London"]
]
Dan ini sama dengan:
[...userMap]
Jadi:
[...userMap]
dan:
[...userMap.entries()]
secara hasil memberikan struktur yang sama.
21. Kenapa ...userMap sama dengan ...userMap.entries()?
Karena ketika Map di-iterasi, default iteration-nya adalah entries.
Jadi:
for (const item of userMap) {
console.log(item);
}
akan mendapatkan:
["name", "Mark"]
["age", 23]
["gender", "male"]
Bukan hanya:
"name"
"age"
"gender"
dan bukan hanya:
"Mark"
23
"male"
Kalau ingin keys:
userMap.keys()
Kalau ingin values:
userMap.values()
Kalau ingin key + value:
userMap.entries()
22. Gambaran besar lecture ini
Sebenarnya seluruh lecture ini bisa dipahami dengan diagram berikut:
OBJECT
│
│ Object.entries()
↓
Array of [key, value]
│
│ new Map()
↓
MAP
│
┌─────────┼─────────┐
│ │ │
.keys() .values() .entries()
│ │ │
↓ ↓ ↓
iterator iterator iterator
│ │ │
↓ ↓ ↓
[... ] [... ] [... ]
│ │ │
↓ ↓ ↓
Array Array Array
Dan dari Map langsung ke Array:
[...userMap]
23. Cheat sheet yang wajib diingat
Array → Map
Array harus berbentuk:
[
["key1", "value1"],
["key2", "value2"]
]
Kemudian:
const map = new Map(array);
Object → Map
Gunakan:
const map = new Map(Object.entries(object));
Map → Array semua entry
const array = [...map];
atau:
const array = [...map.entries()];
Map → Array keys
const keys = [...map.keys()];
Map → Array values
const values = [...map.values()];
24. Contoh lengkap
Misalnya kita mulai dengan Object:
const user = {
name: "Budi",
age: 25,
city: "Madiun"
};
Object → Array
const entries = Object.entries(user);
Hasil:
[
["name", "Budi"],
["age", 25],
["city", "Madiun"]
]
Array → Map
const userMap = new Map(entries);
Hasil:
Map {
"name" => "Budi",
"age" => 25,
"city" => "Madiun"
}
Map → Array
const array = [...userMap];
Hasil:
[
["name", "Budi"],
["age", 25],
["city", "Madiun"]
]
Ambil keys
const keys = [...userMap.keys()];
Hasil:
["name", "age", "city"]
Ambil values
const values = [...userMap.values()];
Hasil:
["Budi", 25, "Madiun"]
Ambil entries
const entries2 = [...userMap.entries()];
Hasil:
[
["name", "Budi"],
["age", 25],
["city", "Madiun"]
]
25. Hal yang paling sering bikin bingung
Ada tiga bentuk Array yang perlu dibedakan:
1. Array biasa
[1, 2, 3, 4]
Ini tidak cocok langsung untuk:
new Map()
2. Array berisi pasangan key-value
[
["name", "Budi"],
["age", 25]
]
Ini cocok untuk:
new Map(array);
3. Array hasil Map.keys()
["name", "age"]
Ini bisa dibuat dengan:
[...map.keys()]
Jadi jangan tertukar antara:
[1, 2, 3]
dengan:
[
[1, "one"],
[2, "two"],
[3, "three"]
]
Yang kedua memiliki struktur key-value pair, sehingga cocok untuk Map.
26. Mental model paling gampang
Bayangkan Map seperti lemari dengan label.
Map
"nama" → "Budi"
"umur" → 25
"kota" → "Madiun"
Kalau kita mau semua isi lemari:
[...map]
→
[
["nama", "Budi"],
["umur", 25],
["kota", "Madiun"]
]
Kalau mau semua label:
[...map.keys()]
→
["nama", "umur", "kota"]
Kalau mau semua isi/value:
[...map.values()]
→
["Budi", 25, "Madiun"]
Kalau mau pasangan label + isi:
[...map.entries()]
→
[
["nama", "Budi"],
["umur", 25],
["kota", "Madiun"]
]
Dan ketika membuat Map dari Array, JavaScript juga mengharapkan bentuk:
[
[key, value],
[key, value],
[key, value]
]
Jadi inti lecture ini sebenarnya cuma satu konsep besar:
Map bekerja sangat erat dengan struktur
[key, value], sedangkanObject.entries()dan spread operator membantu kita berpindah antara Object, Array, dan Map.