Map & Set - JavaScript
Published: 2024-01-20 09:17:33

Selain array dan object, di JavaScript juga ada tipe data yang hampir sama yaitu set dan map. Array hampir sama dengan set, yaitu kumpulan nilai yang mempunyai index berurutan, bedanya adalah pada set tidak diperbolehkan ada nilai yang sama/ganda/berulang. Object hampir sama dengan map, bedanya tipe data key pada object harus selalu string sedangkan pada map semua tipe data diperbolehkan untuk dijadikan key termasuk object.

**MAP**

Inisiasi/pembuatan map.

```javascript
const map = new Map();
map.set('nama', 'John Doe');
map.set(1, 'Sepeda Balap');
map.set('1', 'Sepeda Motor');
console.log(map);
console.log(map.get('nama')); // mengambil nilai map
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lv45jsyshf0olmv5ksym.png)

Chaining dengan map.

```javascript
map.set(2, 'Makan').set('3', 'Ikan Gabus');
console.log(map);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ocarww5buz8ljd3mckt.png)

Perulangan/iterasi dengan map.

```javascript
// Map.keys() mengembalikan key
for (const key of map.keys()) {
  console.log(key, typeof(key));
}
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dkz3o9ncsn424ygeirg.png)

```javascript
// Map.values() mengembalikan nilai
for (const value of map.values()) {
  console.log(value);
}
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5mvlrq0rwlcalsnghjz.png)

```javascript
// Map.entries() mengembalikan pasangan key-value
for (const [key, value] of map.entries()) {
  console.log(key, value);
}
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rv2m2vbxhpzl2cd1wari.png)

```javascript
// Map.entries() mengembalikan pasangan key-value berupa array
for (const entries of map.entries()) {
  console.log(entries);
}
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu7l7wubjlcifvlr0yze.png)

Kita bisa membuat map dari array, caranya dengan memasukkan pasangan value-value pada array yang nantinya akan dikonversi menjadi pasangan key-value pada map.

```javascript
let map2 = new Map([
  [1, 'John'],
  ['1', 'Celine'],
  [true, 'Hanson'],
]);
console.log(map2);
for (const key of map2.keys()) {
  console.log(key, typeof key);
}
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8754ztb0ln6en36h9oze.png)

Membuat map dair object.

```javascript
let obj4 = {
  nama: 'John Doe',
  umur: 30,
};
let mapObj = new Map(Object.entries(obj4));
// Object.entries() mengembalikan pasangan key-value sesuai untuk pembuatan map
console.log(mapObj);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dnsnzh6ih52tez6939y.png)

Sebaliknya kita juga bisa membuat object dari map dengan mamasukkan array value-value.

```javascript
let objMap = Object.fromEntries([
  ['name', 'John Doe'],
  ['umur', 30],
  ['status', 'menikah'],
]);
console.log(objMap);
console.log(typeof objMap);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/928dkaoeh88fmvax2lvh.png)

**SET**

Inisiasi/pembuatan set.

```javascript
let menu = new Set(['Soto', 'Pecel', 'Rendang', 'Coto', 'Soto', 'soto']);
console.log(menu);
menu.add('Tempe penyet');
console.log(menu);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34yavihyq85y4a2ocwcz.png)

Pada contoh diatas terlihat bahwa ‘Soto’ meskipun ditulis 2 kali namun hanya ditampilkan 1 kali. Sedangkan ‘soto’ tetap ditampilkan karena ‘Soto’ berbeda dengan ‘soto’.

Perulangan/iterasi dengan set.

```javascript
for (const key of menu) {
  console.log(key);
}

for (const key of menu.values()) {
  console.log(key);
}
// Set.keys() dan Set.values() menghasilkan output yang sama karena set tidak memiliki key

// Hasil berupa array
for (const entries of menu.entries()) {
  console.log(entries);
}

// Hasil berupa pasangan value-value
for (const [key, value] of menu.entries()) {
  console.log(key, value);
}
```