Articles
Pengenalan ke JavaScript
Objek `Map`

Objek `Map`

Artikel ini menjelaskan tentang objek Map.

Kami akan menjelaskan langkah demi langkah, dari operasi dasar hingga contoh praktis yang bermanfaat dalam skenario dunia nyata.

YouTube Video

Objek Map

Map adalah koleksi yang menyimpan pasangan key-value. Ini mirip dengan sebuah objek, tetapi berbeda karena tipe apa pun, seperti objek, fungsi, atau primitif, dapat digunakan sebagai kunci, dan urutan penyisipan dipertahankan.

Dasar-dasar Map

Pertama, mari kita lihat cara membuat Map dan melakukan operasi dasar.

Kode berikut adalah contoh minimal yang membuat peta kosong, menambahkan kunci, dan mengambil nilai.

1// Create an empty Map and add key-value pairs
2const m = new Map();
3m.set('a', 1);
4m.set('b', 2);
5
6console.log(m.get('a')); // 1
7console.log(m.size);     // 2
  • Dalam kode ini, Anda dapat menambahkan elemen dengan set, mengambil nilai dengan get, dan memeriksa jumlah elemen dengan size.
  • Map mempertahankan urutan penambahan, sehingga cocok untuk pemrosesan yang bergantung pada urutan.

Perilaku set, get, has, dan delete

Berikut adalah contoh operasi baca, tulis, cek keberadaan, dan hapus yang umum.

Dengan kode berikut, Anda dapat memeriksa nilai kembali dan efek dari setiap metode.

 1// Demonstrate set, get, has, and delete
 2const m2 = new Map();
 3m2.set('x', 10);
 4console.log(m2.has('x'));  // true
 5console.log(m2.get('y'));  // undefined
 6
 7m2.delete('x');
 8console.log(m2.has('x'));  // false
 9
10// set returns the map itself, allowing method chaining
11m2.set('a', 1).set('b', 2);
12console.log(m2);  // Map { 'a' => 1, 'b' => 2 }
  • get akan mengembalikan undefined jika kunci tidak ada. has memeriksa keberadaan sebuah kunci, dan delete menghapus sebuah kunci.
  • Selain itu, karena set mengembalikan map itu sendiri, method chaining dapat dilakukan.

Jenis apa pun dapat digunakan sebagai kunci (menggunakan objek sebagai kunci)

Salah satu keuntungan utama dari Map adalah Anda dapat menggunakan objek secara langsung sebagai kunci.

Contoh berikut menunjukkan cara mengaitkan nilai dalam Map menggunakan objek sebagai kunci.

 1// Use objects as keys in a Map
 2const keyObj = { id: 1 };
 3const keyFunc = () => {};
 4const objMap = new Map();
 5
 6// Another object with the same content but a different reference
 7const anotherKeyObj = { id: 1 };
 8
 9objMap.set(keyObj, 'objectValue');
10objMap.set(keyFunc, 'functionValue');
11objMap.set(anotherKeyObj, 'anotherValue');
12
13console.log(objMap.get(keyObj));         // 'objectValue'
14console.log(objMap.get(keyFunc));        // 'functionValue'
15console.log(objMap.get(anotherKeyObj));  // 'anotherValue'
  • Saat menggunakan objek sebagai kunci, penting bahwa objek tersebut memiliki referensi yang sama. Meskipun isinya sama, objek dengan referensi yang berbeda diperlakukan sebagai berbeda dan bukan kunci yang sama.

Iterasi (perulangan)

Map mempertahankan urutan penambahan, sehingga iterasi sering digunakan.

Di bawah ini, kami menunjukkan cara menggunakan for...of, forEach, dan metode keys(), values(), serta entries().

 1// Iterating a Map with for...of and forEach
 2const iterMap = new Map([['a', 1], ['b', 2], ['c', 3]]);
 3
 4// for...of over entries (default)
 5for (const [key, value] of iterMap) {
 6  console.log(key, value);
 7}
 8
 9// forEach callback
10iterMap.forEach((value, key) => {
11  console.log(key, value);
12});
13
14// keys() and values()
15console.log([...iterMap.keys()]);   // ['a','b','c']
16console.log([...iterMap.values()]); // [1,2,3]
  • entries() mengembalikan array pasangan [key, value], yang dapat diubah menjadi array menggunakan spread syntax. Perhatikan bahwa callback untuk forEach menerima argumen dalam urutan value, key.

Konversi Antara Map dan Object

Anda dapat mengonversi sebuah objek yang ada ke Map, atau mengonversi Map ke objek biasa atau array.

 1// Convert between Map and Object / Array
 2const obj = { a: 1, b: 2 };
 3const mapFromObj = new Map(Object.entries(obj)); // Object -> Map
 4console.log(mapFromObj.get('a')); // 1
 5
 6const objFromMap = Object.fromEntries(mapFromObj); // Map -> Object
 7console.log(objFromMap); // { a: 1, b: 2 }
 8
 9const arrayFromMap = [...mapFromObj]; // Map -> Array of [key, value]
10console.log(arrayFromMap); // [['a',1], ['b',2]]
  • Menggunakan Object.entries dan Object.fromEntries membuat konversi menjadi mudah. Namun, karena kunci objek terbatas pada string atau symbol, kunci non-string akan hilang ketika dikonversi kembali ke objek.

Pola Praktis: Menghitung Frekuensi (Count Map)

Ketika menghitung frekuensi elemen dalam sebuah array, menggunakan Map membuat prosesnya menjadi lebih sederhana.

Kode berikut adalah contoh penggunaan map untuk menghitung frekuensi string dalam array dan mengurutkannya.

1// Count frequencies with Map
2const arr = ['apple','banana','apple','orange','banana','apple'];
3const freq = new Map();
4
5for (const item of arr) {
6  freq.set(item, (freq.get(item) || 0) + 1);
7}
8
9console.log([...freq.entries()]); // [['apple',3], ['banana',2], ['orange',1]]
  • Menggunakan Map memungkinkan pengecekan keberadaan dan pembaruan dengan mudah. Hal ini juga dapat dilakukan dengan objek, tetapi Map bisa lebih intuitif saat bekerja dengan kunci sembarang.

Catatan tentang Map dan JSON.stringify (Serialisasi)

JSON.stringify tidak dapat men-serialisasi sebuah Map secara langsung. Jika Anda perlu menyimpan Map, Anda harus mengonversinya terlebih dahulu.

Contoh berikut menunjukkan cara mengonversi Map ke array sebelum mengubahnya menjadi JSON, dan cara mengembalikannya.

1// Serialize and deserialize a Map
2const m3 = new Map([['x', 1], ['y', 2]]);
3const json = JSON.stringify([...m3]); // convert to array first
4console.log(json); // '[["x",1],["y",2]]'
5
6const restored = new Map(JSON.parse(json));
7console.log(restored.get('x')); // 1
  • Map yang perlu disimpan atau dikirim harus dikonversi ke array sebelum diserialisasi. Saat mengembalikan, gunakan JSON.parse untuk mengonversi ke array, lalu ubah kembali menjadi Map.

Pengantar WeakMap dan Cara Menggunakannya

WeakMap berbeda karena kuncinya direferensikan secara lemah (dapat dihapus oleh garbage collector).

Ini berguna untuk menyimpan cache atau metadata dengan objek sebagai kunci, yang akan dilepas secara otomatis ketika objek kunci dihapus.

1// WeakMap for metadata tied to object lifecycle
2const wm = new WeakMap();
3let obj = {};
4wm.set(obj, { meta: 'info' });
5console.log(wm.get(obj)); // { meta: 'info' }
6
7obj = null; // now the object can be GC'd and its entry removed from WeakMap
  • WeakMap tidak dapat dienumerasi atau diperiksa ukurannya, tetapi berguna untuk mencegah kebocoran memori.

Ringkasan

Map adalah koleksi yang praktis yang, tidak seperti objek, memungkinkan tipe kunci apa pun dan mempertahankan urutan penambahan. Dengan memahami segala hal dari operasi dasar hingga penggunaan lanjutan, Anda dapat mengelola data dengan lebih fleksibel dan intuitif. Dengan menggunakan Object dan Map secara tepat sesuai kasus penggunaan, Anda dapat meningkatkan kejelasan dan keterbacaan kode secara signifikan.

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

YouTube Video

`Array` objek