Map & Set — JavaScript

Pernah pengen nyimpen pasangan key-value di JavaScript? Kebanyakan langsung ngira "pakai Object aja kan?" — bener, tapi Object punya batasan: key SELALU…

Map dan Set adalah dua wadah data bawaan JavaScript. Map menyimpan pasangan key dan value, mirip object, tapi key-nya boleh tipe apa saja. Set menyimpan daftar nilai yang gak boleh dobel: nilai yang sama cuma disimpan sekali.

🧪 Tebakan cepat: kalau kamu set key yang sama dua kali ke sebuah Map, isinya jadi dua atau tetap satu? Tebak dulu, jawabannya ada di bagian "Map: pasangan key dan value".

Map: pasangan key dan value

const users = new Map([
  ["ivan", 30],
  ["rio", 25],
]);

users.set("ani", 22);
console.log(users.get("ivan")); // 30
console.log(users.has("rio"));  // true
console.log(users.size);        // 3

users.set("ivan", 31);
console.log(users.get("ivan")); // 31
console.log(users.size);        // 3

new Map([...]) bikin Map baru. Tiap ["ivan", 30] adalah satu pasangan: key "ivan", value 30.
.set(key, value) menambah pasangan. Kalau key-nya sudah ada, value lamanya ditimpa.
.get(key) mengambil value-nya. Key yang gak ada menghasilkan undefined.
.has(key) menjawab true atau false, dan .delete(key) menghapus satu pasangan.
.size adalah jumlah pasangannya. Bukan .length.

Jawaban tebakan: tetap satu. Key di Map unik, jadi set("ivan", 31) menimpa 30 dan size tetap 3.

Bedanya dengan object biasa: key object selalu diubah jadi teks, sedangkan key Map boleh tipe data apa saja (angka, teks, bahkan object), dan urutannya tetap sesuai urutan masuk.

Set: daftar tanpa yang dobel

const buah = new Set(["apel", "mangga", "apel", "jeruk", "mangga"]);

console.log(buah.size);         // 3
buah.add("apel");               // sudah ada, gak nambah
console.log(buah.has("jeruk")); // true

new Set(array) bikin Set dari sebuah array dan langsung membuang yang dobel. Lima item jadi tiga.
.add(nilai) menambah nilai, tapi nilai yang sudah ada diabaikan.
.has, .delete, dan .size sama kayak di Map.

Jadi beda Set dengan array: array boleh berisi nilai yang sama berkali-kali, Set enggak.

Buang nilai dobel dari array

const angka = [1, 1, 2, 3, 3];
const unik = [...new Set(angka)];

console.log(unik); // [1, 2, 3]

new Set(angka) membuang yang dobel, lalu [...] membuka isi Set itu ke array baru. Titik tiga ini namanya spread, dibahas lengkap di pelajaran Spread & Rest. Array.from(new Set(angka)) hasilnya sama, dan array aslinya gak berubah.

Hitung kemunculan dengan Map

const warna = ["merah", "biru", "merah"];
const hitungan = new Map();

for (const w of warna) {
  hitungan.set(w, (hitungan.get(w) || 0) + 1);
}

console.log(Object.fromEntries(hitungan)); // { merah: 2, biru: 1 }

Waktu sebuah warna pertama kali muncul, hitungan.get(w) masih undefined. || 0 menggantinya dengan 0, lalu ditambah 1.
Warna yang muncul lagi mengambil hitungan lamanya, lalu ditambah 1.
Object.fromEntries(hitungan) mengubah Map jadi object biasa. Ini perlu, karena console di latihan mencetak Map sebagai {}.

⚠️ Jebakan yang sering ketemu

.length di Map atau Set. Hasilnya undefined. Pakai .size.
Kurung siku di Map. users["ivan"] = 30 bikin properti biasa, bukan isi Map, jadi .get dan .size gak melihatnya. Pakai .set dan .get.
Lupa || 0 waktu menghitung. undefined + 1 hasilnya NaN.
Mengembalikan Set waktu yang diminta array. Ubah dulu dengan [...set].

TL;DR: Map menyimpan pasangan key dan value: .set(), .get(), .has(), .delete(), dan .size. Key-nya unik dan boleh tipe apa saja. Set menyimpan nilai tanpa dobel, jadi [...new Set(array)] adalah cara paling singkat membuang duplikat. Buat menghitung, pakai map.set(kata, (map.get(kata) || 0) + 1), lalu Object.fromEntries(map) kalau butuh object biasa.